andrem-sec

Design Token Guard — Design skill for Claude Code

Design community

Enforce the token layer — find raw hex values and magic numbers in component files, replace with token references.

How to install Design Token Guard

Installs to ~/.claude/commands/andrem-sec-psc-comet-design-token-guard.md

Terminal

mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/andrem-sec/psc-comet/HEAD/.claude/commands/design-token-guard.md -o ~/.claude/commands/andrem-sec-psc-comet-design-token-guard.md

Restart Claude Code, or start a new session, for it to be picked up.

What Design Token Guard does

name: design-token-guard description: Enforce the token layer — find raw hex values and magic numbers in component files, replace with token references

Invoke the design-token-guard skill now. Locate the token definition file(s) first. Scan component files for raw hex values, arbitrary Tailwind color values, and raw font-size/spacing numbers. Classify each finding as TOKEN_VIOLATION (token exists, use it), TOKEN_GAP (token missing, create it), or TOKEN_CONFLICT (token exists but differs

Alternatives in Design

Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
Clipify — Claude Code skill: turn long videos into social-ready clips 549 ★
Design Handoff — Generate a developer handoff document from a Figma file — spacing specs, token maps, component APIs, and produ 309 ★