Component Creation

Skill: Create UI Component

Trigger

When the user asks to create a new UI component.

Prerequisites

• [ ] Project uses React (or Vue; adjust steps)
• [ ] src/components/ or equivalent exists
• [ ] Testing framework configured (Jest, Vitest, etc.)
• [ ] Styling approach known (Tailwind, CSS Modules, etc.)

Steps

Step 1: Define Component

• [ ] Name the component (PascalCase)
• [ ] Define its purpose and responsibilities
• [ ] Identify parent and child components
• [ ] List props and their types
• [ ] Identify state requirements

Step 2: Create Component Directory

src/components/{category}/{ComponentName}/
├── {ComponentName}.tsx       # Component implementation
├── {ComponentName}.test.tsx  # Unit tests
├── {ComponentName}.stories.tsx # Storybook story (optional)
└── index.ts                  # Public export

Step 3: Define Props Interface

• [ ] Create TypeScript interface for props
• [ ] Add JSDoc documentation for complex props
• [ ] Set default values where appropriate
• [ ] Mark optional props with ?

Step 4: Implement Component

• [ ] Use functional component with hooks
• [ ] Destructure props in function signature
• [ ] Implement rendering logic
• [ ] Add error boundary if needed
• [ ] Handle loading, error, and empty states

Step 5: Add Accessibility

• [ ] Semantic HTML elements used
• [ ] ARIA attributes where needed
• [ ] Keyboard navigation works
• [ ] Focus management for modals/popups
• [ ] Color contrast meets WCAG 2.1 AA

Step 6: Add Styling

• [ ] Follow project styling approach
• [ ] Responsive across breakpoints
• [ ] Dark mode support
• [ ] Design token usage (no magic numbers)
• [ ] No inline styles (except dynamic values)

Step 7: Write Tests

• [ ] Renders correctly with default props
• [ ] Renders correctly with all prop combinations
• [ ] User interactions work (click, type, etc.)
• [ ] Accessibility tests pass
• [ ] Error states handled

Step 8: Create Export

• [ ] Export component from index.ts
• [ ] Export props interface

Completion Checklist

• [ ] Component renders with default props
• [ ] Props interface exported
• [ ] Tests pass
• [ ] Accessibility: keyboard nav, ARIA, contrast
• [ ] No lint/type errors

If Step Fails

• Step 2 (directory): Match existing structure in src/components/ (ui/, features/, layout/)
• Step 5 (a11y): Use aria-label on icon buttons; role only when semantic HTML insufficient
• Step 7 (tests): Run single file: npm test -- ComponentName.test.tsx. Fix type errors first with {{CONFIG.testing.typeCheckCommand}}

Example

Step 1: OrderSummary — displays order total and item count. Props: items, taxRate. Step 4: Functional component, useMemo for total calculation, loading/empty states.