design-stylecards

Solid

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.

AI & Automation 208 stars 20 forks Updated today MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
77
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 /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 ```python Read("${CLAUDE_SKILL_DIR}/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....

Details

Author
yonatangross
Repository
yonatangross/orchestkit
Created
6 months ago
Last Updated
today
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

html-design-styles

Use when the user wants to apply a named design style or aesthetic to a frontend interface - e.g., bento, brutalist, neobrutalist, glassmorphism, vaporwave, dark SaaS, kawaii, cyberpunk, art deco, neumorphism, swiss, memphis, scandinavian, cottagecore, y2k, sci-fi HUD, and more. Triggers when the user names a specific style, asks "what design styles do you support", requests "a [style] look" for a page or component, or wants to restyle existing markup with a chosen aesthetic. Provides a curated catalog of 53 design styles each with full color palettes, typography stacks, component patterns, and layout specifications. Applies a NAMED catalog style only - do NOT use for open-ended visual direction with no style named (this skill applies only named catalog styles, so ask the user to pick one first), backend/JS functionality, or full multi-page app builds; styling and markup only.

2 Updated 3 days ago
chrismccoy
Web & Frontend Listed

awesome-design-skills

Registry of 67 visual aesthetic and style skills for Claude Code, Cursor, Codex, and other agents. Each skill ships as SKILL.md + DESIGN.md covering tokens, components, accessibility, tone, and quality gates for a specific design aesthetic — glassmorphism, brutalism, claymorphism, neumorphism, editorial, bento, retro, riso, and 59 more. Distributed via the TypeUI CLI.

0 Updated 1 weeks ago
podo
Web & Frontend Solid

frontend-aesthetics

Anti-AI-slop taste layer for UI output — distinctive typography, dominant+accent color hierarchy, and implementation-matched polish. Use when building or restyling a UI/landing/component that should look designed rather than defaulted, or when the user asks for something 'beautiful', 'distinctive', 'less generic', or 'not another Tailwind template'.

24 Updated today
nguyenthienthanh