component-scaffold_skill

Overview

This skill creates a new UI component that matches the project's conventions for file layout, typing, styling, and exports. It produces minimal, predictable component code, wires exports to existing barrels if required, and adds only the usage artifacts the repo pattern mandates. The goal is fast, convention-driven scaffolding without changing APIs or implementing domain logic.

How this skill works

The skill reads the repository profile (REPO_PROFILE.json) when available, or infers conventions from nearby components. It selects the correct placement, generates a small typed component with sane defaults, and wires exports and minimal examples only if the project's patterns require them. It then runs configured validations (typecheck and simple render smoke tests) and reports touched files and outcome.

When to use it

• Adding a new presentational or container UI component consistent with project conventions
• Extending a feature area or component library with a small, typed component
• Bootstrapping components during feature development while preserving export patterns
• When you want automated, repeatable placement and wiring of component files
• When repo conventions must be respected (file naming, styling, barrel exports)

Best practices

• Provide a concise responsibility statement (1–2 sentences) and a small, stable props surface
• List props with types when known; prefer sensible defaults and optional props over broad APIs
• Point to existing design-system components or styles the new component should reuse
• Keep the component focused; split large concerns into private subcomponents
• If conventions are unclear, ask targeted questions about framework, naming, and export pattern before generating files

Example use cases

• Create a Button component in the shared components folder that follows the library’s TypeScript and styling rules
• Add a SettingsToggle to a feature folder with minimal props and a demo story if stories are required
• Scaffold a Card component near similar components so the new file reuses local style modules and barrel export patterns
• Add a small form field component that composes an existing design-system Input and is exported through the feature index