Skip to Content
Skillsfrontend-component

frontend-component

Generate production-ready React/Vue components with TypeScript, tests, and styles, following patterns already established in your codebase.

Triggers

Natural-language phrases that auto-invoke the skill:

  • “create a component”
  • “add a component”
  • “new component”
  • “build a component”
  • “generate component for [feature]“

What it does

  • Queries the knowledge graph first for existing frontend patterns, pitfalls, and decisions so conventions aren’t re-derived
  • Detects the framework from package.json (Next.js App Router gets Next-specific variants and Tailwind by default)
  • Generates the component file with a typed props interface, plus colocated test (React Testing Library), style file (CSS Modules / styled-components / Tailwind), and a barrel index.ts
  • Runs a Theory of Mind verification checkpoint for complex components — confirms inferred type, location, and props before writing files
  • Validates the component name (PascalCase, no reserved words)
  • Emits an execution summary that feeds patterns and decisions back into the knowledge graph

Example

"Create a UserProfile container component that fetches user data"

Confirms the inferred container type and props with you, then writes UserProfile.tsx, UserProfile.test.tsx, a style file, and index.ts under src/components/UserProfile/.

nav-diagnosefrontend-test