Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Design Audit

A pre-ship final checkpoint skill that scans your codebase for motion gaps, a11y violations, color/contrast issues and performance problems, then reports them by severity.

Design & UIIntermediate★ 373⑂ 28AI score 9/10Last updated: Sep 8, 2026

What it does

  • Runs scripts/audit.py over the repo instead of hand-written greps, with --json for post-processing and --only <check-id> for a single check.
  • Splits results into findings (evidence with file:line and matched text), clean (the check ran and found nothing) and not applicable (no files of that type). The hard rule: never report "not applicable" as passing — the exact bug that used to ship clean bills of health.
  • Contrast is computed by hand from your token values and reported as a ratio, e.g. #831843 on #FDF2F8 = 9.4:1, against 4.5:1 for body text and 3:1 for large text and UI boundaries.
  • Stack-specific checklists for Compose (Layout Inspector recomposition counts, Macrobenchmark frame timing, Baseline Profiles, Modifier.semantics) and SwiftUI (Time Profiler, Hitches, Dynamic Type at 200%, Reduce Motion), plus Web.
  • Final output is bucketed into Critical / Important / Nice-to-have.

Who it's for

  • Frontend and mobile developers who want an automated quality gate before release.
  • Design engineers policing design-system consistency (too many unique durations, untransitioned inline styles).
  • Teams that need repeatable code-level accessibility checks.
  • Projects on Next.js app-router, Nuxt 3, Vue, Svelte or Astro where src/ may not exist.

Examples

  1. "Audit the whole UI before we deploy" → Critical findings for missing prefers-reduced-motion, outline: none without :focus-visible, and animated layout properties, each with file:line.
  2. "Re-run just the accessibility checks" → --only targets focus visibility and click handlers on non-interactive elements.
  3. "Do our new brand tokens pass contrast?" → each pair computed and reported against the 4.5:1 / 3:1 thresholds.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/AThevon/genjutsu/HEAD/skills/_jutsu/design-audit/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/_jutsu/design-audit folder from the GitHub repo AThevon/genjutsu into my ~/.claude/skills/design-audit/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/AThevon/genjutsu.git && mkdir -p ~/.claude/skills && cp -r genjutsu/skills/_jutsu ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repository: git clone https://github.com/AThevon/genjutsu.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill bundle: cp -r genjutsu/skills/_jutsu ~/.claude/skills/
  5. Verify ~/.claude/skills/_jutsu/design-audit/scripts/audit.py exists.
  6. Check Python with python3 --version (without it the audit is only partial).
  7. Restart Claude Code and ask: "Use the design-audit skill on this project."
  8. For the full pipeline, also install the /genjutsu:paint command as described in the repo README.
View source on GitHub ↗License: NOASSERTION