‹ 首页

ss-pattern

@bitjaru · 收录于 1 周前 · 上游提交 今天

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

场景界面搭建组件复用

适合你，如果经常需要从设计系统快速组合卡片、列表等界面模式

/ 下载安装
ss-pattern.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill↓ .zip
用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录
Claude Code~/.claude/skills/(项目级 .claude/skills/)
Codex CLI~/.codex/skills/
Cursor自动读取上面两处目录
其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同
/ 通过 npx 安装 校验哈希
npx oh-my-skill add bitjaru/styleseed/ss-pattern
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- bitjaru/styleseed/ss-pattern
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify bitjaru/styleseed/ss-pattern
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
–GitHub stars
~427上下文体积 · 单文件
镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · 3c5e387

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:
  2. CLAUDE.md for conventions
  3. components/ui/ for available primitives
  4. components/patterns/ for existing patterns
  1. Compose the pattern from existing components — DO NOT recreate primitives.
  1. Follow the design system layout rules:
  2. Cards: bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]
  3. Section wrapper: mx-6 for horizontal margin
  4. Section title: text-foreground font-bold text-[18px] mb-4
  5. List gap: space-y-3
  6. Grid gap: gap-4
  1. Use semantic tokens for all visual properties.
  1. Make the pattern a reusable component with props for dynamic content.
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…