ss-pattern

# UI Pattern Generator ## When NOT to use - For a single primitive component → use `/ss-component` - For a full mobile screen → use `/ss-page` - For an entire multi-page user flow → use `/ss-flow` - For design tokens and color/spacing decisions → use `/ss-tokens` Pattern type: **$0** Description: $ARGUMENTS ## Available Pattern Types ### Layout Patterns - **card-section**: Card with title + content inside page section (`mx-6`) - **grid-2col**: 2-column grid of cards (`grid grid-cols-2 gap-4 px-6`) - **scroll-horizontal**: Horizontal scrolling card list (`flex gap-3 overflow-x-auto scrollbar-hide`) - **list-section**: Vertical list of items inside a card - **form-section**: Form with labeled inputs in a card - **stat-grid**: Grid of StatCard components ### Data Display Patterns - **data-table**: Table with header and rows - **detail-card**: Key-value pair display - **chart-card**: Card wrapper for a Recharts chart - **ranking-list**: Numbered ranking with highlight ### Interactive Patterns - **action-sheet**: Bottom sheet with action buttons - **filter-bar**: Horizontal filter/tab bar - **search-header**: Search input in header area ## Instructions 1. Read the design system reference: - `CLAUDE.md` for conventions - `components/ui/` for available primitives - `components/patterns/` for existing patterns 2. Compose the pattern from existing components — DO NOT recreate primitives. 3. Follow the design system layout rules: - Cards: `bg-card rounded-2xl p-6...