How do I install the Ss Pattern skill?

Run npx skillmds add majiayu000/ss-pattern-2 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.2 (5 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

focal-summary: one dominant state, briefing, artifact, or decision
panel-section: aligned workbench panel with related controls and evidence
flat-step: public-service task step with explicit labels, help, and recovery
reading-section: bounded prose, figure, caption, quote, or source group without app cards
resource-collection: rows, table, grid, or sequence selected by the recipe and user job
canvas-tools: focused artifact/canvas with quiet supporting tool groups

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 .styleseed/effective-rules.md and .styleseed/manifest.json. Resolve first when stale. Then inspect:
- components/ui/ for available primitives
- components/patterns/ for existing patterns
Compose the pattern from existing components — DO NOT recreate primitives.
Follow the selected recipe rather than one default card language:
- Use ss-pattern-surface only when containment is earned.
- Use ss-page-gutter or ss-page-padding instead of hardcoded universal gutters.
- Use ss-pattern-inset, ss-pattern-control, and ss-pattern-icon for recipe-aware shape.
- Public-service and editorial recipes usually prefer flat flow, rules, and whitespace.
- Enterprise/developer recipes prefer aligned panels, rows, tables, and compact controls.
- Calm-consumer may use soft groups; expressive-brand must add a product-specific composition.
Use semantic tokens for all visual properties.
Make the pattern a reusable component with props for dynamic content.
Run /ss-score and verify that the pattern has a functional relationship to its page instead of being an isolated pretty card.

---name: ss-pattern-2description: Generate a composed UI pattern from the active StyleSeed grammar and brand recipe using existing 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 - **focal-summary**: one dominant state, briefing, artifact, or decision - **panel-section**: aligned workbench panel with related controls and evidence - **flat-step**: public-service task step with explicit labels, help, and recovery - **reading-section**: bounded prose, figure, caption, quote, or source group without app cards - **resource-collection**: rows, table, grid, or sequence selected by the recipe and user job - **canvas-tools**: focused artifact/canvas with quiet supporting tool groups ### 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 `.styleseed/effective-rules.md` and `.styleseed/manifest.json`. Resolve first when stale. Then inspect: - `components/ui/` for available primitives - `components/patterns/` for existing patterns 2. Compose the pattern from existing components — DO NOT recreate primitives. 3. Follow the selected recipe rather than one default card language: - Use `ss-pattern-surface` only when containment is earned. - Use `ss-page-gutter` or `ss-page-padding` instead of hardcoded universal gutters. - Use `ss-pattern-inset`, `ss-pattern-control`, and `ss-pattern-icon` for recipe-aware shape. - Public-service and editorial recipes usually prefer flat flow, rules, and whitespace. - Enterprise/developer recipes prefer aligned panels, rows, tables, and compact controls. - Calm-consumer may use soft groups; expressive-brand must add a product-specific composition. 4. Use semantic tokens for all visual properties. 5. Make the pattern a reusable component with props for dynamic content. 6. Run `/ss-score` and verify that the pattern has a functional relationship to its page instead of being an isolated pretty card.

Frequently asked questions