# Ask Component Scaffolder

> Generate consistent UI component folder structure and files.

- Skill: `navanithans/ask-component-scaffolder` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add navanithans/ask-component-scaffolder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/navanithans/ask-component-scaffolder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: NavanithanS (https://skillmd.com/u/navanithans)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/navanithans/ask-component-scaffolder

---


<critical_constraints>
✅ MUST define Props interface
✅ MUST use CSS Modules (prevent global pollution)
✅ MUST include at least one test (renders correctly)
</critical_constraints>

<usage>
```bash
python skills/coding/ask-component-scaffolder/scripts/scaffold_component.py --name "ComponentName"
```
</usage>

<structure>
ComponentName/
├── index.tsx          # Component + Props interface
├── styles.module.css  # CSS Modules
└── Component.test.tsx # Basic render test
</structure>

<guidelines>
- Props: Always define interface
- Styles: CSS Modules only
- Tests: Every component must have ≥1 render test
</guidelines>