skills.rest
sabiscore
sabiscoreCOMMUNITY
Explore all skills by this author →
GitHub

design-token-system-architect

Generates layered design token systems with CSS custom properties, Tailwind configuration, and dark mode support.

1|Updated Aug 25, 2026
Search Tags:#design system#color palette#design tokens#shadcn/ui#tailwind css#dark mode#css variables
One-click install
npx skills add https://github.com/sabiscore/swarmxq --skill design-token-system-architect-sabiscore
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-token-system-architect
Source: https://github.com/sabiscore/swarmxq/tree/main/.ai/skills/design-token-system-architect
Command: npx skills add https://github.com/sabiscore/swarmxq --skill design-token-system-architect-sabiscore

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building a consistent design system from scratch is error-prone: hard-coded hex values leak into components, dark mode gets bolted on as an afterthought, and Tailwind configs drift from the actual palette. This Skill generates a complete three-layer token architecture (primitive, semantic, component) so colors, spacing, typography, and motion stay consistent across themes and surfaces. ## Core Features & Use Cases - Three-Layer Token Generation: Produces primitive tokens (raw hex scales), semantic tokens (intent-based aliases like text-primary and surface-raised), and component tokens, with strict rules preventing layer-skipping. - Tailwind and shadcn/ui Integration: Outputs a full tailwind.config.ts wired to CSS variables plus a shadcn/ui variable mapping for globals.css. - Flash-Free Dark Mode: Implements a data-theme attribute strategy with cookie-based server rendering to eliminate the flash of incorrect theme on SSR. - Use Case: A developer starting a fintech dashboard asks for a design system; the Skill produces primitives.css, tokens.css with light and dark semantic layers, a Tailwind v3 config, and a Next.js theme toggle hook in one pass. ## Quick Start Ask the AI to design a token system for your app with Tailwind and dark mode support, mentioning your brand personality and target surfaces.

Frequently Asked Questions about design-token-system-architect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up design tokens with Tailwind CSS?▼

Define tokens as CSS custom properties in a tokens.css file, then reference them in tailwind.config.ts using var() syntax for colors, spacing, fonts, and shadows. This keeps Tailwind utilities synchronized with your token layers and enables runtime theme switching.

How do I implement dark mode in Next.js without a flash?▼

Use a data-theme attribute on the html element driven by a cookie read on the server, rather than prefers-color-scheme alone. The server renders the correct theme immediately, so users never see a flash of the wrong theme on load.

What is the difference between primitive and semantic design tokens?▼

Primitive tokens hold raw values like hex colors (neutral-900: #18181b) and are never used in components directly. Semantic tokens are intent-based aliases (color-text-primary) that reference primitives, letting you retheme by swapping one layer.

Does this token system work with shadcn/ui?▼

Yes, the generated tokens map directly to shadcn/ui's expected CSS variable names such as --background, --foreground, --primary, and --ring in globals.css. Components receive tokens through this mapping rather than direct overrides.

Why should components never use hex values directly?▼

Hard-coded hex values break theming because they bypass the token layers, so dark mode and brand updates require hunting through every component. Referencing component tokens that alias semantic tokens keeps all theming changes in one file.

What contrast ratios should design tokens meet?▼

Primary text on the base surface should meet at least 7:1 for WCAG AAA, and secondary text should meet at least 4.5:1 for AA. Both light and dark semantic layers need to be checked across text, surface, border, status, interactive, and shadow categories.

Related Skills

Explore More Design & Creative Skills→
paulinghampaulingham
1

creative-direction

Generate a brand-aligned design brief covering typography, color, layout, and interaction.

Community
Advanced
Dzakiamriz22Dzakiamriz22
1

color-system

Define semantic color tokens in OKLCH with WCAG 2.1 AA contrast.

Community
Advanced
erikhazzarderikhazzard
1

design__animating-interfaces

Design motion token systems for web interfaces with easing curves and durations.

Community
Advanced
mgd34msumgd34msu
4

css-variables

Implement and manage CSS custom properties for theming and runtime customization.

Community
Intermediate