frontend-mobile-development-component-scaffold
Scaffold React Components with TypeScript and Tests
This skill generates production-ready React and React Native components with full TypeScript typing, accessibility features, testing setup, and multiple styling options. It ensures consistent code quality across your component library.
Die Skill-ZIP herunterladen
In Claude hochladen
Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen
Einschalten und loslegen
Teste es
Verwendung von "frontend-mobile-development-component-scaffold". Create a Button component with variant, size, and disabled props
Erwartetes Ergebnis:
A complete React component with TypeScript interface, CSS Modules styles, accessibility attributes, and test file
Verwendung von "frontend-mobile-development-component-scaffold". Generate a Card component for React Native with image, title, and description
Erwartetes Ergebnis:
React Native component with StyleSheet, TouchableOpacity, accessibilityLabel, and proper TypeScript types
Sicherheitsaudit
SicherAll 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.
Qualitätsbewertung
Was du bauen kannst
Rapid Component prototyping
Quickly generate complete component files with tests and documentation to speed up development workflow
Team code standardization
Ensure all team members create components following consistent patterns and best practices
Accessibility-first development
Generate components with built-in accessibility features to meet WCAG compliance requirements
Probiere diese 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.
Bewährte Verfahren
- Always use TypeScript interfaces for component props to ensure type safety across your application
- Include accessibility attributes from the start rather than adding them later
- Generate tests alongside components to maintain high test coverage
Vermeiden
- Avoid generating components without prop types - this leads to runtime errors
- Do not skip accessibility features as they are harder to add after implementation
- Avoid mixing styling approaches in the same component