frontend-component_skill

Overview

This skill generates production-ready React or Vue components in TypeScript, including tests, styles, and a barrel export. It enforces naming and project conventions and adapts to simple, hooks-based, or container components. Use it to speed up consistent component creation that follows modern best practices.

How this skill works

The skill asks for component details (name, type, styling approach, props) and validates the name against project rules. It then generates a typed props interface, component file from the appropriate template, a test file using React Testing Library, a style file (CSS Modules, styled-components, or Tailwind utilities), and an index.ts barrel export. For complex cases it shows a verification checkpoint summarizing detected patterns before writing files.

When to use it

• You need a new UI component scaffold with TypeScript, tests, and styles.
• Adding a component for a new feature and you want consistent patterns.
• Migrating presentational code into a typed, tested component.
• Creating a data-fetching container or a hooks-based component.
• You want automated props interface and accessible defaults.

Best practices

• Choose descriptive PascalCase names and validate them before generation.
• Keep components small and single-responsibility; compose rather than enlarge.
• Define explicit TypeScript prop interfaces and export them for consumers.
• Prefer CSS Modules for scoped styles or styled-components when theme integration is needed.
• Write tests that assert user behavior and accessibility, not implementation details.

Example use cases

• Create a simple Button component with variants and a typed props interface.
• Add a SearchBar with useState and useEffect hooks and corresponding tests.
• Generate a UserProfile container that fetches data and exposes typed props.
• Scaffold a reusable List component with CSS Modules and accessibility attributes.
• Quickly produce a feature component with tests and barrel export for clean imports.