design-system-adherencelisted

Audits whether a finished artifact actually follows the design system it was supposed to follow. Takes a design system as the yardstick (a Claude Design bundle, a CSS token file, a stylesheet) plus one or more artifacts (PDF, PNG/JPG, HTML) and returns measured findings — colour, typography, contrast — each with computed severity, the evidence it rests on and a specific fix. It DIAGNOSES; it does not redesign, rewrite or produce corrected assets, and it refuses to run without a design system to measure against. Use it whenever someone asks "does this follow our design system?", "is this on brand?", "audit this deck against our tokens", "check these screens against the styleguide", "why does this look off?", "did they use our colours?", "is our brand consistent across these pieces?", "review this PDF for brand compliance", or shares a design system together with something made from it. Also triggers on "contrast check", "WCAG audit" and "accessibility check" when a stylesheet is supplied.
santiagocardonao/design-system-adherence · ★ 0 · Web & Frontend · score 78

Install: claude install-skill santiagocardonao/design-system-adherence

# Design system adherence A linter reads source code. It cannot see the deck that went to the conference, the PDF the sales team sends, or the screenshot in the launch post — and that is where brand inconsistency actually reaches people. This skill audits what came out of the oven, not the recipe. **The rule that orders everything: the system you are given is the yardstick, and what the yardstick does not define is not judged.** A design system that says nothing about logo clear space has not been violated by a cramped logo; it has simply been silent, and the report says so rather than inventing a standard. Silence is never a violation. Two failures end this skill's usefulness immediately, and both are avoided by construction rather than by care: - **Inventing a measurement.** Never state a number the evidence cannot support. A colour sampled from a JPEG is approximate; a font size in a rasterised PDF is unknowable. Say so. - **Inventing a yardstick.** Without a supplied design system there is nothing to measure against. Refuse the work and say why. ## Inputs required **1. The design system — mandatory.** One of: | Format | Evidence | Notes | |---|---|---| | Claude Design bundle (`_ds_manifest.json` + `tokens/*.css`) | measured | Best case: tokens, themes and brand fonts are explicit | | CSS custom properties, `.zip` or folder | measured | Any stylesheet declaring `--tokens` | | Tokens JSON, Tailwind config, Figma variables | measured | Convert to CSS custom prop