skills.rest
rmethodm
rmethodmCOMMUNITY
Explore all skills by this author →
GitHub

ss-pattern

Generate composed UI patterns from StyleSeed grammar using existing primitives.

Updated May 26, 2026
Search Tags:#layout#frontend#design system#semantic tokens#component composition#ui patterns#styleseed
One-click install
npx skills add https://github.com/rmethodm/resumegen --skill ss-pattern-rmethodm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ss-pattern
Source: https://github.com/rmethodm/resumegen/tree/main/.agents/skills/ss-pattern
Command: npx skills add https://github.com/rmethodm/resumegen --skill ss-pattern-rmethodm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent composite UI sections by hand often leads to duplicated primitives, hardcoded spacing, and off-brand layouts. This Skill generates reusable UI pattern components that follow the active StyleSeed grammar and brand recipe, composing them from existing primitives instead of recreating them. ## Core Features & Use Cases - Recipe-Aware Composition: Selects from layout, data display, and interactive pattern types (focal-summary, panel-section, data-table, action-sheet, and more) based on the active brand recipe. - Primitive Reuse: Inspects components/ui and components/patterns to compose patterns from existing components rather than recreating them. - Semantic Token Enforcement: Applies semantic tokens and recipe-aware utilities like ss-pattern-surface, ss-page-gutter, and ss-pattern-inset for all visual properties. - Use Case: A developer needs a filterable data table section for an enterprise dashboard. The Skill reads the StyleSeed rules, composes a data-table pattern from existing primitives with compact controls, and verifies it with /ss-score. ## Quick Start Ask the assistant to generate a data-table pattern for the dashboard using the active StyleSeed recipe.

Frequently Asked Questions about ss-pattern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a UI pattern from a design system recipe?▼

Invoke the skill with a pattern type and description, such as a data-table or filter-bar. It reads the StyleSeed effective rules and manifest, composes the pattern from existing primitives in components/ui, and applies semantic tokens for all visual properties.

What pattern types are available for UI composition?▼

Three groups exist: layout patterns like focal-summary, panel-section, and resource-collection; data display patterns like data-table, detail-card, and chart-card; and interactive patterns like action-sheet, filter-bar, and search-header.

When should I use a pattern instead of a single component?▼

Use a pattern when composing multiple primitives into a reusable section. For a single primitive use the component generator, for a full mobile screen use the page generator, and for multi-page flows use the flow generator.

Does the pattern generator create new primitive components?▼

No, it explicitly composes patterns from existing primitives in components/ui and components/patterns. Recreating primitives is prohibited; the output is a reusable component with props for dynamic content.

Why does my generated pattern look like a generic card?▼

The skill warns against defaulting to one card language. Containment surfaces should only be used when earned, and public-service or editorial recipes prefer flat flow, rules, and whitespace over cards.

Related Skills

Explore More Design & Creative Skills→
AvihusittonAvihusitton

ui-component

Generate design-token-driven React UI components with accessibility defaults for StyleSeed Toss projects.

Community
Intermediate
Miosa-osaMiosa-osa
226

ads landing

Assess landing pages for paid ads across message match, speed, mobile, trust, and forms.

Official
Intermediate
klarbauklarbau
7

ckm:design-system

Standardize three-layer design tokens and generate brand-compliant slides with HTML validation.

Community
Advanced
terzigoluterzigolu
37

figma-generate-design

Translate code-based UI layouts into Figma screens using design-system tokens.

Community
Intermediate