ui-pattern

# UI Pattern ## Overview Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill builds reusable composed patterns from the seed's primitives. It is intended for sections like card lists, grids, form blocks, ranking lists, and chart wrappers that appear across multiple pages and need to look deliberate rather than ad hoc. ## When to Use - Use when you need a reusable layout pattern rather than a one-off page section - Use when a page repeats the same arrangement of cards, rows, filters, or data blocks - Use when you want to build from existing StyleSeed primitives instead of copying markup - Use when you want a pattern component with props for dynamic content ## How It Works ### Step 1: Identify the Pattern Type Common pattern families include: - card section - two-column grid - horizontal scroller - list section - form section - stat grid - data table - detail card - chart card - filter bar - action sheet ### Step 2: Read the Available Building Blocks Inspect both: - `components/ui/` for primitives - `components/patterns/` for neighboring patterns that can be extended The goal is composition, not duplication. ### Step 3: Apply StyleSeed Layout Rules Keep the Toss seed defaults intact: - card surfaces on semantic tokens - rounded corners from the system scale - shadow tokens instead of improvised shadow values - consistent internal padding - section wrappers that align with the page margin system ### Step 4: Make the Pattern Dynamic Expose data thr...