Styleseed ss-pattern

Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives

install

source · Clone the upstream repo

git clone https://github.com/bitjaru/styleseed

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/bitjaru/styleseed "$T" && mkdir -p ~/.claude/skills && cp -r "$T/engine/.claude/skills/ss-pattern" ~/.claude/skills/bitjaru-styleseed-ss-pattern && rm -rf "$T"

manifest: engine/.claude/skills/ss-pattern/SKILL.md

UI Pattern Generator

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 conventions
- ```
components/ui/
```
  for available primitives
- ```
components/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:
```
mx-6
```
  for horizontal margin
- Section title:
```
text-foreground font-bold text-[18px] mb-4
```
- List gap:
```
space-y-3
```
- Grid gap:
```
gap-4
```
Use semantic tokens for all visual properties.
Make the pattern a reusable component with props for dynamic content.