bewinxed/cawco/drift

Claude Code and agent skill by bewinxed/cawco

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Find where a project's UI has drifted from its DESIGN.md and tokens (literal colours, off-scale spacing and radii, one-off shadows, curves and durations), report it, then file a task per drift. Use for a design audit, a token or lint sweep, a weekly drift routine, or before a release.

Install

npx vskill@latest install bewinxed/cawco/drift

SKILL.md

Drift

A drift is a value in the UI that the design system does not hold: a literal where a token belongs, a step off the scale, a component built outside its recipe. DESIGN.md and the token file are the truth; the code is what drifts.

Steps

  1. Read the system: the tokens (design/tokens.json and the themes design/tokens.resolver.json names, DTCG 2025.10, each token's custom property its last name segment; or the repository's own token file) and design/DESIGN.md's named rules and recipes. Write down the allowed set for each kind: colours, spacing steps, radii, shadows, font sizes and weights, curves, durations. Done when every kind has its list.
  2. Search the styles in the UI's source (CSS, component files, inline styles, class lists), skipping the generated token output itself:
  • colours: #[0-9a-fA-F]{3,8}\b, rgba?\(, hsla?\(, oklch\(, named colours in style values, colour utilities with arbitrary values (bg-[#…])
  • lengths: px, rem and em values on margin, padding, gap, inset, width and radius that are not on the scale; arbitrary-value utilities (p-[13px])
  • finish and motion: box-shadow, cubic-bezier(, ms and s durations, transition and animation values not taken from tokens
  • components: markup that rebuilds a recipe (a hand-made button, chip or dialog) instead of using it

Done when every match is listed with file:line, the literal and the token or recipe it should be. A literal with no fitting token is listed as "needs a token".

  1. Report: group the drifts by component or screen, worst first (a wrong colour role before an off-by-one spacing), with counts per kind. In a project, write the report as a file in the project's folder or repository and name its path. Done when the person has the report.
  2. File a task per drift with task_create (one per component or screen when its drifts share one fix), each with acceptance listing the file:line values to bring onto the system, checks that would catch them coming back (the search from step 2 as a command that must print nothing), and owns set to the files. "Needs a token" drifts get one task to add the tokens, and the tasks that use them name it in waits_on. Done when every drift in the report is covered by a task.
  • Without `task_create` (a delegate's toolset): send the drafted tasks to your parent with handoff.

Security

  • Security scanPassed, 90 of 100Pattern checks on the skill's files.
  • Model reviewPassed

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

Source

Popularity

7-day trend score
0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/bewinxed/cawco/drift/badge)](https://verified-skill.com/skills/bewinxed/cawco/drift)

Something wrong with this skill or its page? Tell us.