What problem does it solve?
Manually creating React components that consistently follow the Container/Presentation pattern is error-prone: developers mix state logic into presentational files, misclassify components, or forget required files like stories and type contracts. This Skill enforces a repeatable scaffolding workflow with clear classification rules.
Core Features & Use Cases
- Guided Component Scaffolding: Asks for the component name and type (
ui or features), then creates the correct file set under src/components (e.g., index.tsx, use<ComponentName>.tsx, presentation.tsx, types.ts, stories, and SCSS modules).
- Classification Enforcement: Applies a reclassification rule so components containing state, side effects, async logic, or store access are treated as
features rather than ui, with user confirmation before proceeding.
- Convention Compliance: Bundled references define TypeScript rules (no
any, type over interface, explicit return types) and SCSS token rules (theme colors, z-index scale, margin constraints), plus Storybook minimum story requirements.
- Use Case: When adding a new
UserCard component, run the skill, answer ui or features, and receive a complete, lint-passing component folder with stories and an optional replacement of direct Mantine usage in existing features.
Quick Start
Ask the assistant to create a new React component named UserCard of type features using the Container/Presentation pattern.
