design-critique
Critique UI/UX designs for clarity, hierarchy, interaction, accessibility, and craft. Use for design reviews, PR feedback on UI changes, evaluating mockups, checking if a component is ship-ready, or when honest feedback is needed on whether something meets a high bar.
- Installs
- 52
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/petekp/claude-code-setup --skill design-critique- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads design-critique automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Design Critique
Honest, specific, actionable feedback on interface design.
The Critique Stance
- Be direct. No soft language. No vibes-only feedback.
- Point to specifics, not generalities.
- Explain why, not just what.
- Reference principles, not preferences.
- Offer fixes, not just problems.
Process
- Identify what you're critiquing - Screen, component, flow, or interaction
- Gather context - Platform, users, constraints (if available)
- Apply the lens - Clarity, hierarchy, interaction, accessibility, craft
- Prioritize issues - P0 (blocking) through P3 (polish)
- Propose fixes - Specific, actionable changes
Quick Check (Use CHECKLIST.md for detailed pass)
Clarity
- Can users predict outcomes before acting?
- Is the hierarchy of information obvious?
- Are interactive elements clearly distinguished?
Interaction
- Do all states exist? (hover, focus, active, disabled, loading, error)
- Is feedback immediate?
- Can users recover from errors?
Accessibility
- Focus visible and logical?
- Contrast sufficient?
- Touch targets adequate (44x44pt)?
Output Contract
Structure every critique as:
## Verdict
[1 sentence: ship/iterate/rethink]
## Issues
### P0: [Issue Name]
- **What's wrong**: [Specific observation]
- **Why it matters**: [User impact]
- **Evidence**: [Element, screen, or behavior]
- **Fix**: [Actionable change]
### P1: [Issue Name]
...
## Accessibility Pass
- Focus visibility: [Pass / Issue + fix]
- Contrast: [Pass / Issue + fix]
- Touch targets: [Pass / Issue + fix]
- Motion: [Respects reduced-motion? / Issue]
## What's Working
[2-3 things done well - critique includes praise]
## Next Steps
- [ ] [Verification action 1]
- [ ] [Verification action 2]
Severity Levels
| Level | Description | Action |
|---|---|---|
| P0 | Blocks task, causes confusion, or data loss | Must fix before ship |
| P1 | Frequent friction, misclicks, unclear recovery | Should fix |
| P2 | Polish, efficiency, minor annoyance | Fix if time permits |
| P3 | Nice-to-have refinement | Consider for later |
The Questions Behind Everything
- "What is the user trying to do here?"
- "What's the most important thing on this screen?"
- "What would happen if we removed this?"
- "Would a new user understand this?"
- "Are we proud of this?"
Common Critique Notes
"Too busy": Too many things competing for attention. Remove until important things breathe.
"Not discoverable": Hidden functionality, unlabeled icons, gestures without affordance.
"Inconsistent": Different patterns for similar actions. Pick one and commit.
"Feels off": Usually spacing, alignment, or timing. The eye knows before the mind articulates.
"Overdesigned": Every effect turned up. Decoration overwhelming function. Subtract until inevitable.
Deep Reference
For detailed heuristics, common failures, and platform-specific patterns:
- CHECKLIST.md - Quick pass checklist
- PRINCIPLES.md - Full critique principles and examples
FAQ
What does the design-critique skill do?
Critique UI/UX designs for clarity, hierarchy, interaction, accessibility, and craft. Use for design reviews, PR feedback on UI changes, evaluating mockups, checking if a component is ship-ready, or when honest feedback is needed on whether something meets a high bar.
How do I install design-critique?
Run npx skills add https://github.com/petekp/claude-code-setup --skill design-critique in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/design-critique/ (personal) or .claude/skills/design-critique/ (project).
Which AI agents can use design-critique?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is design-critique safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains design-critique?
It is published by petekp in petekp/claude-code-setup. It has 52 recorded installs.
More from petekp/claude-code-setup
code-comments
petekp/claude-code-setup
Write, review, or remove code comments. Use when adding comments or doc comments, reviewing the comments in a diff, or cleaning up or removing comments.
deep-research
petekp/claude-code-setup
Investigate a question that requires sustained research across sources and produce cited findings. Use for deep research requests; skip ordinary lookups and single-document reviews.
exhaustive-systems-analysis
petekp/claude-code-setup
Perform evidence-driven, multi-subsystem audits of real codebases to find correctness bugs, race conditions, security gaps, stale documentation, dead code, and production-readiness risks. Use when asked to audit a system end-to-end, verify agent-written code before shipping, analyze a subsystem for correctness across multiple modules, or produce a structured risk report for a real implementation. Prefer other skills for a single isolated bug, a proposal or document review, or a dedicated dead-code cleanup.
typography
petekp/claude-code-setup
Apply professional typography principles to create readable, hierarchical, and aesthetically refined interfaces. Use when setting type scales, choosing fonts, adjusting spacing, designing text-heavy layouts, implementing dark mode typography, or when asked about readability, font pairing, line height, measure, typographic hierarchy, variable fonts, font loading, or OpenType features.
claude-code-audit
petekp/claude-code-setup
Forensic audit of the user's recent Claude Code sessions to surface step-change workflow improvements — not marginal ones. Use when the user asks to "audit my Claude Code sessions", "analyze how I use Claude Code", "find patterns in my usage", "improve my Claude Code workflow", "review my sessions", "find leverage in my setup", or wants to understand where their Claude Code setup is leaking time. Samples dozens of real transcripts, extracts quantitative signal via scripts, uses parallel subagents for deep reads, then synthesizes into a short prioritized report with drafted implementations (new skills, CLAUDE.md rules, hooks, settings diffs) that the user can install directly. Trigger even when the user doesn't say the word "audit" — if they're asking about improving or reviewing their Claude Code habits at scale, use this skill.
literate-guide
petekp/claude-code-setup
Create a narrative guide to a codebase or feature in the style of Knuth's Literate Programming — code and prose interwoven as a single essay, ordered for human understanding rather than compiler needs. Use when the user asks to 'explain this codebase as a story', 'write a literate guide', 'create a narrative walkthrough', 'tell the story of this code', 'Knuth-style documentation', 'weave a guide for this feature', or when they want deep, readable documentation that treats the program as literature. Also trigger when someone wants a document that a thoughtful reader could follow from start to finish and come away understanding both WHAT the code does and WHY every design choice was made.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.