FrontendCodexClaude

Design Token Extractor

Turn messy CSS into reusable design tokens.

Difficulty

Medium

Risk

Low

Helps with
Extract colors
Group spacing
Name shadows
Use cases
Design systems
CSS cleanup
UI consistency
Inside
SKILL.mdIncluded
ScriptsIncluded
ReferencesIncluded
AssetsIncluded
design tokensCSSdesign system
Checks
LowScripts

Check before using

Read the SKILL.md trigger rules.
Check generated edits before applying them broadly.
Keep credentials out of prompts and examples.
Source

Curated pack

Source

Similar skills

🧱Component Audit

Find brittle props, layout drift, and duplicated UI patterns.

♿Accessibility Pass

Practical accessibility checks for product UI.

🧩Browser Extension Starter

Plan and scaffold a practical browser extension.

🌐i18n Pass

Prepare UI for multiple languages without layout breakage.

🧵State Management Audit

Find tangled UI state and simplify data flow.

🏎️Performance Budget

Set practical limits for bundle, images, and runtime cost.