Ui Pattern

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:

1. The generated pattern component
2. The target location
3. Expected props and usage example
4. 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

• StyleSeed repository
• Source skill

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.