Agent skill
ss-tokens
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/ss-tokens
SKILL.md
Design Token Manager
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.cssunder:root - If it needs a Tailwind utility, add to the
@theme inlineblock - If it has a dark mode variant, add to the
.darkblock
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 (
--successnot--green-500) - Colors should support both light and dark modes
- New tokens must be added to BOTH the JSON source AND the CSS implementation
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?