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

Tokens

by educlopez in educlopez/ui-craft

Audit or establish the project's 3-layer token spine. An agent skill from educlopez/ui-craft.

MITAuto-check passedFrontend & Design

Install Tokens

skills CLI
$ npx skills add educlopez/ui-craft --skill tokens -a claude-code

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

GitHub CLI
$ gh skill install educlopez/ui-craft 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/educlopez/ui-craft.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.codex/skills/tokens .claude/skills/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
tokens
GitHub stars
375
Token cost
~1.4k tokens
SKILL.md length
659 words
Files
1
Skills in repo
13
Repo updated
First seen
Licence
MIT

At a glance

Audit or establish the project's 3-layer token spine. An agent skill from educlopez/ui-craft.

  • Works in 5 steps: Detect existing tokens → Route based on $ARGUMENTS and inventory → Audit (tokens exist) → …
  • Asks for tokens on their UI
  • SKILL.md covers Step 1: Detect existing tokens, Step 2: Route based on…, Step 3: Audit (tokens exist) and Step 4: Establish (no tokens…, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Tokens is an agent skill from educlopez/ui-craft. Audit or establish the project's 3-layer token spine. Invoke when the user asks for tokens on their UI, or mentions 'tokens' alongside design / UI / frontend work.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. The repository describes itself as: Design engineering system for AI coding agents — ship UI with craft-level quality. Install as an agent skill. The licence is MIT.

When your agent uses it

  • Asks for tokens on their UI
  • Mentions tokens alongside design / UI / frontend work

Example prompts

  • “tokens”
  • “/tokens”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Detect existing tokens
  2. Route based on $ARGUMENTS and inventory
  3. Audit (tokens exist)
  4. Establish (no tokens found)
  5. Never overwrite

What it can do on your machine

Read from SKILL.md and the folder at commit ceecc8e. 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 (its code samples are diff).

    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

Tokens loads about 1.4k tokens when it runs. Until then it costs about 43 tokens; SKILL.md has 659 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~43
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

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 educlopez/ui-craft at commit ceecc8e, republished under its MIT licence (© educlopez). 659 words, ~1,406 tokens.

Download SKILL.mdSave it as .claude/skills/tokens/SKILL.md (or your agent's skills folder).
name
tokens
description
Audit or establish the project's 3-layer token spine. Invoke when the user asks for tokens on their UI, or mentions 'tokens' alongside design / UI / frontend work.
<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->

Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Read references/tokens.md before proceeding. The 3-layer contract (primitive → semantic → component) and the intentional-dark test are defined there.

Step 1: Detect existing tokens

Scan for token definitions in the project:

  • CSS variables in :root, [data-theme], [data-mode], or theme wrapper selectors
  • Tailwind config (tailwind.config.js/ts) under theme.extend or theme
  • CSS-in-JS theme objects (theme.ts, *.styles.ts, styled.d.ts, ThemeProvider)
  • design-tokens.json or tokens.json (Style Dictionary / Theo)
  • globals.css, variables.css, tokens.css

Build an inventory: which of the 7 categories exist (color / spacing / type / radii / shadows / motion / z-index), which layers are present (primitive / semantic / component), and whether both light and dark are defined.

Step 2: Route based on $ARGUMENTS and inventory

  • "audit" → run audit only (Step 3). No proposals.
  • "establish" → skip audit, go to Step 4.
  • "color" / "spacing" / "type" / "radii" / "shadows" / "motion" / "z-index" → focus the audit and any proposal on that one category.
  • empty → if tokens exist: audit. If nothing found: establish.

Step 3: Audit (tokens exist)

Evaluate against the contract in references/tokens.md. Output a severity-ranked gap list — don't propose code yet.

Check:

  1. 3-layer coverage — are primitive, semantic, and component layers all present? Missing semantics is the most common gap: primitives exist but nothing switches for dark mode and no surface stack is defined.
  2. 7-category coverage — any of (color / spacing / type / radii / shadows / motion / z-index) missing? Flag each absent category.
  3. Intentional dark mode — run the intentional-dark test: does dark mode do more than invert --text-primary? Is --surface-canvas a tinted near-black (not #000)? Is accent chroma reduced 10-15%? Are shadows replaced with border rings?
  4. Naming discipline — are primitives named for values (--gray-500) not roles (--button-bg)? Are semantics named for roles (--text-primary) not values (--gray-900-text)?
  5. No arbitrary values — inline colors, spacing, or z-index values that bypass the token system.

Output format:

SeverityCategoryFinding
CriticalDark mode--surface-canvas is #000 — runs the intentional-dark test
HighSemanticsNo surface stack — components use raw primitives
MediumShadowsSingle-layer shadows — ambient layer missing
LowZ-indexArbitrary values (z-index: 999) in 3 components

Show what's missing. Do not propose code during audit unless the user asks.

Show full SKILL.md (291 more words)Show less
Step 3b — Converge mode (explicit opt-in)

Load skills/ui-craft/references/loops.md preset token-consistency (budget = the default loop budget defined in loops.md). Emit the pre-flight cost notice. After fixing the top off-system value (raw hex color, arbitrary radius, or magic spacing), re-scan until zero off-system values or budget exhausted.

Step 4: Establish (no tokens found)

Propose a minimal spine inline. Cover all 7 categories. Always include both light and dark blocks — both intentional.

Minimal spine order:

  1. Primitives — neutral ramp (gray-50 to gray-950), one accent ramp, semantic color bases, spacing scale, type scale, radii, shadows, motion, z-index.
  2. Semantics — surface stack (5 levels), text roles, border roles, accent roles, status roles (success / warning / error / info).
  3. Component tokens — defer unless a specific component is already being built.

Use OKLCH for color unless the project uses sRGB across the board — in that case flag the gap, propose OKLCH, but don't auto-convert.

Before writing to a file, ask which file to write to. Detect from project structure and suggest one:

  • Tailwind project → globals.css (CSS variables inside :root)
  • CSS-in-JS → theme.ts (exported theme object)
  • Vanilla CSS → tokens.css (standalone variables file)
  • Cross-platform / multi-consumer → design-tokens.json (Style Dictionary format)

Confirm with the user before writing.

Step 5: Never overwrite

If the project has an existing token file, propose additions as patches — show what would change in a diff block:

diff
  :root {
+   /* ── Semantic surface stack (new) ── */
+   --surface-canvas:  var(--gray-50);
+   --surface-raised:  var(--gray-100);
+   --surface-overlay: #fff;
+   --surface-sunken:  var(--gray-200);
+   --surface-inverse: var(--gray-900);
  }

Let the user apply. Don't write directly unless they approve.

Constraints

  • Don't impose Tailwind on a vanilla CSS project. Match the project's existing syntax.
  • Don't impose OKLCH if the project uses sRGB consistently — flag it, suggest migration, don't force it.
  • Respect existing naming conventions — if the project uses --color-primary over --accent-500, extend that pattern rather than introducing a parallel naming scheme.

Next step: /craft — build on the spine you just established (rung 1).

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

Files

Just SKILL.md in .codex/skills/tokens of educlopez/ui-craft.

Open the folder on GitHubat commit ceecc8e

Compare with similar skills

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.

Tokens compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Tokens this skilleduclopez/ui-craft375—~1.4kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Impeccablebestofjs/bestofjs3.1k27 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k97 repos~308Automated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 27 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 97 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

More from educlopez/ui-craft

All 13 skills in this repo

  • Finalize

    educlopez/ui-craft

    Pre-ship gate — runs detector, verifies brief and tokens, applies the 10-pass finish bar, ranks findings by feedback hierarchy.

    375 GitHub stars~1.9k tokensUpdated 1 mo ago
    Auto-check passed

  • Friction Log

    educlopez/ui-craft

    File contributor or agent papercuts as GitHub issues labeled friction, or investigate those issues as the daily friction-log Cloud Agent.

    375 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed

  • Remember

    educlopez/ui-craft

    Record a learned design constraint from a correction into the project brief.

    375 GitHub stars~585 tokensUpdated 1 mo ago
    Auto-check passed

  • Sddesign

    educlopez/ui-craft

    Full spec-driven pipeline — walks brief → tokens → shape (spec) → craft (build) → converge → ship in one guided run.

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

  • Start

    educlopez/ui-craft

    Front door. An agent skill from educlopez/ui-craft.

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

  • Shape

    educlopez/ui-craft

    Wireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code.

    375 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed

Categories

Questions about Tokens

What does Tokens do?

Audit or establish the project's 3-layer token spine. An agent skill from educlopez/ui-craft. Tokens is an agent skill from educlopez/ui-craft. Audit or establish the project's 3-layer token spine.

When should I use Tokens?

Tokens fits situations like: asks for tokens on their UI; mentions tokens alongside design / UI / frontend work.

How do I install Tokens in Claude Code?

Run `npx skills add educlopez/ui-craft --skill tokens -a claude-code`. Or copy the skill folder (.codex/skills/tokens in educlopez/ui-craft) into .claude/skills/tokens in your project. Claude Code loads it when a task matches its description.

How do I install Tokens in Codex?

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

Can I use 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 educlopez/ui-craft --skill 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/tokens, .gemini/skills/tokens, .github/skills/tokens and .opencode/skills/tokens in your project.

What does Tokens need to run?

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

Does 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 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 Tokens use?

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 Tokens use?

About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Tokens?

Skills that share tags, products or a category with Tokens: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Tokens?

educlopez (a GitHub user) maintains it in educlopez/ui-craft, which has 375 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on September 3, 2026.

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