ss-pattern

Generate a composed UI pattern from the active StyleSeed grammar and brand recipe using existing primitives.

By bitjaru · 710 installs

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

Source repository · Upstream listing

UI Pattern Generator Registry first artifact boundary When .styleseed/project.json and .styleseed/artifacts/index.json exist, resolve the requested artifact ID first, then read only .styleseed/bundles/<artifact id .md and .styleseed/manifests/<artifact id .json . Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/effective rules.md only when no registry exists. 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.