/ss-pattern
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
One skill from styleseed.
shell
$ npx -y skills add bitjaru/styleseed --skill ss-pattern --agent claude-codeInstalls just this skill. Get the whole plugin for auto-invocation.
How it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfClaude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/ss-pattern
Context preview
The summary Claude sees to decide when to auto-load this skill.
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
Stats
Stars819
Forks73
LanguageTypeScript
LicenseMIT
Ships with styleseed
SKILL.md
ss-pattern.SKILL.md
--- name: ss-pattern description: Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives argument-hint: "[pattern-type] [description]" allowed-tools: Read, Write, Edit, Grep, Glob, Bash --- # UI Pattern Generator ## 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
