| name | ui-pattern |
| description | Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives |
| risk | unknown |
| source | https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-pattern |
| source_repo | bitjaru/styleseed |
| source_type | community |
| date_added | 2026-07-01T00:00:00.000Z |
| license | MIT |
| license_source | https://github.com/bitjaru/styleseed/blob/main/LICENSE |
UI Pattern Generator
When to Use
Use this skill when you need generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives.
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
-
Read the design system reference:
CLAUDE.md for conventionscomponents/ui/ for available primitivescomponents/patterns/ for existing patterns
-
Compose the pattern from existing components — DO NOT recreate primitives.
-
Follow the design system layout rules:
- Cards:
bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]
- Section wrapper: for horizontal margin
