How do I install the Ss Pattern skill?

Run npx skillmds add majiayu000/ss-pattern in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Ss Pattern safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ss Pattern?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Ss Pattern free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Ss Pattern?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Ss Pattern by majiayu000 — Agent Skill

Name: Ss Pattern
Rating: 4.5 (4 reviews)
Author: majiayu000

File contents

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.

---name: ss-patterndescription: Generate a composed UI pattern (card layout, list, form section, grid, etc.) using design system primitives--- # 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.md` for conventions - `components/ui/` for available primitives - `components/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-6` for 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.

Frequently asked questions