Ss Pattern
- 224 installs
- 868 repo stars
- Updated August 3, 2026
- bitjaru/styleseed
ss-pattern is a Claude Code skill that generates a composed UI pattern from design-system primitives.
About
ss-pattern is a StyleSeed skill that generates a composed UI pattern such as a card section, grid, list, form section, data table, or action sheet. A developer uses it to assemble a reusable multi-component block from existing design-system primitives rather than a single component or a whole page. It follows the system's card, spacing, and token rules and exposes props for dynamic content.
- Generates composed UI patterns from design-system primitives
- Offers layout, data-display, and interactive pattern types
- Produces reusable components with props, never recreating primitives
Ss Pattern by the numbers
- 224 all-time installs (skills.sh)
- Ranked #910 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
ss-pattern capabilities & compatibility
- Capabilities
- pattern generator · component composition · ui generation · design system scaffold
- Use cases
- frontend · ui design
What ss-pattern says it does
Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives
Compose the pattern from existing components — DO NOT recreate primitives.
Make the pattern a reusable component with props for dynamic content.
npx skills add https://github.com/bitjaru/styleseed --skill ss-patternAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 224 |
|---|---|
| repo stars | ★ 868 |
| Last updated | August 3, 2026 |
| Repository | bitjaru/styleseed ↗ |
What it does
Generate a reusable composed UI pattern from StyleSeed primitives, like a grid, list, or form section.
Who is it for?
Assembling a reusable composed UI block from existing primitives
Skip if: A single primitive component (use ss-component), a full screen (use ss-page), a multi-page flow (use ss-flow), or token decisions (use ss-tokens)
When should I use this skill?
You need a reusable card, grid, list, form, or table pattern
What you get
A reusable pattern component composed from primitives with props for dynamic content
- A reusable composed pattern component with props
By the numbers
- Provides 3 pattern categories: layout, data display, interactive
Files
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
- 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
1. Read the design system reference:
CLAUDE.mdfor conventionscomponents/ui/for available primitivescomponents/patterns/for existing patterns
2. Compose the pattern from existing components — DO NOT recreate primitives.
3. Follow the design system layout rules:
- Cards:
bg-card rounded-2xl p-6 shadow-[var(--shadow-card)] - Section wrapper:
mx-6for horizontal margin - Section title:
text-foreground font-bold text-[18px] mb-4 - List gap:
space-y-3 - Grid gap:
gap-4
4. Use semantic tokens for all visual properties.
5. Make the pattern a reusable component with props for dynamic content.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
What pattern types does ss-pattern support?
Layout patterns like card-section and grid-2col, data-display patterns like data-table and chart-card, and interactive patterns like action-sheet and filter-bar.
Does it recreate primitives?
No. It composes patterns from existing components and does not recreate primitives.