More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsHard-Coded Values to Tokens
Put hand-written colors and sizes back on your design tokens, the right token for each place.
Free
Hard-Coded Values to Tokens
Example session with this skill installed
This app was built fast and has hex colors and pixel values all over the place.
Put it on our tokens (src/tokens.css) without changing how it looks.
- Read your context and instructions
- Compiled the hard-coded values to
- Generated the UI component
Coverage went from 76% to 96%. Five values are on tokens now; one needs your call.
| Before | After | |
|---|---|---|
| Design values from tokens | 76% (19 of 25) | 96% (24 of 25) |
| Written by hand | 6 | 1 |
Replaced (each value has a token with exactly the same value, picked for where it's used):
| File | Was | Now |
|---|---|---|
components/Badge.tsx:3 | rounded-[6px] | rounded-md |
components/Badge.tsx:3 | bg-[#2563eb] | bg-accent |
components/Banner.tsx:3 | background: '#f9fafb' | background: 'var(--color-bg)' |
components/Banner.tsx:3 | color: '#111827' | color: 'var(--color-text)' |
components/Banner.tsx:3 | padding: 24 | padding: 'var(--space-lg)' |
- <span className="rounded-[6px] bg-[#2563eb] px-[15px] text-bg">
+ <span className="rounded-md bg-accent px-[15px] text-bg">
- <div style={{ background: '#f9fafb', color: '#111827', padding: 24 }}>
+ <div style={{ background: 'var(--color-bg)', color: 'var(--color-text)', padding: 'var(--space-lg)' }}>
Nothing looks different: every replacement has exactly the old value. The difference is that these places now follow the dark theme and future releases.
Decision for you
px-[15px] in components/Badge.tsx:3 is 1px off the spacing scale. The closest step is px-(--space-md) (16px). I'd take it: 15px looks like a value copied slightly off. Say the word and I'll switch it.
For your design system team (not changed, it's in the tokens themselves)
color-accentin the dark theme is written by hand (#60a5fa), while every other value in that theme references a token.
Next steps: confirm the badge padding, then run the same check in review or CI to keep new code on tokens.
Badge.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
A value written by hand doesn't follow your design system: it stays the same in the dark theme and in the next release. Replacing it is harder than it looks, because one value often belongs to several tokens. The same blue can be the accent text, the accent background and the accent border, and taking the wrong one works today and breaks the day a theme changes it. This skill puts your code back on tokens. Your agent asks dsgraph, an open-source engine, which values in the code are written by hand and which token each one should be. The token is chosen by where the value is written: the CSS property, the state (`:hover`, `disabled:`), the component. Then the agent: - **Measures** how much of the code's design values come from tokens. - **Replaces what is certain:** values with an exact token, written the way your code already reads tokens (`var(--color-bg)`, `bg-accent`, `p-(--space-md)`). - **Brings you the rest:** values with only a close token, values your system seems to be missing, misspelt or deprecated variables. It doesn't round your design to the nearest token on its own. - **Measures again** and reports coverage before and after. Great after a fast prototype, on code an AI agent generated, or before handing a feature to review. **Reads:** your tokens as DTCG, token JSON, CSS custom properties or Tailwind's `@theme`, and your code in CSS, SCSS, Sass, CSS modules, JS/TS/JSX/TSX (style objects, CSS-in-JS, Tailwind classes), Vue, Svelte, Astro and HTML. **Runs locally** through `npx @dsgraph/cli`; your code is never uploaded. Free and open source (MIT).
- Misspelt variables are reported only when your design system's variables share a prefix (
--ds-), set indsgraph.config.json. Without one, the agent compares variable names itself and asks before renaming. - Values without an exact token are brought to you, not replaced; the skill won't round your design.
- Values built at runtime (a color computed in JS, a class assembled from strings) can't be read statically.
- Token formats outside DTCG, token JSON, CSS custom properties and Tailwind's
@theme(SCSS maps, JS theme objects) are not read as tokens.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free to use
No account required to browse
Trust & safety
Security scan
Security scan passed 16 days ago
- Free with an Agensi account
- Software
Node.js@dsgraph/cli
Permissions
Allowed Hosts
File Scopes
Network access downloads the dsgraph CLI from npm and, when the tokens are an npm package, its token files through jsDelivr. Files written: the code with values written by hand, and a `findings.json` the agent works from. The skill never edits the token definitions.