About

Imported from yonatangross/orchestkit (src/skills/design-stylecards/SKILL.md). Install upstream with npx skills add yonatangross/orchestkit --skill design-stylecards. Copyright stays with the author (MIT).

Design Stylecards

Name: design-stylecards
Author: yonatangross

Specs beat vibes. A stylecard is a named aesthetic recipe with exact values — the difference between "add a nice shadow" (reinvented differently every session) and elevation/md (identical every time, reviewed once, versioned forever).

/ork:design-stylecards list                      # Catalog index
/ork:design-stylecards elevation/md              # Show one recipe
/ork:design-stylecards apply glass/dark to src/components/Panel.tsx

Why declarative recipes

Pipeline skills (design-to-code, design-context-extract) answer how to produce design output. Stylecards answer what good looks like — as literal values an agent pastes, not adjectives it interprets. Inspired by MengTo/Skills' stylecard micro-skills (MIT), consolidated into one catalog to avoid manifest sprawl.

Workflow

1. Resolve the request to a recipe

Read("references/stylecards.md")   # The catalog — always read before choosing
# Match the user's intent to ONE recipe by its Use-When line.
# No match → say so and offer the closest two; never freehand values.

2. Show or apply

Show: print the recipe verbatim — values, Use-When, Avoid. No paraphrasing values.
Apply: edit the target file using the recipe's exact values. Adapt only the syntax (Tailwind arbitrary class ↔ plain CSS ↔ CSS custom property), never the numbers.

3. Respect the recipe's Avoid block

Every recipe ends with falsifiable Avoid rules (e.g. "never stack two elevation recipes on one element"). Violating an Avoid rule to satisfy a user request requires saying so explicitly.

Catalog index

Full recipes with exact values: references/stylecards.md.

Recipe	Use when
`elevation/sm` `md` `lg`	Layered neutral shadows — compact controls / cards / hero surfaces
`glass/dark`	Frosted glass panel on a dark backdrop
`border/gradient`	1px gradient border without a wrapper hack
`background/mesh`	2–3 hue radial mesh page background
`type/editorial`	Display + body + mono role split with tracking values
`motion/budget`	The four allowed durations + the one-signature-moment rule

Authoring a new stylecard

Add to references/stylecards.md following the contract — a recipe without all three parts is not shippable:

Use when — one line, concrete surfaces ("cards, panels, popovers"), not adjectives.
Values — copy-paste-ready code. Numbers, not descriptions.
Avoid — falsifiable don'ts observed from real misuse.

Source recipes from shipped, reviewed UI (this repo's playground standard, production apps you've extracted with design-context-extract) — never from imagination.

Anti-Patterns

NEVER freehand shadow/gradient/blur values when a recipe exists — that defeats the catalog
NEVER paraphrase a recipe's values ("roughly 6% black") — paste them exactly
NEVER mix two recipes of the same category (two elevations, two glass treatments) on one element

Quality Bar

Done means all of these hold:

The chosen recipe's Use-When line actually matches the user's surface (quote both if challenged)
Applied values are byte-identical to the catalog entry — only syntax adapted, never numbers
No Avoid rule of the applied recipe is violated in the final diff
New recipes carry all three contract parts: Use-When, exact values, Avoid

Related Skills

ork:design-context-extract — mines new recipe candidates from real apps
ork:design-system-tokens — where recipes graduate into project token architecture
ork:design-to-code — pipeline that consumes stylecards during generation

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/yonatangross-orchestkit-design-stylecards/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

yonatangross-orchestkit-design-stylecards.ocm.jsonjson

{
  "ocm": "1",
  "id": "yonatangross-orchestkit-design-stylecards",
  "kind": "skill",
  "name": "design-stylecards",
  "description": "Declarative catalog of named aesthetic recipes — exact shadow stacks, glass surfaces, gradient treatments, and type scales as copy-paste values with Use-When and Avoid rules. Use when the user asks for polished elevation, glassmorphism, a border gradient, a mesh background, or any 'make it look like X' request where taste should come from a versioned recipe instead of being reinvented per session.",
  "publisher": "yonatangross",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "design",
      "stylecards",
      "shadows",
      "glass",
      "gradients",
      "typography",
      "tailwind",
      "css",
      "aesthetics"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Declarative catalog of named aesthetic recipes — exact shadow stacks, glass surfaces, gradient treatments, and type scales as copy-paste values with Use-When and Avoid rules. Use when the user asks for polished elevation, glassmorphism, a border gradient, a mesh background, or any 'make it look like X' request where taste should come from a versioned recipe instead of being reinvented per session."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/yonatangross/orchestkit",
      "path": "src/skills/design-stylecards/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/yonatangross/orchestkit/blob/HEAD/src/skills/design-stylecards/SKILL.md",
      "key": "yonatangross/orchestkit/src/skills/design-stylecards/SKILL.md"
    },
    "compatibility": "Claude Code 2.1.251+",
    "allowed_tools": [
      "Read",
      "Grep",
      "Glob",
      "Edit",
      "Write"
    ],
    "license": "MIT"
  },
  "instructions": "# Design Stylecards\n\nSpecs beat vibes. A stylecard is a named aesthetic recipe with **exact values** — the difference\nbetween \"add a nice shadow\" (reinvented differently every session) and `elevation/md` (identical\nevery time, reviewed once, versioned forever).\n\n```bash\n/ork:design-stylecards list                      # Catalog index\n/ork:design-stylecards elevation/md              # Show one recipe\n/ork:design-stylecards apply glass/dark to src/components/Panel.tsx\n```\n\n## Why declarative recipes\n\nPipeline skills (`design-to-code`, `design-context-extract`) answer *how to produce* design outp",
  "cost": {
    "context_tokens": 913
  }
}

Fetch it by URL: GET /api/v1/registry/yonatangross-orchestkit-design-stylecards/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.