ss-pattern

Original：🇺🇸 English

Translated

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

3installs

Added on2026-08-13

NPX Install

npx skill4agent add bitjaru/styleseed ss-pattern

Pattern type: $0 Description: $ARGUMENTS

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

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.