From skillry-frontend-web-design
Use when you need to inspect component reuse, design tokens, variants, primitives, and design system drift.
How this skill is triggered — by the user, by Claude, or both
Slash command
/skillry-frontend-web-design:19-design-system-reviewThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Audit a codebase's design system health: token definitions, component variants, spacing-scale adherence, duplicate primitives, and drift between the design system and the production UI. The output names the specific files, class names, and values causing inconsistency, ranked by occurrence count, so consolidation is unambiguous and the highest-leverage fixes are obvious. This is a system-level ...
Audit a codebase's design system health: token definitions, component variants, spacing-scale adherence, duplicate primitives, and drift between the design system and the production UI. The output names the specific files, class names, and values causing inconsistency, ranked by occurrence count, so consolidation is unambiguous and the highest-leverage fixes are obvious. This is a system-level audit; it proposes consolidation targets rather than deleting or renaming files unilaterally.
tokens.json exists and you need to verify it is actually consumed consistently.web-design-review.visual-polish-pass.ui-consistency-review.tailwind.config.{js,ts}, tokens.json, _variables.scss, or CSS custom properties in :root. Record the spacing scale (confirm 4px or 8px base), color palette keys, type scale, radius scale, and shadow scale. If none exists, flag "no formal token layer" as a Critical finding.components/, ui/, design-system/, or equivalent. Count how many implement a Button, Input, Modal, Badge, or Card. More than one implementation of the same primitive is a drift signal — record each path.#3b82f6, #1d4ed8) in component and page files. Any literal that equals a token value is a violation. The same applies to hardcoded pixels matching token spacing (margin: 16px when spacing-4 exists).p-[13px], mt-[22px], gap-[7px]. Any value that is not a multiple of the scale base is a violation unless a documented exception exists.<Button variant="danger"> is correct; <Button className="bg-red-600 text-white"> at twelve call sites is drift..dashboard-header, .pricing-card) rather than tokens or shared components — these are system bypasses.dark: variants) rather than duplicate hardcoded CSS blocks, and that every semantic role has a value in each theme.Token layer:
Components and variants:
Drift signals:
style={{ }} that hardcodes a value the token layer already provides.# --- duplicate primitives ---
# multiple files implementing the same component
fd -t f -i 'button' src | head
fd -t f -i 'modal|dialog' src | head
fd -t f -i 'input|textfield' src | head
# duplicate exported component symbols across files
rg -oN 'export (?:default )?(?:function|const|class) (\w+)' -r '$1' src | sort | uniq -d
# --- token bypasses (color) ---
# hardcoded hex/rgb in components and pages
rg -n '#[0-9a-fA-F]{3,8}\b|rgba?\(' src/components src/app 2>/dev/null
# raw Tailwind color utilities used instead of semantic tokens
rg -n 'bg-(red|blue|green|gray|slate)-[0-9]{3}' src | head -40
# rank most-used literal colors (near-duplicate detection)
rg -oN '#[0-9a-fA-F]{6}' src | sort | uniq -c | sort -rn | head -20
# --- token bypasses (spacing / radius) ---
# off-scale arbitrary Tailwind values
rg -n '\b[pm][trblxy]?-\[[0-9]+px\]|gap-\[[0-9]+px\]|rounded-\[[0-9]+px\]' src
# --- variant drift ---
# components styled by className override at the call site
rg -n '<Button[^>]*className=|<Card[^>]*className=|<Input[^>]*className=' src | head -40
# --- token file wiring ---
# verify the token file is actually imported by the build
rg -n 'tailwind.config|tokens|:root\b|--color-' . 2>/dev/null | head
# --- theme parity ---
# is dark mode a token swap or duplicated CSS?
rg -n 'dark:|prefers-color-scheme|data-theme|\.dark ' src | head
# --- catalog coverage ---
# count story files vs component files (coverage gap signal)
fd -e stories.tsx -e stories.jsx src | wc -l
fd -e tsx src/components | wc -l
# --- impact analysis for a token rename ---
# every file that consumes a given token (replace tokenName)
rg -l 'tokenName|--tokenName|colors\.tokenName' src
# how many call sites use a primitive (sizing a consolidation)
rg -c '<Button' src | rg -v ':0$' | wc -l
# --- spacing scale shape ---
# list the spacing keys the config defines (look for skipped steps)
rg -n 'spacing:|--space-|gap-[0-9]' tailwind.config.* src 2>/dev/null | head -20
GhostButton.tsx created because the developer could not find the variant prop on the existing Button.style={{ marginTop: 13 }} on a one-off adjustment, then copy-pasted into twenty files.primary in Tailwind is #2563eb but a constants.ts imports brand.primary = '#1d4ed8' — two near-identical blues in production.colors.danger exists in the config but components write bg-red-600 directly, so renaming the token misses them.space-1=4, space-2=8 then space-3=16 — skipping 12 — producing inconsistent component density.theme.ts constants file both defining colors, so contributors pick whichever they find first and the two drift apart.globals.css full of .page-x .card rules that silently overrides the shared Card component on specific pages, invisible to anyone reading the component.border-radius and box-shadow ad hoc, so cards, modals, and inputs have no coherent elevation or corner language.Return a structured report with:
Done means the token source of truth is located (or its absence flagged Critical); duplicate primitives are listed with consolidation targets; the top token and spacing violations are ranked by occurrence with file:line evidence; theme parity is checked where applicable; and the report ends with the three highest-leverage changes.
npx claudepluginhub fluxonlab/skillry --plugin skillry-frontend-web-designCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.