Agent skill

ss-tokens

View SKILL.md on GitHub Repository
Stars 152
Forks 22

Install this agent skill to your Project

npx add-skill https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/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

  1. 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 block
  4. If it has a dark mode variant, add to the .dark block

update — Modify existing token

  1. Update the value in the JSON source file
  2. 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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

bitjaru/styleseed

ss-a11y

Audit a component or page for accessibility issues and fix them

152 22
Explore
bitjaru/styleseed

ss-lint

Quick automated lint — detects common design system violations in seconds

152 22
Explore
bitjaru/styleseed

ss-page

152 22
Explore
bitjaru/styleseed

ss-update

Update StyleSeed engine in your project — analyzes what's outdated and updates safely

152 22
Explore
bitjaru/styleseed

ss-feedback

Add appropriate user feedback states (loading, success, error, empty) to a component or page

152 22
Explore
bitjaru/styleseed

ss-pattern

152 22
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results