How do I install the UI Tokens skill?

Run npx skillmds@latest add humaisali/ui-tokens in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the UI Tokens skill do?

View, add, or modify design tokens in the StyleSeed design system It is listed under Design & Media on SkillMD.

Is UI Tokens safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Tokens?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Tokens free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published UI Tokens?

humaisali (@humaisali) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Tokens by humaisali — Agent Skill

Name: UI Tokens
Author: humaisali

File contents

Design Token Manager

When to Use

Use this skill when you need view, add, or modify design tokens in the StyleSeed design system.

When NOT to use

For applying tokens in components → use /ss-component or /ss-pattern
For finding token violations in existing code → use /ss-lint
For brand-wide color/font choices that don't exist yet — define a skin first, then add tokens
For non-CSS token systems (Figma, native iOS/Android) — Tailwind v4 / CSS variables only

Action: $0 | Token type: $1 Arguments: $ARGUMENTS

Token File Locations

Type	JSON Source	CSS Implementation
Colors	`tokens/colors.json`	`css/theme.css` `:root` + `@theme inline`
Typography	`tokens/typography.json`	`css/fonts.css` + `css/base.css`
Spacing	`tokens/spacing.json`	Tailwind utilities (no custom CSS needed)
Radius	`tokens/radii.json`	`css/theme.css` `@theme inline`
Shadows	`tokens/shadows.json`	`css/theme.css` `:root`

Instructions

`list` — Show current tokens

Read and display the requested token file in a formatted table.

`add` — Add new token

Add the token to the JSON source file (tokens/*.json)
Add the CSS custom property to css/theme.css under :root
If it needs a Tailwind utility, add to the @theme inline block
If it has a dark mode variant, add to the .dark block

`update` — Modify existing token

Update the value in the JSON source file
Update the CSS custom property in theme.css
Check all components for direct usage that might need updating

Rules

Always keep JSON and CSS in sync
Use semantic names, not descriptive names (--success not --green-500)
Colors should support both light and dark modes
New tokens must be added to BOTH the JSON source AND the CSS implementation

Limitations

Use this skill only when the task clearly matches its upstream source and local project context.
Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

---name: ui-tokensdescription: View, add, or modify design tokens in the StyleSeed design systemlicense: MIT---# Design Token Manager## When to UseUse this skill when you need view, add, or modify design tokens in the StyleSeed design system.## When NOT to use- For applying tokens in components → use `/ss-component` or `/ss-pattern`- For finding token violations in existing code → use `/ss-lint`- For brand-wide color/font choices that don't exist yet — define a skin first, then add tokens- For non-CSS token systems (Figma, native iOS/Android) — Tailwind v4 / CSS variables onlyAction: **$0** | Token type: **$1**Arguments: $ARGUMENTS## Token File Locations| Type | JSON Source | CSS Implementation ||------|-----------|-------------------|| Colors | `tokens/colors.json` | `css/theme.css` `:root` + `@theme inline` || Typography | `tokens/typography.json` | `css/fonts.css` + `css/base.css` || Spacing | `tokens/spacing.json` | Tailwind utilities (no custom CSS needed) || Radius | `tokens/radii.json` | `css/theme.css` `@theme inline` || Shadows | `tokens/shadows.json` | `css/theme.css` `:root` |## Instructions### `list` — Show current tokensRead and display the requested token file in a formatted table.### `add` — Add new token1. Add the token to the JSON source file (`tokens/*.json`)2. Add the CSS custom property to `css/theme.css` under `:root`3. If it needs a Tailwind utility, add to the `@theme inline` block4. If it has a dark mode variant, add to the `.dark` block### `update` — Modify existing token1. Update the value in the JSON source file2. Update the CSS custom property in `theme.css`3. Check all components for direct usage that might need updating## Rules- Always keep JSON and CSS in sync- Use semantic names, not descriptive names (`--success` not `--green-500`)- Colors should support both light and dark modes- New tokens must be added to BOTH the JSON source AND the CSS implementation## Limitations- Use this skill only when the task clearly matches its upstream source and local project context.- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

Frequently asked questions

UI Tokens