frontend-component

Generate production-ready React components with TypeScript, props interfaces, test files using React Testing Library, CSS modules, and barrel exports in one step. Specify component type and props, and the skill scaffolds all necessary files following your project's naming and structure conventions.

Yes, this skill generates Vue components with TypeScript, tests, and styles using the same production-ready scaffolding pattern. It applies the same naming validation, props interface generation, and project-pattern conformance whether you're building React or Vue.

Component generation creates the component file, TypeScript props interface, test file with React Testing Library setup, CSS module stylesheet, and barrel export. All files follow your project's conventions for naming and structure.

The skill validates naming conventions and applies project-specific patterns for component structure and styling during generation. It ensures consistency across your frontend codebase by checking conformance before scaffolding files.

Generate simple, hook-based, or container components. Specify your component type when invoking the skill, and it scaffolds the appropriate structure with TypeScript, tests, and styles matching that pattern.

No. Component generation creates test files with React Testing Library configuration and CSS module stylesheets ready to use. All generated files follow best practices and are production-ready without manual setup.