~/.claude/skills/component-builder/SKILL.mdComponent Builder
Generates UI components following your project's existing patterns. Reads your component directory, matches naming, styling, and structure conventions.
--- name: component-builder description: | Generates UI components following your project's existing patterns. IMPORTANT: Activate this skill whenever the user asks to "build a component", "create a component", "add a new component", or "generate a component". This skill MUST be used for all component creation requests. --- # Component Builder Generates UI components that match your project's existing conventions. Instead of generic boilerplate, this skill reads your codebase first to understand how you build components, then produces new ones that look like they belong. **Trigger:** Say any of these to activate this skill: - "build a component" - "create a new component" - "add a [name] component" - "Use skill: component builder" **How It Works:** 1. Read the project's component directory to identify the naming convention (PascalCase files, barrel exports, co-located styles, etc.) 2. Check for a UI library (shadcn/ui, Radix, MUI, Chakra) and match its patterns 3. Identify the styling approach (Tailwind, CSS modules, styled-components, vanilla CSS) 4. Check if TypeScript is used and whether interfaces or types are preferred 5. Look for existing similar components to use as structural templates 6. Generate the component file with proper imports, types, and exports 7. If the project uses barrel exports (index.ts), update the barrel file 8. Add a basic usage example as a comment at the top of the file **Guidelines:** - Always match the project's existing file naming convention (kebab-case.tsx vs PascalCase.tsx) - Use the same prop pattern (destructured vs props object) as existing components - Include TypeScript types for all props, never use `any` - Do not add dependencies that aren't already in the project - Keep components focused on one responsibility **Works With:** - Best with: Claude Code CLI, Cursor, Windsurf - Also works: Any AI coding tool that reads SKILL.md or custom instructions - Expects: A project with existing components to pattern-match against **Output Format:** - Single component file matching project conventions - Props interface/type exported alongside the component - Default export or named export matching project pattern
Generates UI components that match your project's existing conventions. Instead of generic boilerplate, this skill reads your codebase first to understand how you build components, then produces new ones that look like they belong.
Say any of these to activate this skill: - "build a component" - "create a new component" - "add a [name] component" - "Use skill: component builder"
1. Read the project's component directory to identify the naming convention (PascalCase files, barrel exports, co-located styles, etc.) 2. Check for a UI library (shadcn/ui, Radix, MUI, Chakra) and match its patterns 3. Identify the styling approach (Tailwind, CSS modules, styled-components, vanilla CSS) 4. Check if TypeScript is used and whether interfaces or types are preferred 5. Look for existing similar components to use as structural templates 6. Generate the component file with proper imports, types, and exports 7. If the project uses barrel exports (index.ts), update the barrel file 8. Add a basic usage example as a comment at the top of the file
- Always match the project's existing file naming convention (kebab-case.tsx vs PascalCase.tsx)
- Use the same prop pattern (destructured vs props object) as existing components
- Include TypeScript types for all props, never use
any - Do not add dependencies that aren't already in the project
- Keep components focused on one responsibility
- Best with: Claude Code CLI, Cursor, Windsurf
- Also works: Any AI coding tool that reads SKILL.md or custom instructions
- Expects: A project with existing components to pattern-match against
- Single component file matching project conventions
- Props interface/type exported alongside the component
- Default export or named export matching project pattern