critique

Name: critique
Author: educlopez

206stars8forks

How to install critique?

educlopez/ui-craft/critique

$npx -y skills add educlopez/ui-craft --skill critique

Installs into the current project.

Summary

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 w

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	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.
4
5	Critique the UI at the target the user described through a design lens. Load the `ui-craft` skill.
6
7	## Step 0: Visual capture (mandatory)
8
9	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:
10
11	1. 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.
12	2. Browser DevTools / Chrome MCP — second choice; same viewport set.
13	3. Other browser automation (`agent-browser`, `cursor-ide-browser`) — third choice.
14	4. Ask the user — last resort. If no automation is available, request screenshots from the user before proceeding. Be specific:
15	- "Visual review needs screenshots. Please provide:
16	- Full-page at 1280px (desktop)
17	- Full-page at 768px (tablet)
18	- Full-page at 375px (mobile)
19	- Dark mode of each, if supported."
20
21	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.
22
23	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.
24
25	Knob awareness (CRAFT_LEVEL sets the bar for what counts as "needs work"):
26	- `CRAFT_LEVEL 3` → flag only anti-slop Critical items. Skip Minor polish.
27	- `CRAFT_LEVEL 5-7` → flag Critical + Major. Mention Minor polish as optional.
28	- `CRAFT_LEVEL 9+` → flag everything, including Minor polish and missing signature detail.
29
30	Run these lenses in order:
31
32	1. 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).
33	2. 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"?
34	3. Hierarchy: can the user tell what's primary, secondary, tertiary at a glance? Or does everything shout equally?
35	4. Clarity: is the value prop legible in 5 seconds? Are CTAs specific (not "Learn more")?
36	5. 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).
37	6. 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?
38
39	Output format — the Review Format table:
40
41	\| Before \| After \| Why \|
42	\| --- \| --- \| --- \|
43
44	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".
45
46	Do NOT edit code. This is a critique.

People who liked this also viewed

6 picks

Type

critique

206stars8forks

View on GitHub

How to install critique?

educlopez/ui-craft/critique

$npx -y skills add educlopez/ui-craft --skill critique

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->
2
3	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.
4
5	Critique the UI at the target the user described through a design lens. Load the `ui-craft` skill.
6
7	## Step 0: Visual capture (mandatory)
8
9	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:
10
11	1. 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.
12	2. Browser DevTools / Chrome MCP — second choice; same viewport set.
13	3. Other browser automation (`agent-browser`, `cursor-ide-browser`) — third choice.
14	4. Ask the user — last resort. If no automation is available, request screenshots from the user before proceeding. Be specific:
15	- "Visual review needs screenshots. Please provide:
16	- Full-page at 1280px (desktop)
17	- Full-page at 768px (tablet)
18	- Full-page at 375px (mobile)
19	- Dark mode of each, if supported."
20
21	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.
22
23	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.
24
25	Knob awareness (CRAFT_LEVEL sets the bar for what counts as "needs work"):
26	- `CRAFT_LEVEL 3` → flag only anti-slop Critical items. Skip Minor polish.
27	- `CRAFT_LEVEL 5-7` → flag Critical + Major. Mention Minor polish as optional.
28	- `CRAFT_LEVEL 9+` → flag everything, including Minor polish and missing signature detail.
29
30	Run these lenses in order:
31
32	1. 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).
33	2. 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"?
34	3. Hierarchy: can the user tell what's primary, secondary, tertiary at a glance? Or does everything shout equally?
35	4. Clarity: is the value prop legible in 5 seconds? Are CTAs specific (not "Learn more")?
36	5. 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).
37	6. 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?
38
39	Output format — the Review Format table:
40
41	\| Before \| After \| Why \|
42	\| --- \| --- \| --- \|
43
44	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".
45
46	Do NOT edit code. This is a critique.

People who liked this also viewed

6 picks

Type