Tailwind Design Tokens

SkillWeb & browsing

Create token-driven Tailwind and CSS variable systems for premium websites. Use for color tokens, typography tokens, spacing rhythm, radius, shadows, gradients, surfaces, responsive constraints, dark/light modes, and avoiding random utility-class styling.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Tailwind Design Tokens skill

What this skill tells your AI

The instructions your AI receives, as published by thegoat395/codex-skills in skills/tailwind-design-tokens/SKILL.md and read by ahel’s review.

For substantial web work, reuse the scoped web contract when available; it replaces duplicated policy here. Match the requested scope and existing decisions; a missing optional sibling does not block this local procedure.

Overview

Make Tailwind feel like a design system, not utility confetti. Tailwind is fast, but the taste comes from tokens, constraints, and repeated decisions.

Workflow

  1. Identify the requested component or architecture outcome, affected files and existing decisions; reuse established content and visual direction.
  2. Inspect the project before editing when code exists.
  3. Apply this skill's specific rules from references/tailwind-design-tokens-guide.md.
  4. Explain material implementation choices while continuing authorized work.
  5. Implement when requested, inspect affected output, fix observed defects, and run the smallest decisive relevant checks.

Reference

Read references/tailwind-design-tokens-guide.md when this skill triggers for a concrete website build, redesign, visual review, or implementation plan.

Ownership

Own token consumption by the installed Tailwind version and mapping to utilities/aliases. Use design-token-production-pipeline, if installed, only when generation, validation or multiple output consumers require a compiler contract. Otherwise, retain the existing token source, document its output consumers, and check generated values and aliases against that source. Do not add a compiler just to replace a missing specialist.

Signals

GitHub stars
124
Forks
48
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
tailwind-design-tokens
Source
github.com/thegoat395/codex-skills