agentleFS
Sign inStart free
aiuxmastersaiuxmasters/agentic-design-tools/skills/design-system-audit/SKILL.md

design-system-audit

Skill0 starsChanged 4 months agoMITView on GitHub

Use when auditing a frontend codebase for design-system drift — hardcoded colors/spacing instead of tokens, duplicate one-off components that should use a shared primitive, or inconsistent variant naming across components. Triggers on requests like "audit our design system usage", "find token violations", "check for hardcoded styles".

11 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use design-tokens, accessibility-audit and 1 more.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • ilikescienceSkill

    design-tokens

    Expert in design tokens using the DTCG specification. Use this skill when users ask about design tokens, DTCG format, token validation, formatting, transformation, color spaces (sRGB, Display P3, OKLCH), references and aliasing, resolvers, theming with modifiers/contexts, multi-platform design systems, accessibility, or working with tools like jq, jsonata, and terrazzo. Helps with token file creation, resolver configuration, structure, naming conventions, and best practices.

    Also in 3 projects that use this

  • GitHubSkill

    accessibility-audit

    Audits actual components and routes against applicable WCAG 2.2 A/AA criteria using consumer-owned design-system evidence and repository tools. Use when asked for an accessibility audit, a11y check, keyboard or focus review, contrast check, or screen-reader verification.

    Also in 4 projects that use this

  • AnthropicSkill

    design-critique

    Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish.

    Also in 3 projects that use this

The file

We split this skill into the rules it gives an agent

3 rules. 0 are common, 2 are distinctive, and 1 is very specific to this project.

  • 0

    Common

    Most of the 9 edited versions we read keep these.

  • 2

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Hardcoded values instead of tokens: Search styles (CSS/SCSS/CSS-in-JS/Tailwind config) for raw hex colors, raw px spacing, and raw font …

    line 12
  2. Distinctive:

    Duplicate primitives: Look for components that reimplement something the design system already provides (e.g.

    line 15
  3. Distinctive:

    Do not restyle or refactor unless the user explicitly asks you to apply fixes after reviewing the findings.

    line 29

“Common” is measured: kept by at least 6 in 10 of the 9 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Design system audit

Audit a codebase against its design system and report drift — do not fix anything automatically unless asked.

What to check

  1. Hardcoded values instead of tokens. Search styles (CSS/SCSS/CSS-in-JS/Tailwind config) for raw hex colors, raw px spacing, and raw font sizes where a token exists that matches or is close to that value. Flag each with file:line and the token it should probably be.
  2. Duplicate primitives. Look for components that reimplement something the design system already provides (e.g. a hand-rolled button, badge, or modal instead of importing the shared one). Flag by name and location.
  3. Variant/prop naming drift. Compare prop names and enum values across similar components (e.g. size vs variant vs type used inconsistently, or sm/md/lg vs small/medium/large mixed across the codebase).
  4. Accessibility regressions relative to the system's primitives. If a one-off component skips focus states, ARIA attributes, or color-contrast handling that the shared primitive provides, flag it.

How to report

Group findings by severity (breaks visual consistency > breaks a11y > minor naming nit), each with:

  • file:line
  • what's wrong
  • what it should be instead (the token, the shared component, the consistent name)

Do not restyle or refactor unless the user explicitly asks you to apply fixes after reviewing the findings.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free