Start a fresh conversation. Replace the highlighted placeholders.
Use ui-tokens to Display the current [token type] tokens in the StyleSeed CSS/Tailwind design system as a formatted table.
Required inputs
[token type]
User-approved starter prompt based on a pinned source version; check current skill requirements before running. Task evidence ↗
SKILL.md
name: ui-tokensdescription: View, add, or modify design tokens in the StyleSeed design systemrisk: criticalsource: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-tokenssource_repo: bitjaru/styleseedsource_type: communitydate_added: 2026-07-01license: MITlicense_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
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
Example
User request:
Review this interface with @ui-tokens, identify the highest-impact design problems, and propose an implementation-ready improvement.
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.
Execution boundaries
This guide targets an existing StyleSeed project. The listed project paths, components, tokens and /ss-* commands are not bundled in this single-file entrypoint. Discover the actual project root and verify those prerequisites before edits; report absent resources instead of inventing them. Use host-supported invocation and existing project conventions. Layout numbers are design-system choices, not universal usability guarantees. Test keyboard access, responsive overflow and reduced motion on the actual interface.