design-tokens
A comprehensive design token system for managing UI styling, theming, and accessibility compliance across frameworks.
Install
mkdir -p .claude/skills/design-tokens && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/6664" && unzip -o skill.zip -d .claude/skills/design-tokens && rm skill.zipInstalls to .claude/skills/design-tokens
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Comprehensive design token system for typography, colors, and theming with WCAG AA compliance, TypeScript types, and framework integration (CSS-in-JS, Tailwind, CSS Variables).Key capabilities
- →Define typography scales
- →Manage color palettes
- →Ensure WCAG AA compliance
- →Generate TypeScript types
- →Integrate with Tailwind CSS
How it works
The skill standardizes visual design decisions into a single source of truth using tokens for typography, colors, and spacing.
Inputs & outputs
When to use design-tokens
- →Defining project color palettes
- →Implementing accessible typography scales
- →Integrating design tokens with Tailwind CSS
About design-tokens
Standardizes design variables for typography, colors, and spacing. Includes WCAG AA compliance checking and generates TypeScript types for CSS-in-JS and Tailwind integration.
Comprehensive design token system for typography, colors, and theming with WCAG AA compliance, TypeScript types, and framework integration (CSS-in-JS, Tailwind, CSS Variables).
When not to use it
- →Projects without a design system
- →Directly hardcoding styles without tokens
Limitations
- →Requires testing for contrast ratios
- →Must maintain focus states for accessibility
How it compares
It provides type-safe access and framework-agnostic exports compared to manual CSS management.
Compared to similar skills
design-tokens side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| design-tokens (this skill) | 1 | 6mo | No flags | Intermediate |
| ui-ux-expert-skill | 91 | 9mo | Review | Advanced |
| shadcn-ui-setup | 37 | 8mo | Review | Beginner |
| web-artifacts-builder | 49 | 3mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by dadbodgeoff
View all by dadbodgeoff →You might also like
ui-ux-expert-skill
fercracix33
Technical workflow for implementing accessible React user interfaces with shadcn/ui, Tailwind CSS, and TanStack Query. Includes 6-phase process with mandatory Style Guide compliance, Context7 best practices consultation, Chrome DevTools validation, and WCAG 2.1 AA accessibility standards. Use after Test Agent, Implementer, and Supabase agents complete their work.
shadcn-ui-setup
maneeshanif
Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.
web-artifacts-builder
anthropics
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
svelte-ui-design
XIYO
ALWAYS use this skill for ANY Svelte component styling, design, or UI work. Svelte 5 UI design system using Tailwind CSS 4, Skeleton Labs design tokens/presets/Tailwind Components, and Bits UI headless components. Covers class composition, color systems, interactive components, forms, overlays, and all visual design.
tailwind-design-system
wshobson
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.