Agent skill

Design Stylecards

by yonatangross in yonatangross/orchestkit

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.

MITAuto-check passedFrontend & Design

Install Design Stylecards

skills CLI
$ npx skills add yonatangross/orchestkit --skill design-stylecards -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install yonatangross/orchestkit design-stylecards --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/src/skills/design-stylecards .claude/skills/design-stylecards && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
design-stylecards
GitHub stars
292
Token cost
~1.3k tokens
SKILL.md length
412 words
Files
2 (incl. references)
Skills in repo
108
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Works in 3 steps: Resolve the request to a recipe → Show or apply → Respect the recipe's Avoid block
  • The user asks for polished elevation
  • SKILL.md covers Why declarative recipes, Workflow, Catalog index and Authoring a new stylecard, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Design Stylecards is an agent skill from yonatangross/orchestkit. 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.

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/stylecards.md`). Compatibility notes: Claude Code 2.1.277+

It sits in Frontend & Design, covering Typography. The repository describes itself as: The Complete AI Development Toolkit for Claude Code. 106 skills, 36 agents, 171 hooks. Install ork for stable (v9.x), or ork-alpha for the v10 line, which ships daily. The licence is MIT.

When your agent uses it

  • The user asks for polished elevation
  • A border gradient
  • A mesh background
  • Any make it look like X request where taste should come from a versioned recipe instead of being reinvented per session

Example prompts

  • “make it look like X”
  • “/design-stylecards”

Requirements

  • Python 3
  • Compatibility (from SKILL.md): Claude Code 2.1.277+
  • Pre-approved tools (allowed-tools): Read, Grep, Glob, Edit, Write

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Resolve the request to a recipe
  2. Show or apply
  3. Respect the recipe's Avoid block

What it can do on your machine

Read from SKILL.md and the folder at commit e4ff8d9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Grep
    • Glob
    • Edit
    • Write

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are bash and python).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Claude Code 2.1.277+

    From compatibility in the SKILL.md frontmatter.

Context cost

Design Stylecards loads about 1.3k tokens when it runs, and up to ~2.6k if it reads all its reference files. Until then it costs about 105 tokens; SKILL.md has 412 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~105
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from yonatangross/orchestkit at commit e4ff8d9, republished under its MIT licence (© yonatangross). 412 words, ~1,261 tokens.

Download SKILL.mdSave it as .claude/skills/design-stylecards/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
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.
allowed-tools
Read, Grep, Glob, Edit, Write
compatibility
Claude Code 2.1.277+
license
MIT
argument-hint
[list | <recipe-name> | apply <recipe> to <file>]
context
fork
background
false
user-invocable
true
model
sonnet
skills
design-system-tokens
metadata.category
document-asset-creation
metadata.version
1.0.0
metadata.author
OrchestKit

Design Stylecards

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).

bash
design-stylecards list                      # Catalog index
design-stylecards elevation/md              # Show one recipe
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
python
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.

RecipeUse when
elevation/sm md lgLayered neutral shadows — compact controls / cards / hero surfaces
glass/darkFrosted glass panel on a dark backdrop
border/gradient1px gradient border without a wrapper hack
background/mesh2–3 hue radial mesh page background
type/editorialDisplay + body + mono role split with tracking values
motion/budgetThe four allowed durations + the one-signature-moment rule
Show full SKILL.md (189 more words)Show less

Authoring a new stylecard

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

  1. Use when — one line, concrete surfaces ("cards, panels, popovers"), not adjectives.
  2. Values — copy-paste-ready code. Numbers, not descriptions.
  3. 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
  • 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

© yonatangross, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (references) in src/skills/design-stylecards of yonatangross/orchestkit.

  • SKILL.md
  • references/stylecards.md

Open the folder on GitHubat commit e4ff8d9

Compare with similar skills

Design Stylecards next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Design Stylecards compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design Stylecards this skillyonatangross/orchestkit292—~1.3kAutomated safety check: PassMIT
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Tailwindcss Developmentanonaddy/anonaddy4.9k10 repos~865Automated safety check: PassMIT
Design SystemOhh-889/skyroc79511 repos~1.7kAutomated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons19018 repos~11kAutomated safety check: NotesCustom licence

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed
  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed
  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed
  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed
  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    190 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes
  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.6k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from yonatangross/orchestkit

All 107 skills in this repo
  • API Design

    yonatangross/orchestkit

    API contract design for REST and GraphQL, covering resource shape, URL and header versioning with deprecation windows, RFC 9457 Problem Details error handling, and OpenAPI specs.

    292 GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Architecture Decision Record

    yonatangross/orchestkit

    ADR templates in the Nygard format with context, decision, consequences, and alternatives.

    292 GitHub stars~2k tokensUpdated today
    Auto-check passed
  • Audit Full

    yonatangross/orchestkit

    Single-pass codebase analysis leveraging a 1M-token context window for comprehensive security scanning, architecture review, and dependency auditing.

    292 GitHub stars~3.5k tokensUpdated today
    Auto-check: notes
  • Code Review Playbook

    yonatangross/orchestkit

    Structured review processes, conventional comments, language-specific checklists, and feedback templates.

    292 GitHub stars~2.2k tokensUpdated today
    Auto-check passed
  • Create PR

    yonatangross/orchestkit

    Creates GitHub pull requests with pre-flight validation, conventional title formatting, and structured summary generation.

    292 GitHub stars~4.5k tokensUpdated today
    Auto-check: notes
  • Explore

    yonatangross/orchestkit

    Multi-angle codebase exploration spawning 3-5 parallel agents for code structure, data flow, architecture patterns, and health assessment.

    292 GitHub stars~3.9k tokensUpdated today
    Auto-check: notes

Questions about Design Stylecards

What does Design Stylecards do?

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. Design Stylecards is an agent skill from yonatangross/orchestkit. 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.

When should I use Design Stylecards?

Design Stylecards fits situations like: the user asks for polished elevation; A border gradient; A mesh background; any make it look like X request where taste should come from a versioned recipe instead of being reinvented per session.

How do I install Design Stylecards in Claude Code?

Run `npx skills add yonatangross/orchestkit --skill design-stylecards -a claude-code`. Or copy the skill folder (src/skills/design-stylecards in yonatangross/orchestkit) into .claude/skills/design-stylecards in your project. Claude Code loads it when a task matches its description.

How do I install Design Stylecards in Codex?

Run `npx skills add yonatangross/orchestkit --skill design-stylecards -a codex`. Or copy the skill folder (src/skills/design-stylecards in yonatangross/orchestkit) into .agents/skills/design-stylecards in your project. Codex loads it when a task matches its description.

Can I use Design Stylecards in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add yonatangross/orchestkit --skill design-stylecards -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-stylecards, .gemini/skills/design-stylecards, .github/skills/design-stylecards and .opencode/skills/design-stylecards in your project.

What does Design Stylecards need to run?

SKILL.md names no scripts, command-line tools or credentials: Design Stylecards is instructions for the agent only. Our summary lists: Python 3. Its frontmatter pre-approves these tools: Read, Grep, Glob, Edit, Write. Compatibility (from SKILL.md): Claude Code 2.1.277+.

Does Design Stylecards access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Design Stylecards safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Design Stylecards use?

Design Stylecards is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Design Stylecards use?

About 1.3k tokens (SKILL.md is roughly 5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.3k tokens, read only when the agent opens those files.

What are the alternatives to Design Stylecards?

Skills that share tags, products or a category with Design Stylecards: Impeccable (bestofjs/bestofjs, 3.1k stars), Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), Design System (Ohh-889/skyroc, 795 stars) and Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design Stylecards?

yonatangross (a GitHub user) maintains it in yonatangross/orchestkit, which has 292 GitHub stars. The repository holds 108 skills in this directory. The repository was last updated on October 10, 2026.

Source: yonatangross/orchestkit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.