New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Tailwind Design Tokens

by TheGoat395 in TheGoat395/Codex-Skills

Map semantic tokens into Tailwind utilities. An agent skill from TheGoat395/Codex-Skills.

MITAuto-check passedFrontend & Design

Install Tailwind Design Tokens

skills CLI
$ npx skills add TheGoat395/Codex-Skills --skill tailwind-design-tokens -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install TheGoat395/Codex-Skills tailwind-design-tokens --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/TheGoat395/Codex-Skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/tailwind-design-tokens .claude/skills/tailwind-design-tokens && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
tailwind-design-tokens
GitHub stars
126
Token cost
~425 tokens
SKILL.md length
200 words
Files
3 (incl. references)
Skills in repo
23
Repo updated
First seen
Licence
MIT

At a glance

Map semantic tokens into Tailwind utilities. An agent skill from TheGoat395/Codex-Skills.

  • Works in 5 steps: Identify the requested component or… → Inspect the project before editing when… → Apply this skill's specific rules from… → …
  • Tasks that involve CSS and styling
  • SKILL.md covers Overview, Workflow, Reference and Ownership
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Tailwind Design Tokens is an agent skill from TheGoat395/Codex-Skills. Map semantic tokens into Tailwind utilities.

Its SKILL.md is about 430 tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `agents/openai.yaml` and `references/tailwind-design-tokens-guide.md`).

It sits in Frontend & Design, covering CSS and styling and Design tokens. It works with Tailwind CSS. The repository describes itself as: Codex-first Agent Skills library for premium frontend, website, motion, accessibility, QA, and handoff workflows. The licence is MIT.

When your agent uses it

  • Tasks that involve CSS and styling
  • Tasks that involve Design tokens

Example prompts

  • “/tailwind-design-tokens”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Identify the requested component or architecture outcome, affected files and existing decisions; reuse established content and visual…
  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.

What it can do on your machine

Read from SKILL.md and the folder at commit feff772. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Tailwind Design Tokens loads about 425 tokens when it runs, and up to ~884 if it reads all its reference files. Until then it costs about 17 tokens; SKILL.md has 200 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~17
When it runs · the whole SKILL.md, loaded when a task matches
~425
With references · SKILL.md plus every file in references/, read only if the agent opens them
~884

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from TheGoat395/Codex-Skills at commit feff772, republished under its MIT licence (© TheGoat395). 200 words, ~425 tokens.

Download SKILL.mdSave it as .claude/skills/tailwind-design-tokens/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
tailwind-design-tokens
description
Map semantic tokens into Tailwind utilities.

Tailwind Design Tokens

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.

© TheGoat395, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in skills/tailwind-design-tokens of TheGoat395/Codex-Skills.

  • SKILL.md
  • agents/openai.yaml
  • references/tailwind-design-tokens-guide.md

Open the folder on GitHubat commit feff772

Compare with similar skills

Tailwind Design Tokens next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Tailwind Design Tokens compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tailwind Design Tokens this skillTheGoat395/Codex-Skills126—~425Automated safety check: PassMIT
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Tailwind Design SystemSuFxGIT/scoutarr1155 repos~5.6kAutomated safety check: PassNone
Extract DesignManavarya09/design-extract4.2k—~786Automated safety check: NotesMIT
Tailwind Theme Builderjezweb/claude-skills1.1k1 repos~3.2kAutomated safety check: PassMIT
Tailwind Design Systemjh941213/my-cc-harness12510 repos~4.7kAutomated safety check: PassNone

Similar skills

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

  • Tailwind Design System

    SuFxGIT/scoutarr

    Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns.

    115 GitHub starsUsed in 5 repos~5.6k tokens
    Frontend & DesignAuto-check passed

  • Extract Design

    Manavarya09/design-extract

    Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.

    4.2k GitHub stars~786 tokensUpdated 2 days ago
    Frontend & DesignAuto-check: notes

  • Tailwind Theme Builder

    jezweb/claude-skills

    Set up Tailwind v4 + shadcn/ui themed UI with dark mode. An agent skill from jezweb/claude-skills.

    1.1k GitHub starsUsed in 1 repo~3.2k tokens
    Frontend & DesignAuto-check passed

  • Tailwind Design System

    jh941213/my-cc-harness

    Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns.

    125 GitHub starsUsed in 10 repos~4.7k tokens
    Frontend & DesignAuto-check passed

  • Preline Theme Generator

    htmlstreamofficial/preline

    Generates light and dark Preline theme CSS from a brand color or mood, previews it, and validates token coverage through bundled local scripts.

    6.5k GitHub stars~619 tokensUpdated 1 mo ago
    Frontend & DesignAuto-check: warnings

More from TheGoat395/Codex-Skills

All 23 skills in this repo

  • Premium Visual Reference Library

    TheGoat395/Codex-Skills

    Find references, Viktor Oddy and MotionSites. An agent skill from TheGoat395/Codex-Skills.

    126 GitHub stars~867 tokensUpdated 1 mo ago
    Auto-check passed

  • Agent Evaluation Operations

    TheGoat395/Codex-Skills

    Evaluate agent and skill behavior or routing. An agent skill from TheGoat395/Codex-Skills.

    126 GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed

  • Creativity

    TheGoat395/Codex-Skills

    Generate original ideas or escape fixation. An agent skill from TheGoat395/Codex-Skills.

    126 GitHub stars~1.2k tokensUpdated 1 mo ago
    Auto-check passed

  • Final Client Handoff

    TheGoat395/Codex-Skills

    Prepare verified ownership and delivery notes. An agent skill from TheGoat395/Codex-Skills.

    126 GitHub stars~477 tokensUpdated 1 mo ago
    Auto-check passed

  • Visual Regression Lab

    TheGoat395/Codex-Skills

    Compare captures; stitch lazy/animated pages. An agent skill from TheGoat395/Codex-Skills.

    126 GitHub stars~516 tokensUpdated 1 mo ago
    Auto-check passed

  • Web Reference Research

    TheGoat395/Codex-Skills

    Analyze selected sources: Viktor or MotionSites. An agent skill from TheGoat395/Codex-Skills.

    126 GitHub stars~475 tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Tailwind Design Tokens

What does Tailwind Design Tokens do?

Map semantic tokens into Tailwind utilities. An agent skill from TheGoat395/Codex-Skills. Tailwind Design Tokens is an agent skill from TheGoat395/Codex-Skills. Map semantic tokens into Tailwind utilities.

When should I use Tailwind Design Tokens?

Tailwind Design Tokens fits situations like: tasks that involve CSS and styling; tasks that involve Design tokens.

How do I install Tailwind Design Tokens in Claude Code?

Run `npx skills add TheGoat395/Codex-Skills --skill tailwind-design-tokens -a claude-code`. Or copy the skill folder (skills/tailwind-design-tokens in TheGoat395/Codex-Skills) into .claude/skills/tailwind-design-tokens in your project. Claude Code loads it when a task matches its description.

How do I install Tailwind Design Tokens in Codex?

Run `npx skills add TheGoat395/Codex-Skills --skill tailwind-design-tokens -a codex`. Or copy the skill folder (skills/tailwind-design-tokens in TheGoat395/Codex-Skills) into .agents/skills/tailwind-design-tokens in your project. Codex loads it when a task matches its description.

Can I use Tailwind Design Tokens in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TheGoat395/Codex-Skills --skill tailwind-design-tokens -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tailwind-design-tokens, .gemini/skills/tailwind-design-tokens, .github/skills/tailwind-design-tokens and .opencode/skills/tailwind-design-tokens in your project.

What does Tailwind Design Tokens need to run?

SKILL.md names no scripts, command-line tools or credentials: Tailwind Design Tokens is instructions for the agent only.

Does Tailwind Design Tokens access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Tailwind Design Tokens safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Tailwind Design Tokens use?

Tailwind Design Tokens is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Tailwind Design Tokens use?

About 425 tokens (SKILL.md is roughly 1.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 459 tokens, read only when the agent opens those files.

What are the alternatives to Tailwind Design Tokens?

Skills that share tags, products or a category with Tailwind Design Tokens: MCP Development (coollabsio/coolify, 63k stars), Tailwind Design System (SuFxGIT/scoutarr, 115 stars), Extract Design (Manavarya09/design-extract, 4.2k stars) and Tailwind Theme Builder (jezweb/claude-skills, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tailwind Design Tokens?

TheGoat395 (a GitHub user) maintains it in TheGoat395/Codex-Skills, which has 126 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on September 11, 2026.

Source: TheGoat395/Codex-Skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.