frontend-mobile-development-component-scaffold
Создание React-компонентов с TypeScript и тестами
Этот навык генерирует готовые к продакшену React и React Native компоненты с полной типизацией TypeScript, функциями доступности, настройкой тестирования и множеством вариантов стилизации. Он обеспечивает стабильное качество кода в библиотеке компонентов.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "frontend-mobile-development-component-scaffold". Создать компонент Button с пропсами variant, size и disabled
Resultado esperado:
Полный React-компонент с TypeScript-интерфейсом, стилями CSS Modules, атрибутами доступности и файлом теста
Usando "frontend-mobile-development-component-scaffold". Сгенерировать компонент Card для React Native с изображением, заголовком и описанием
Resultado esperado:
React Native компонент с StyleSheet, TouchableOpacity, accessibilityLabel и правильными TypeScript-типами
Auditoría de seguridad
SeguroAll static security findings are false positives. The detected patterns (external_commands, weak_crypto, obfuscation) are actually JavaScript template literals and standard array methods used in example code. The skill is a legitimate React component scaffolding tool with no security risks.
Puntuación de calidad
Lo que puedes crear
Быстрое прототипирование компонентов
Мгновенная генерация полных файлов компонентов с тестами и документацией для ускорения рабочего процесса разработки
Стандартизация кода команды
Обеспечение создания компонентов всеми членами команды по единым паттернам и лучшим практикам
Разработка с приоритетом доступности
Генерация компонентов со встроенными функциями доступности для соответствия требованиям WCAG
Prueba estos prompts
Create a functional React component called [ComponentName] with props for [prop1], [prop2]. Use TypeScript and CSS Modules for styling.
Generate a complete React component with TypeScript, including: component file, prop types, CSS Modules styles, Jest tests with Testing Library, and Storybook story. Make it accessible.
Create a React Native component for [ComponentName] that works on iOS and Android. Include TypeScript interfaces, StyleSheet styles, and accessibility props.
Generate a set of related components for a [ComponentName] feature including: main component, sub-components, types, styles, tests, and index file for clean imports.
Mejores prácticas
- Всегда используйте TypeScript-интерфейсы для пропсов компонентов, чтобы обеспечить типобезопасность во всём приложении
- Включайте атрибуты доступности с самого начала, а не добавляйте их позже
- Генерируйте тесты вместе с компонентами для поддержания высокого покрытия тестами
Evitar
- Избегайте генерации компонентов без типов пропсов - это приводит к ошибкам времени выполнения
- Не пропускайте функции доступности, так как их сложнее добавить после реализации
- Избегайте смешивания подходов к стилизации в одном компоненте