ui-tokens
Skill2 starsChanged 4 months agoMITView on GitHub
View, add, or modify design tokens in the StyleSeed design system
2 other projects use a version of this.
Adopted by
Most recently taken up by
- Markssuave/Markssuave-Agent-skillstheir own version, first seen Nov 8, 2026
- designhouseme/AdvancedSkillstheir own version, first seen Nov 1, 2026
Other versions2 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 2
- designhouseme/AdvancedSkills★ 1same name
- Markssuave/Markssuave-Agent-skills★ 1same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository383 other files it gives its agents.
- 37signals-waySkill
- ab-test-analysisSkill
- advisor-orchestrator-workerSkill
- ai-ml-engineeringSkill
- algorithmic-artSkill
- analyze-feature-requestsSkill
- animation-vocabularySkill
- apple-designSkill
- emil-design-engSkill
- find-animation-opportunitiesSkill
- improve-animationsSkill
- pick-ui-librarySkill
- prototypeSkill
- review-animationsSkill
- ansoff-matrixSkill
- api-and-interface-designSkill
- api-design-best-practicesSkill
- app-store-changelogSkill
- auth-authorizationSkill
- beachhead-segmentSkill
- blue-ocean-strategySkill
- brainstorm-experiments-existingSkill
- brainstorm-experiments-newSkill
- brainstorm-ideas-existingSkill
- brainstorm-ideas-newSkill
- brainstorm-okrsSkill
- brand-guidelinesSkill
- browser-testing-with-devtoolsSkill
- bug-hunt-swarmSkill
- business-modelSkill
- canvas-designSkill
- ci-cd-and-automationSkill
- claude-apiSkill
- clean-architectureSkill
- clean-codeSkill
- cli-creatorSkill
- code-review-and-qualitySkill
- code-review-skillSkill
- code-simplificationSkill
- cohort-analysisSkill
- cold-start-problemSkill
- commit-archaeologistSkill
- competitive-battlecardSkill
- competitor-analysisSkill
- contagiousSkill
- context-engineeringSkill
- continuous-discoverySkill
- architecture-blueprint-generatorSkill
- azure-architecture-autopilotSkill
- cli-masterySkill
- codeqlSkill
- conventional-commitSkill
- create-implementation-planSkill
- csharp-asyncSkill
- diagnoseSkill
- dotnet-best-practicesSkill
- draw-io-diagram-generatorSkill
- git-commitSkill
- github-actions-efficiencySkill
- java-springbootSkill
- The first 60 shown.
The file
Show its rules and text
We split this skill into the rules it gives an agent
14 rules. About 0 are common, 8 are distinctive, and 6 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈8
Distinctive · estimate
This author's own choices. Worth a look.
6
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 16
Use this skill when you need view, add, or modify design tokens in the StyleSeed design system.
- Distinctive: line 42
Read and display the requested token file in a formatted table.
- Very specific: line 45
Add the token to the JSON source file (tokens/*.json)
- Very specific: line 46
Add the CSS custom property to css/theme.css under :root
- Very specific: line 47
If it needs a Tailwind utility, add to the @theme inline block
- Very specific: line 48
If it has a dark mode variant, add to the .dark block
- Distinctive: line 51
Update the value in the JSON source file
- Very specific: line 52
Update the CSS custom property in theme.css
- Distinctive: line 53
Check all components for direct usage that might need updating
- Distinctive: line 56
Always keep JSON and CSS in sync
- Very specific: line 57
Use semantic names, not descriptive names (--success not --green-500)
- Distinctive: line 63
Use this skill only when the task clearly matches its upstream source and local project context.
- Distinctive: line 64
Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
- Distinctive: line 65
Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
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-componentor/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.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
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.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.