Menu

Individual skill

ds-design-audit

Reviews an existing UI with scores based on evidence, then fixes the highest-impact problems. Use when a page or app screen looks generic, cluttered, or unfinished, or before you ship UI work. Run as /ds-design-audit.

skills/ds-design-audit/SKILL.md

Read pinned source

Source commit d4f1ebe72e8314c3a0c6135bb82f623c650f7218

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Instructions only
Last checked
Nov 5, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
222
Repository last updated
Oct 28, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

Score a UI from what is on the screen, fix the worst problems, and show that the fixes work.

## Steps

1. Identify the target file or URL and render it. If it does not render, report this and stop. Do not audit from the source code alone.
2. Take screenshots of the first viewport and the full page at about 1440px and 390px wide. Also capture the hover, focus, empty, loading, and error states where you can.
3. Read the target's code: tokens, fonts, colors, focus styles, media queries, and copy.
4. Give each area a score from 1 to 5. Give one line of evidence for each score: something visible or a line of code.
   - Hierarchy: the main message and action are clear within 3 seconds, and there is one focal point.
   - Typography: the fonts are paired on purpose, the scale is consistent, and the line length and leading are correct.
   - Color: there is one dominant color and one accent, the colors are tokens and not scattered hex values, and there are no decorative gradients.
   - Spacing: the spacing follows a scale, the rhythm is consistent, and the mobile alignment is correct.
   - States: hover, focus, empty, loading, error, and long-content states all exist.
   - Accessibility: the contrast is 4.5:1 or higher, the focus rings are visible, the fields have labels, the touch targets are 44px, and reduced motion is respected.