UI Pattern
Overview
Part of 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 through props instead of hardcoding content. If a pattern has multiple variants, keep the API explicit and small.
Step 5: Keep the Pattern Reusable Across Pages
Avoid page-specific assumptions unless the user explicitly wants a one-off section. If the markup only works on one route, it probably belongs in a page component, not a shared pattern.
Output
Provide:
- The generated pattern component
- The target location
- Expected props and usage example
- Notes on which existing primitives were reused
Best Practices
- Start from the smallest existing building block that solves the problem
- Keep container, section, and item responsibilities separate
- Use tokens and spacing rules consistently
- Prefer extending a pattern over adding a near-duplicate sibling
Additional Resources
