agentmods.dev

design-audit

design-audit is a skill for Claude Code from skillmds/skillmd. It costs 82 tokens per session (4,509 once invoked), scanned A, original, MIT.

An automated design-quality review that checks accessibility against WCAG 2.2, performance, themes, responsive layouts and interface anti-patterns. WCAG 2.2 is a widely used set of accessibility guidelines for websites and applications.

In plain words
What is it for?
Use it to audit an interface or codebase, focus on areas such as accessibility or mobile layouts, and produce a prioritized design report.
Why use it?
It provides a broad review with severity levels and suggested fixes, helping teams find usability and accessibility problems before release.

Skill for Claude Code

Written for Claude Code: $ARGUMENTS substitution. Also seen: mentions CLAUDE.md.

Part of the design-system-audit-and-remediation plugin — 14 skills shipped together

not rated 1repo yesterday A scan 82 tokens original MIT

Good fit Use it to audit an interface or codebase, focus on areas such as accessibility or mobile layouts, and produce a prioritized design report.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/skillmds/skillmd/design-audit
View source ↗ skillmds/skillmd skillmd.com
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add skillmds/skillmd --skill design-audit
Clone the repo
git clone --depth 1 https://github.com/skillmds/skillmd

Made for: Claude Code.

Or install design-system-audit-and-remediation, the plugin that ships this one along with the rest of its 14 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for design-audit

README.md
[![agentmods](https://agentmods.dev/badge/skills/skillmds/skillmd/design-audit/github.svg)](https://agentmods.dev/skills/skillmds/skillmd/design-audit)
Your own site
<a href="https://agentmods.dev/skills/skillmds/skillmd/design-audit"><img src="https://agentmods.dev/badge/skills/skillmds/skillmd/design-audit/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for design-audit

Your own site · 80×15
<a href="https://agentmods.dev/skills/skillmds/skillmd/design-audit"><img src="https://agentmods.dev/badge/skills/skillmds/skillmd/design-audit.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 82 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,509 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00082 $0.04509
Opus 5.5 $0.00033 $0.01804
Sonnet 5 $0.00016 $0.00902
Haiku 4.5 $0.00008 $0.00451

Measured 4d ago against content hash fbe5e850a32e, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-23, from the pricing page.

Security

Grade A, and why

design-audit scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/design-system-audit-and-remediation/skills/design-audit/SKILL.md · 394 lines

How it starts

The opening of the file, as written. The whole thing — 394 lines — stays where its author put it; the contents beside it link to each section on GitHub.

You are an autonomous design quality auditor. You systematically evaluate every design dimension — accessibility, performance, theming, responsiveness, modern pattern usage, and anti-pattern detection — and produce a prioritized report with severity ratings and concrete fix recommendations.

Do NOT ask the user questions. Audit everything. If $ARGUMENTS specifies a focus area, go deep there but still do a surface-level pass on other dimensions.

INPUT

$ARGUMENTS (optional). Focus areas: "accessibility", "a11y", "performance", "theming", "responsive", "mobile", "anti-patterns", "modern", or a specific file/directory path. If not provided, perform a full audit.

PHASE 1: CODEBASE SURVEY

1.1 Identify Tech Stack

  • Read package.json, pubspec.yaml, requirements.txt, build.gradle, etc.
  • Identify: platform (web/Flutter/SwiftUI/Compose/React Native), framework, CSS methodology, component model
  • Note the testing tools available (Lighthouse, axe, Flutter test, etc.)

1.2 Gather Scope

  • Count total UI files (components, screens, pages, views, widgets)
  • Identify shared/reusable components vs page-specific ones
  • Check for existing design system or component library
  • Read CLAUDE.md for Design Context section if it exists

1.3 Prioritize by Impact

  • Sort files by: route-level pages first, then shared components, then page-specific components
  • Focus audit effort on high-traffic paths: landing page, auth screens, primary user flows

PHASE 2: ACCESSIBILITY AUDIT (WCAG 2.2 AA + AAA where feasible)

2.1 Perceivable (WCAG 1.x)

1.1 Text Alternatives

  • All <img> have meaningful alt (not "image", not filename)
  • Decorative images use alt="" or role="presentation"
  • SVG icons have aria-label or <title> element
  • Flutter Image widgets have semanticLabel
  • Icon buttons have accessible names (not just the icon)
  • Complex images (charts, diagrams) have long descriptions

1.2 Time-based Media

  • Videos have captions
  • Audio has transcripts
  • No auto-playing media without user control

Read the full file on GitHub · 394 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 394 lines · 82 tokens per session scan A fbe5e850a32e

Subscribe to this mod's changes

design-audit is a skill published in the GitHub repository skillmds/skillmd (1 stars, last pushed yesterday), licensed MIT. It adds 82 tokens to every session and 4,509 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-19.

Design and UXLintagent-skillsai-agentsclaudeclimcpux
Related

Other skills, from other repositories

design

Use when designing or refreshing a web UI or landing page — visual concept, type/color/spacing/motion tokens, composition, rescuing a UI that reads AI-generic, or a graded design review. Brand-grounded and research-first; ships Tailwind v4 + Next.js 15 under WCAG 2.2 AA and Core Web Vitals budgets. NOT the words on…

ericrisco/rsc-harness · 100 tokens

beautiful-cli-design

Expert in making CLI tools visually stunning and delightful — not just functional. Covers ANSI color systems (16/256/truecolor with graceful degradation), Unicode box drawing, progress indicators, tables, animated output, ASCII art, rich text, interactive prompts, and full TUI frameworks (Ink, Bubble Tea, Ratatui…

curiositech/windags-skills · 173 tokens

frontend

Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or visual-quality task, or when asked to make an interface look or feel a certain way.

code-yeongyu/lazycodex · 49 tokens

designlang-tokens

Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.

Manavarya09/design-extract · 30 tokens

antv-x6-editor

A skill for creating and troubleshooting interactive diagrams with AntV X6, a JavaScript engine for editors made of connected nodes and lines. It supports diagram types such as flowcharts, dependency graphs, entity-relationship diagrams, and organization charts.

antvis/chart-visualization-skills · 253 tokens

antv-infographic

Create beautiful infographics based on given text content. Use when users request to create infographics.

antvis/chart-visualization-skills · 24 tokens