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 agentsDesign Tokens Upgrade
Upgrade a design token package without silent breakage: fix renamed and removed tokens, see what looks different.
Free
Design Tokens Upgrade
Example session with this skill installed
Bump @primer/primitives from 11.5.1 to 11.10.0 in our app and fix whatever breaks.
Styles are in src/.
- Read your context and instructions
- Compiled the design tokens upgrade
- Generated the UI component
The upgrade is in, with one decision waiting for you. 11.10.0 removes 7 tokens; one of them is used in this app. Three other places will look slightly different, or not at all.
| Release | 11.5.1 → 11.10.0: breaking (7 removed · 4 changed · 81 added · 50 deprecated), published as minors |
| In this app | 1 place breaks, 3 places look different (3 files) |
| Package | @primer/primitives bumped to ^11.10.0 with npm, lockfile updated |
Decision for you: --shadow-floating-legacy in components/menu.css:2
The token was removed in this range and the release names no replacement, so I haven't picked one. It was:
0 6px 12px -3px rgb(37 41 46 / 4%), 0 6px 18px rgb(37 41 46 / 12%)
The closest token is --shadow-floating-small: the same two shadow layers, plus a 1px border ring (rgb(209 217 224 / 25%)). If the extra hairline is fine for the "What's new" menu, I'll switch to it; otherwise this is a value to raise with whoever owns your use of Primer. Until then, the menu renders with no shadow.
What will look different (not changed, worth a glance before release)
| Where | Token | What changes |
|---|---|---|
components/modal.css:2 (modal) | --shadow-floating-small | the 1px border ring goes from 50% to 25% opacity |
components/modal.css:6 (datepicker) | --shadow-floating-small | the same |
components/button.css:2 (focus ring) | --focus-outline | now references another token with the same value: no visible change |
Checked after the bump: comparing 11.5.1 with 11.10.0 against src/ again leaves only the menu.css line above, waiting for your decision. No other old names in the code.
Next steps: tell me whether to use --shadow-floating-small for the menu, then look at the modal and the datepicker in both themes. Full report: upgrade-report.md.
menu.css
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
When a token package removes or renames a token, nothing fails. In CSS, a variable that no longer exists just makes the property invalid: no build error, no console warning. A Tailwind class for a missing token is simply not generated. The upgrade looks clean, and the UI quietly loses a shadow, a radius or a color.
This skill upgrades a token package the safe way. Your agent asks dsgraph, an open-source engine, what the new version does to this project's code: every place that breaks and every place that will look different, with file and line, through references and themes. Then it:
- Fixes what breaks. Renamed tokens are replaced in every form the code uses them (
var(--…), Tailwind classes, JS imports). Removed tokens get the replacement the release names; when there is none, you choose. - Bumps the dependency with your project's own package manager, so the lockfile follows.
- Checks again with both versions named, until nothing breaks.
- Lists what will look different, grouped by component, so someone looks at those screens before release. It does not change them.
Use it for a version bump you plan, a Dependabot or Renovate pull request, or styles that broke after an upgrade.
Reads: design token packages from npm (DTCG, token JSON, CSS custom properties), and your code in CSS, SCSS, Sass, CSS modules, JS/TS/JSX/TSX (style objects, CSS-in-JS, Tailwind), Vue, Svelte, Astro and HTML.
Runs locally through npx @dsgraph/cli; your code is never uploaded. Free and open source (MIT).
- It finds the token uses dsgraph can read statically. A class or variable name built at runtime (
`bg-${tone}`) can hide a use; the skill also searches the code for every old name, but can still miss one. - When a token is removed with no replacement, it won't choose one for you.
- What "looks different" is listed, not changed: you still need to look at those screens.
- Token packages whose only build is SCSS or JS 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 and both versions of the token package from npm (through jsDelivr), and installs the new version with your package manager. Files written: the code that uses renamed or removed tokens, `package.json` and the lockfile, and the report. The skill never edits the token package or `node_modules`, and never merges, pushes or opens a pull request without asking.