| name | implement-feature |
| description | End-to-end workflow for implementing a new UI feature in a mock app. Ensures data model alignment, sample data, UI/UX consistency, component reuse, and automated verification. Load for ANY UI change. |
Implement Feature Skill
Purpose
Guide complete implementation of a new UI feature. Ensures data model, sample data, component reuse, and verification are all handled.
When to Use
Load for ANY of the following:
- Adding a new page or route
- Adding or editing navigation
- Adding any new UI element that appears 2+ times
- Editing a page's content/layout
- Building a new UI-driven feature or workflow
Workflow (9 steps)
1. Clarify Feature Requirements
Reference the spec or use document-feature skill to document requirements first.
2. Data Model Alignment
Use update-data-model for Zod schemas. Use generate-sample-data for mock data.
3. Check Component Registry and Extract Components FIRST
- Read the component registry
- Extract patterns marked ⚠️ NEEDS EXTRACTION before implementing
- Rule: If you use the same element 2+ times, extract it
- Do this BEFORE building new pages
4. Select UI/UX Pattern
Choose appropriate layout pattern for the feature.
5. Implement UI & Logic
Build pages using ONLY extracted reusable components. NO inline buttons/forms/cards.
6. Mock Data & API
Update mock API handlers. Generate 15-20+ items for scrollbar testing.
7. Automated Verification (browser tools)
Verify feature, stories, and responsiveness using the available browser tools
(Playwright MCP for Claude, or the Copilot browser tools for VS Code Copilot).
Generate persistent E2E tests only if a Playwright test runner is available;
otherwise rely on interactive browser-tool verification plus Vitest story tests.
8. Testing & Storybook
Validate reusable components have stories and tests.
9. Update Component Registry
Add new components to ✅, document patterns for ⚠️, update usage counts.
Checklist
Related Skills
document-feature — document requirements firstupdate-data-model — Zod schema managementgenerate-sample-data — mock data generationcomponent-registry — component inventoryextract-ui-component — extract reusable patterns
