Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Critique the UI at $ARGUMENTS through a design lens. Load the ui-craft skill.
Step 0: Visual capture (mandatory)
Code-only review is insufficient. Every audit/critique starts with the surface as the user sees it. Try the following in order; use the first one available:
- Playwright MCP — if
playwright MCP server is available, use it. Capture full-page screenshots at three viewports: desktop (1280×800), tablet (768×1024), mobile (375×812). Capture dark mode if the app supports it.
- Browser DevTools / Chrome MCP — second choice; same viewport set.
- Other browser automation (
agent-browser, cursor-ide-browser) — third choice.
- Ask the user — last resort. If no automation is available, request screenshots from the user before proceeding. Be specific:
- "Visual review needs screenshots. Please provide:
- Full-page at 1280px (desktop)
- Full-page at 768px (tablet)
- Full-page at 375px (mobile)
- Dark mode of each, if supported."
Do not begin the review until visuals are captured or provided. State this explicitly to the user when no automation succeeds — don't silently fall back to code-only review.
If the user declines to provide screenshots, run a code-only pass and clearly mark the report [CODE-ONLY REVIEW — visual issues not assessed] at the top so the limitation is explicit.
Knob awareness (CRAFT_LEVEL sets the bar for what counts as "needs work"):
CRAFT_LEVEL 3 → flag only anti-slop Critical items. Skip Minor polish.CRAFT_LEVEL 5-7 → flag Critical + Major. Mention Minor polish as optional.CRAFT_LEVEL 9+ → flag everything, including Minor polish and missing signature detail.
Run these lenses in order:
- Anti-Slop Test (from SKILL.md): flag every item present. Critical first (ALL CAPS, purple gradients, identical card grids, bounce easing, emoji icons, glassmorphism + neon). Then major (colored pills on trends, thick colored borders, uniform radii, gradient text, walls of text). Then minor (straight quotes, missing
tabular-nums, generic CTAs).
- Craft Test (from SKILL.md): where does the design fall short of "one accent, 3-5 placements; plain secondary text for comparisons; functional color only; every section earns its space"?
- Hierarchy: can the user tell what's primary, secondary, tertiary at a glance? Or does everything shout equally?
- Clarity: is the value prop legible in 5 seconds? Are CTAs specific (not "Learn more")?
- Signature detail: is there one memorable element that makes this feel designed, not assembled? If not, suggest one (motif, layout break, custom marker, distinctive hover).
- Inspiration gap — read
references/inspiration.md: which observed pattern from the archetypes / signature details applies here, and how does the current state diverge from it?
Output format — the Review Format table:
Prioritize by impact, not by file order. End with a one-paragraph summary of the top 3 changes that would raise this from "AI-generated" to "designed".
Do NOT edit code. This is a critique.
Close with a Craft Report (references/review.md → Craft Report) as the final wrapper around the findings table and top-3 summary — Checked names the lenses actually run (Anti-Slop, Craft Test, Hierarchy, Clarity, Signature, Inspiration gap) and at what CRAFT_LEVEL bar, Passed carries whatever held up under those lenses, Changed stays empty (critique doesn't edit), Left alone covers anything flagged but out of scope, Verdict is the one-sentence state. Produce it even when the surface passes clean — that's the validation the user is asking for.
Next step: /polish — apply the fixes this critique named (rung 1).
1---2name: critique3description: Design lens critique covering visual hierarchy, clarity, and anti-slop patterns — produces a findings table, no code edits unless asked. Use when the user wants a design review, says "what's wrong with this UI", or needs a second opinion before a handoff or presentation. Invoke when the user asks for critique on their UI, or mentions 'critique' alongside design / UI / frontend work.4---5
6<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
7
8**Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
9
10Critique the UI at `$ARGUMENTS` through a design lens. Load the `ui-craft` skill.
11
12## Step 0: Visual capture (mandatory)
13
14Code-only review is insufficient. Every audit/critique starts with the surface as the user sees it. Try the following in order; use the first one available:
15
161. **Playwright MCP** — if `playwright` MCP server is available, use it. Capture full-page screenshots at three viewports: desktop (1280×800), tablet (768×1024), mobile (375×812). Capture dark mode if the app supports it.
172. **Browser DevTools / Chrome MCP** — second choice; same viewport set.
183. **Other browser automation** (`agent-browser`, `cursor-ide-browser`) — third choice.
194. **Ask the user** — last resort. If no automation is available, request screenshots from the user before proceeding. Be specific:
20 - "Visual review needs screenshots. Please provide:
21 - Full-page at 1280px (desktop)
22 - Full-page at 768px (tablet)
23 - Full-page at 375px (mobile)
24 - Dark mode of each, if supported."
25
26Do not begin the review until visuals are captured or provided. State this explicitly to the user when no automation succeeds — don't silently fall back to code-only review.
27
28If the user declines to provide screenshots, run a code-only pass and clearly mark the report `[CODE-ONLY REVIEW — visual issues not assessed]` at the top so the limitation is explicit.
29
30**Knob awareness (CRAFT_LEVEL sets the bar for what counts as "needs work"):**
31- `CRAFT_LEVEL 3` → flag only anti-slop **Critical** items. Skip Minor polish.
32- `CRAFT_LEVEL 5-7` → flag Critical + Major. Mention Minor polish as optional.
33- `CRAFT_LEVEL 9+` → flag everything, including Minor polish and missing signature detail.
34
35**Run these lenses in order:**
36
371. **Anti-Slop Test** (from SKILL.md): flag every item present. Critical first (ALL CAPS, purple gradients, identical card grids, bounce easing, emoji icons, glassmorphism + neon). Then major (colored pills on trends, thick colored borders, uniform radii, gradient text, walls of text). Then minor (straight quotes, missing `tabular-nums`, generic CTAs).
382. **Craft Test** (from SKILL.md): where does the design fall short of "one accent, 3-5 placements; plain secondary text for comparisons; functional color only; every section earns its space"?
393. **Hierarchy**: can the user tell what's primary, secondary, tertiary at a glance? Or does everything shout equally?
404. **Clarity**: is the value prop legible in 5 seconds? Are CTAs specific (not "Learn more")?
415. **Signature detail**: is there one memorable element that makes this feel designed, not assembled? If not, suggest one (motif, layout break, custom marker, distinctive hover).
426. **Inspiration gap** — read `references/inspiration.md`: which observed pattern from the archetypes / signature details applies here, and how does the current state diverge from it?
43
44**Output format** — the Review Format table:
45
46| Before | After | Why |
47| --- | --- | --- |
48
49Prioritize by impact, not by file order. End with a one-paragraph summary of the **top 3 changes** that would raise this from "AI-generated" to "designed".
50
51Do NOT edit code. This is a critique.
52
53**Close with a Craft Report** (`references/review.md` → Craft Report) as the final wrapper around the findings table and top-3 summary — Checked names the lenses actually run (Anti-Slop, Craft Test, Hierarchy, Clarity, Signature, Inspiration gap) and at what CRAFT_LEVEL bar, Passed carries whatever held up under those lenses, Changed stays empty (critique doesn't edit), Left alone covers anything flagged but out of scope, Verdict is the one-sentence state. Produce it even when the surface passes clean — that's the validation the user is asking for.
54
55**Next step:** `/polish` — apply the fixes this critique named (rung 1).
educlopez