onewave-ai/design-tokens-sync
design-tokens-sync/SKILL.md
Audit and sync design tokens between the source of truth (tokens.json, Figma variables export) and the code that should consume them (Tailwind config, CSS custom properties, theme files). Finds drift -- hardcoded values, orphan tokens, out-of-date copies -- and fixes it in the right direction.
$ install --global
skillsauthnpx skillsauth add onewave-ai/claude-skills design-tokens-syncInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 16, 2026, 6:45 AM387.8s1 file scanned
SKILL.md
- name:
- design-tokens-sync
- description:
- Audit and sync design tokens between the source of truth (tokens.json, Figma variables export) and the code that should consume them (Tailwind config, CSS custom properties, theme files). Finds drift -- hardcoded values, orphan tokens, out-of-date copies -- and fixes it in the right direction.
- tools:
- Read, Glob, Grep, Write, Edit, Bash
- model:
- inherit
Design Tokens Sync
Keep one source of truth actually true. Every design system decays the same way: a hex gets hardcoded in a hurry, a token gets renamed in Figma but not in Tailwind, a second half-copy of the palette appears in a one-off CSS file. This skill finds the drift, decides direction with the user, and reconciles.
Workflow
- Locate the truths. Find every place tokens are defined:
tokens.json/*.tokens.json(W3C format), Figma variables export,tailwind.config.*theme, CSS custom properties, TS theme objects, SCSS variable files. If more than one claims to be canonical, ask which wins before touching anything -- direction of sync is a human decision. - Build the graph. For each token: canonical value, every downstream definition, and every consumption site. For each raw value in code (hex, px, rem, ms, cubic-bezier): whether a token exists for it.
- Drift report. Output
token-drift-report.mdin four buckets:STALE COPIES-- downstream definitions that no longer match canonical (with both values)HARDCODED-- raw values in components where a matching token exists (exact match, then near-match within perceptual distance for colors)ORPHANS-- tokens defined but consumed nowhereUNTOKENIZED-- raw values appearing 3+ times with no token; these are tokens waiting to be named
- Reconcile on approval. Stale copies: regenerate downstream from canonical. Hardcoded: replace with token references -- exact matches automatically, near-matches only with per-case confirmation (that slightly-off blue might be intentional). Untokenized: propose names following the existing convention and add to canonical. Orphans: list for deletion; never auto-delete.
- Guard. Offer to add the cheap tripwire: a script (
npm run tokens:check) that re-runs the drift detection and fails CI on new stale copies or hardcoded near-matches, so the system stays synced after you leave.
Rules
- Never sync both directions in one run. Canonical wins; anything flowing the other way (a designer wants the code's newer value) is an explicit canonical edit first.
- Near-match replacement is per-case, never bulk.
#0B1121vs#0b1220may be drift or may be a decision. - Preserve semantic layering: if the system has
color.blue.500 -> color.accent -> button.bg, fix references at the right layer instead of flattening everything to primitives. - Renames propagate everywhere or nowhere -- a half-renamed token is worse than the old name.
- Respect generated files: if
theme.cssis built fromtokens.json, fix the source and rebuild; never hand-edit output. - The report quantifies health: token coverage percentage (tokenized vs. raw values in components) is the number to move release over release.
Quick Commands
- "Audit my tokens" -- steps 1-3, report only
- "Sync from [source]" -- full reconciliation with the named canonical
- "What's hardcoded?" -- the HARDCODED bucket only
- "Add the CI guard" -- step 5 standalone
Related Skills
onewave-ai/typography-scale-builder
development
VerifiedTrustedCommunity
Build a complete typographic system -- modular or fluid type scale, line-height and tracking per size, weight roles, and vertical rhythm -- exported as tokens, Tailwind config, and CSS. Pairs with font-pairing-suggester (which picks the fonts; this builds the system they live in).
217SKILL.mdUpdated Jul 16, 2026
onewave-ai/review-response-writer
development
VerifiedTrustedCommunity
Respond to Google, Yelp, and industry reviews in the owner's voice -- gracious on the 5-stars, masterful on the 1-stars. Handles the angry customer, the unfair review, the fake review, and the one that mentions a legal or health issue. Every response written for the thousand future customers reading it.
217SKILL.mdUpdated Jul 16, 2026
onewave-ai/motion-language-designer
tools
VerifiedTrustedCommunity
--- name: motion-language-designer description: Define a product's motion design language -- duration and easing scales, choreography rules, and signature moves -- and export it as tokens plus ready-to-use Framer Motion variants and CSS. The difference between animations and a motion system: everything moves like it belongs to the same product. tools: Read, Glob, Grep, Write, Edit, Bash model: inherit --- # Motion Language Designer Design motion the way type and color get designed: as a system
217SKILL.mdUpdated Jul 16, 2026
onewave-ai/local-seo-optimizer
development
VerifiedTrustedCommunity
Get a local business found on Google -- audit and optimize the Google Business Profile, local pack ranking factors, review velocity, NAP consistency across directories, and location pages. For businesses whose customers search "near me," this outranks everything else in marketing.
217SKILL.mdUpdated Jul 16, 2026