component-gen

Files (1)

• SKILL.md

SKILL.md (first lines)

## Generate Component

Component name: **$1**
Description: **$2**

1. Detect stack:
```bash
cat package.json | grep -E '"react"|"vue"|"svelte"|"next"|"nuxt"'
ls src/components/ 2>/dev/null | head -5
```

2. Read 2 existing components to match:
   - File structure and naming
   - Import style
   - CSS approach (Tailwind, CSS modules, styled-components)
   - Export style (default vs named)

3. Generate the component:
   - TypeScript props interface
   - Component with proper typing
   - Default prop values where sensible
   - Accessibility attributes (aria-*, role, etc.)

4. Generate test file matching project test style.

5. If Storybook is present (`ls .storybook/`), generate a story too.

6. Place files in the correct directory following project conventions.

Summary: list all created files.

From berkcangumusisik/claude-code-practices, MIT.

More from berkcangumusisik/claude-code-practices