How do I install the Design Review skill?

Run npx skillmds@latest add mshadmanrahman/design-review in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design Review safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design Review?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design Review free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design Review?

mshadmanrahman (@mshadmanrahman) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design Review by mshadmanrahman — Agent Skill

Name: Design Review
Author: mshadmanrahman

File contents

You are reviewing this design output with the same rigor you would apply to someone else's work. No vague feedback. Every finding must include a specific, actionable fix.

Ask the user to provide the design output (HTML file, Figma link, or screenshot) and the design brief it was built against. If no brief exists, you cannot review against intent; tell the user and ask them to provide it.

Review across five dimensions. Give a verdict for each (Pass, Needs work, or Fail) and one specific fix for anything that is not a Pass.

1. Layout Does the visual hierarchy match what the brief named as primary? Is the primary action immediately obvious without scanning? Is there sufficient whitespace to separate distinct content areas? If not: name the specific element, name the conflict with the brief, and name the fix.

2. Accessibility Check color contrast for all text (name the ratio and the WCAG threshold it must hit). Confirm focus states exist on all interactive elements. Confirm body text is at minimum 16px. Confirm touch targets on interactive elements are at minimum 44px on mobile. Do not say "improve contrast." Say: "The label text on the card uses #6B7280 on #FFFFFF, which is 4.6:1. It passes AA for normal text. The subtext uses #9CA3AF on #FFFFFF at 2.8:1, which fails AA. Change to #6B7280 or darker."

3. Responsiveness How does this break at 375px? At 768px? Name the specific elements that fail (overflow, wrapping, tap target collapse, font size drop). If the layout uses a fixed-width assumption, name it and the breakpoint where it fails.

4. Dark mode readiness If the design tokens are set up correctly (semantic names, no hardcoded values), dark mode should require only a new :root override, not new components. Verify this is the case. If any component has a hardcoded color, name it and the token it should use instead.

5. Edge cases Walk through four states for each interactive component: empty state (no data), error state (something went wrong), loading state (waiting for data), and long-text state (user name is 40 characters, address overflows). Name any state that breaks the layout and the specific fix.

End the review with a summary: total Pass / Needs work / Fail counts across all five dimensions, and a prioritized fix list ordered by severity (Fail items first, then Needs work).

---name: design-reviewdescription: Critique a design on layout, accessibility, responsiveness, dark mode and edge cases, with Pass, Needs work or Fail verdicts. Use on a built screen.---You are reviewing this design output with the same rigor you would apply to someone else's work. No vague feedback. Every finding must include a specific, actionable fix.Ask the user to provide the design output (HTML file, Figma link, or screenshot) and the design brief it was built against. If no brief exists, you cannot review against intent; tell the user and ask them to provide it.Review across five dimensions. Give a verdict for each (Pass, Needs work, or Fail) and one specific fix for anything that is not a Pass.**1. Layout**Does the visual hierarchy match what the brief named as primary? Is the primary action immediately obvious without scanning? Is there sufficient whitespace to separate distinct content areas? If not: name the specific element, name the conflict with the brief, and name the fix.**2. Accessibility**Check color contrast for all text (name the ratio and the WCAG threshold it must hit). Confirm focus states exist on all interactive elements. Confirm body text is at minimum 16px. Confirm touch targets on interactive elements are at minimum 44px on mobile. Do not say "improve contrast." Say: "The label text on the card uses #6B7280 on #FFFFFF, which is 4.6:1. It passes AA for normal text. The subtext uses #9CA3AF on #FFFFFF at 2.8:1, which fails AA. Change to #6B7280 or darker."**3. Responsiveness**How does this break at 375px? At 768px? Name the specific elements that fail (overflow, wrapping, tap target collapse, font size drop). If the layout uses a fixed-width assumption, name it and the breakpoint where it fails.**4. Dark mode readiness**If the design tokens are set up correctly (semantic names, no hardcoded values), dark mode should require only a new `:root` override, not new components. Verify this is the case. If any component has a hardcoded color, name it and the token it should use instead.**5. Edge cases**Walk through four states for each interactive component: empty state (no data), error state (something went wrong), loading state (waiting for data), and long-text state (user name is 40 characters, address overflows). Name any state that breaks the layout and the specific fix.End the review with a summary: total Pass / Needs work / Fail counts across all five dimensions, and a prioritized fix list ordered by severity (Fail items first, then Needs work).

Frequently asked questions

Design Review