Agent Skills › bitjaru/styleseed › ss-pattern

ss-pattern

GitHub

根据设计系统原语生成可复用的组合UI模式，如卡片、列表、表单或网格。适用于需要布局组合的场景，而非单一组件或完整页面。

engine/.claude/skills/ss-pattern/SKILL.md bitjaru/styleseed

Trigger Scenarios

需要生成组合式UI布局创建卡片组、网格或表单区域

Install

npx skills add bitjaru/styleseed --skill ss-pattern -g -y

More Options

Non-standard path

npx skills add https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-pattern -g -y

Use without installing

npx skills use bitjaru/styleseed@ss-pattern

指定 Agent (Claude Code)

npx skills add bitjaru/styleseed --skill ss-pattern -a claude-code -g -y

安装 repo 全部 skill

npx skills add bitjaru/styleseed --all -g -y

预览 repo 内 skill

npx skills add bitjaru/styleseed --list

SKILL.md

Frontmatter

{
    "name": "ss-pattern",
    "description": "Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives",
    "allowed-tools": "Read, Write, Edit, Grep, Glob, Bash",
    "argument-hint": "[pattern-type] [description]"
}

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

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.