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

Frontend Design Tokens

by imbue-ai in imbue-ai/sculptor

Guide for using design tokens in the Sculptor frontend. An agent skill from imbue-ai/sculptor.

MITAuto-check passedFrontend & Design

Install Frontend Design Tokens

skills CLI
$ npx skills add imbue-ai/sculptor --skill frontend-design-tokens -a claude-code

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

GitHub CLI
$ gh skill install imbue-ai/sculptor frontend-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/imbue-ai/sculptor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/frontend-design-tokens .claude/skills/frontend-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
frontend-design-tokens
GitHub stars
238
Token cost
~609 tokens
SKILL.md length
197 words
Files
1
Skills in repo
29
Repo updated
First seen
Licence
MIT

At a glance

Guide for using design tokens in the Sculptor frontend. An agent skill from imbue-ai/sculptor.

  • Works in 4 steps: Never hardcode values that have a… → Prefer Radix component props (e.g., )… → Use var() in SCSS modules for values… → …
  • Reviewing CSS/SCSS to pick correct token variables
  • SKILL.md covers Where to Find Tokens, Rules, Examples and Audit Script
  • Calls npm

What it does

Frontend Design Tokens is an agent skill from imbue-ai/sculptor. Guide for using design tokens in the Sculptor frontend. Use when writing or reviewing CSS/SCSS to pick correct token variables.

Its SKILL.md is about 610 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, covering Design tokens and CSS and styling. The repository describes itself as: Build product with grounded, parallel coding agents. The licence is MIT.

When your agent uses it

  • Reviewing CSS/SCSS to pick correct token variables
  • Tasks that involve Design tokens
  • Tasks that involve CSS and styling

Example prompts

  • “/frontend-design-tokens”

Workflow steps

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

  1. Never hardcode values that have a corresponding token or Radix variable
  2. Prefer Radix component props (e.g., ) over var()` when possible
  3. Use var() in SCSS modules for values that can't be expressed through props
  4. No hex or rgb colors in SCSS files -- use Radix color variables or semantic tokens

What it can do on your machine

Read from SKILL.md and the folder at commit f847102. 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

    Shell commands in SKILL.md call:

    • npm

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

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    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

Frontend Design Tokens loads about 609 tokens when it runs. Until then it costs about 38 tokens; SKILL.md has 197 words of instructions outside code blocks.

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

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 imbue-ai/sculptor at commit f847102, republished under its MIT licence (© imbue-ai). 197 words, ~609 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-design-tokens/SKILL.md (or your agent's skills folder).
name
frontend-design-tokens
description
Guide for using design tokens in the Sculptor frontend. Use when writing or reviewing CSS/SCSS to pick correct token variables.

Frontend Design Tokens

When writing CSS/SCSS in the Sculptor frontend, use design tokens instead of hardcoded values.

Where to Find Tokens

Radix Built-in Tokens (spacing, font sizes, radius, colors, font weights)

Read the source of truth directly:

sculptor/frontend/node_modules/@radix-ui/themes/tokens/base.css

This file contains all Radix CSS variables including:

  • --space-1 through --space-9 (spacing)
  • --font-size-1 through --font-size-9 (typography)
  • --font-weight-light, --font-weight-regular, --font-weight-medium, --font-weight-bold
  • --radius-1 through --radius-6, --radius-full (border radius)

For color tokens, read the individual color files:

sculptor/frontend/node_modules/@radix-ui/themes/tokens/colors/*.css

These provide 12-step scales (e.g., --gray-1 through --gray-12, --accent-1 through --accent-12).

These are all loaded via @radix-ui/themes/styles.css which is imported in Main.tsx.

Custom Tokens (animation, z-index, shadows, semantic colors)

Read our custom token definitions:

sculptor/frontend/src/styles/tokens.css

This defines tokens for things Radix does not provide.

Radix Overrides

Global overrides to Radix component styles live in:

sculptor/frontend/src/styles/radix-overrides.css
Global Styles

Brand colors, utility classes, and theming live in:

sculptor/frontend/src/index.css

Rules

  1. Never hardcode values that have a corresponding token or Radix variable
  2. Prefer Radix component props (e.g., <Flex gap="2">) over var() when possible
  3. Use var() in SCSS modules for values that can't be expressed through props
  4. No hex or rgb colors in SCSS files -- use Radix color variables or semantic tokens

Examples

scss
/* Bad */
.card {
  padding: 16px;
  font-size: 14px;
  border-radius: 8px;
  transition: opacity 0.2s ease;
  color: #3d63dd;
}

/* Good */
.card {
  padding: var(--space-4);
  font-size: var(--font-size-2);
  border-radius: var(--radius-4);
  transition: opacity var(--duration-normal) var(--ease-default);
  color: var(--accent-9);
}

Audit Script

Run to find style violations:

bash
cd "sculptor/frontend" && npm run lint:styles

© imbue-ai, 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 .claude/skills/frontend-design-tokens of imbue-ai/sculptor.

Open the folder on GitHubat commit f847102

Compare with similar skills

Frontend 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.

Frontend Design Tokens compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Design Tokens this skillimbue-ai/sculptor238—~609Automated safety check: PassMIT
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Transitions PolishJakubantalik/transitions.dev4.7k2 repos~3.2kAutomated safety check: PassCustom licence
Web Style ExtractorLucent-Snow/style-extractor453—~3.8kAutomated safety check: PassNone
Liuguang Banlan UIsickn33/agentic-awesome-skills47k1 repos~2.5kAutomated safety check: PassMIT
Tailwind Design SystemSuFxGIT/scoutarr1155 repos~5.6kAutomated 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

  • Transitions Polish

    Jakubantalik/transitions.dev

    Audits existing UI animations against the transitions.dev motion-token scale and suggests tokens for duration, distance, scale, blur and easing.

    4.7k GitHub starsUsed in 2 repos~3.2k tokens
    Frontend & DesignAuto-check passed

  • Web Style Extractor

    Lucent-Snow/style-extractor

    Extracts evidence-backed style guides and motion appendices from websites, keeping reusable visual language and stripping product-specific content.

    453 GitHub stars~3.8k tokensUpdated 7 mo ago
    Frontend & DesignAuto-check passed

  • Liuguang Banlan UI

    sickn33/agentic-awesome-skills

    Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.

    47k GitHub starsUsed in 1 repo~2.5k 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

More from imbue-ai/sculptor

All 29 skills in this repo

  • Auto QA Iphone

    imbue-ai/sculptor

    QA the Sculptor mobile web UI on a real iOS Simulator, driven headlessly from a Mac.

    238 GitHub stars~3.1k tokensUpdated 2 days ago
    Auto-check passed

  • Measure React Renders

    imbue-ai/sculptor

    Compare React component render counts between origin/main and the current branch during a user-defined UI scenario (e.g.

    238 GitHub stars~603 tokensUpdated 2 days ago
    Auto-check passed

  • Post PR To Slack

    imbue-ai/sculptor

    Post a one-line PR announcement to a Slack channel, and mark it :merged: when the PR merges.

    238 GitHub stars~1.6k tokensUpdated 2 days ago
    Auto-check passed

  • Batch Claude Runner

    imbue-ai/sculptor

    Run Claude programmatically against collections of files in the codebase.

    238 GitHub stars~308 tokensUpdated 2 days ago
    Auto-check passed

  • Build Sculptor Extension

    imbue-ai/sculptor

    Build or modify a Sculptor extension — a runtime ESM module loaded into the Sculptor UI.

    238 GitHub stars~3.4k tokensUpdated 2 days ago
    Auto-check passed

  • Code Review Checklist

    imbue-ai/sculptor

    Review a set of code changes against Sculptor's review categories and produce a markdown findings table.

    238 GitHub stars~3.6k tokensUpdated 2 days ago
    Auto-check passed

Categories

Questions about Frontend Design Tokens

What does Frontend Design Tokens do?

Guide for using design tokens in the Sculptor frontend. An agent skill from imbue-ai/sculptor. Frontend Design Tokens is an agent skill from imbue-ai/sculptor. Guide for using design tokens in the Sculptor frontend.

When should I use Frontend Design Tokens?

Frontend Design Tokens fits situations like: reviewing CSS/SCSS to pick correct token variables; tasks that involve Design tokens; tasks that involve CSS and styling.

How do I install Frontend Design Tokens in Claude Code?

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

How do I install Frontend Design Tokens in Codex?

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

Can I use Frontend 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 imbue-ai/sculptor --skill frontend-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/frontend-design-tokens, .gemini/skills/frontend-design-tokens, .github/skills/frontend-design-tokens and .opencode/skills/frontend-design-tokens in your project.

What does Frontend Design Tokens need to run?

Going by SKILL.md and its folder, Frontend Design Tokens needs the command-line tools its instructions call (npm).

Does Frontend Design Tokens access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Frontend 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 Frontend Design Tokens use?

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

About 609 tokens (SKILL.md is roughly 2.4k 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 Frontend Design Tokens?

Skills that share tags, products or a category with Frontend Design Tokens: MCP Development (coollabsio/coolify, 63k stars), Transitions Polish (Jakubantalik/transitions.dev, 4.7k stars), Web Style Extractor (Lucent-Snow/style-extractor, 453 stars) and Liuguang Banlan UI (sickn33/agentic-awesome-skills, 47k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Design Tokens?

imbue-ai (a GitHub organization) maintains it in imbue-ai/sculptor, which has 238 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 9, 2026.

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