Home / Stacks / CSS & Design Tokens
💅

CSS & Design Tokens

Modern styling architecture — a single source of truth with Style Dictionary, zero-runtime CSS-in-TS via vanilla-extract, on-demand atomic CSS with UnoCSS, and type-safe variants with CVA and Tailwind

6 skills · Works with Claude Code, Codex, Cursor & more

🎨 Design
RARE

Design Tokens & Theming

Architect a design-token system — semantic color, typography, spacing, and radius scales as CSS variables with light/dark themes. Uses the Tailwind CSS 4 @theme directive for a single source of truth.

Community 1.6K
Scanned
design-tokens theming css-variables
mkdir -p ~/.claude/skills/design-tokens && curl -fsSL https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/HEAD/skills/development/design-tokens/SKILL.md -o ~/.claude/skills/design-tokens/SKILL.md
🎨 Design
RARE

Style Dictionary Tokens

Transform design tokens into platform code with Style Dictionary. Defines a single source of truth for color, spacing, and typography, then builds CSS variables, Tailwind config, iOS/Android, and JS outputs from one token set.

Community 1.8K
Scanned
style-dictionary design-tokens design-system
mkdir -p ~/.claude/skills/style-dictionary && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/javascript-pro/SKILL.md -o ~/.claude/skills/style-dictionary/SKILL.md
⚙️ Engineering
RARE

vanilla-extract CSS

Write type-safe, zero-runtime CSS in TypeScript with vanilla-extract. Authors styles in .css.ts files, builds themes with CSS variable contracts, and generates atomic sprinkles utilities — all statically extracted at build time.

Community 1.4K
Scanned
vanilla-extract css-in-ts typescript
mkdir -p ~/.claude/skills/vanilla-extract && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/typescript-pro/SKILL.md -o ~/.claude/skills/vanilla-extract/SKILL.md
🎨 Design
RARE

UnoCSS Atomic Engine

Style with UnoCSS — the instant, on-demand atomic CSS engine. Configures presets, custom rules and shortcuts, variant groups, and attributify mode for a fully customizable, faster alternative to utility CSS frameworks.

Community 1.7K
Scanned
unocss atomic-css utility-css
mkdir -p ~/.claude/skills/unocss && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/javascript-pro/SKILL.md -o ~/.claude/skills/unocss/SKILL.md
⚙️ Engineering
RARE

CVA Component Variants

Model type-safe component variants with class-variance-authority (CVA). Defines variant, size, and state class maps with compound variants and defaults, then merges them cleanly with tailwind-merge for reusable design-system components.

Community 2.6K
Scanned
cva class-variance-authority tailwind
mkdir -p ~/.claude/skills/cva && curl -fsSL https://raw.githubusercontent.com/Jeffallan/claude-skills/HEAD/skills/typescript-pro/SKILL.md -o ~/.claude/skills/cva/SKILL.md
🎨 Design
RARE

Tailwind UI Components

Generate production-ready UI components using Tailwind CSS. Creates responsive layouts, interactive elements, dark mode variants, and accessible components following Tailwind best practices and design patterns.

Community 5.1K
Scanned
tailwind css ui-components
mkdir -p ~/.claude/skills/tailwind-components && curl -fsSL https://raw.githubusercontent.com/rampstackco/claude-skills/HEAD/skills/frontend-component-build/SKILL.md -o ~/.claude/skills/tailwind-components/SKILL.md

More Stacks

🤝

Agent Engineering Kit

Engineer reliable AI agents — build on the Claude Agent SDK, coordinate teams with multi-agent patterns, give them memory, and keep them safe with mechanical guardrails and evaluation
🕹️

AI Agent Frameworks

Pick the right framework and ship agents fast — type-safe Python with Pydantic AI, multi-agent orchestration with OpenAI Agents SDK, Agno, and CrewAI, TypeScript graphs with LangGraph.js, and typed workflows with Mastra
🤖

AI Builder Stack

Build AI-powered applications with RAG, multi-agent systems, prompt engineering, and MCP integrations

View all stacks →

Added to wishlist