UI Component Creation Skill

Checklist (MUST complete all)

• Create component file
• Create *.stories.tsx for Storybook
• Use semantic colors for monetary values (see CLAUDE.md)
• Verify Storybook: pnpm --filter @mf-dashboard/web storybook

Component Types

1. Pure UI Components (components/charts/ or components/ui/)

Data-agnostic, reusable components. Receive all data via props.

// components/charts/my-chart.tsx
"use client";