{"id":"8f8d4b88-ee3a-4d7c-90a7-ff58b9d75a84","shortId":"79zcgC","kind":"skill","title":"critique","tagline":"Run a 5-dimension expert design review on any HTML artifact in the\nproject — Philosophy / Visual hierarchy / Detail / Functionality /\nInnovation, each scored 0–10. Outputs a single self-contained HTML\nreport with a radar chart, evidence-backed scores, and three lists:\nKeep / Fix ","description":"# Critique Skill · 5 维度专家评审\n\nProduce a single-file HTML \"design review report\" that scores any\nartifact across 5 dimensions and proposes actionable fixes. Inspired by\nthe *huashu-design* expert-critique flow.\n\n## When to use\n\n- After the agent (or user) generates an artifact (deck / prototype /\n  landing page) and the user asks \"what's wrong with this?\" or\n  \"review this\"\n- As a self-check loop the agent can run on its own output **before**\n  emitting it\n- For comparing two variants of the same design\n\n## What you produce\n\nA single self-contained `<artifact type=\"text/html\">` review report\nincluding:\n\n1. **Header** — what artifact was reviewed, date, reviewer (\"OD ·\n   Critique skill\"), 1-line verdict\n2. **Radar chart** (inline SVG, no library) showing the 5 scores\n3. **Five dimension cards**, each with:\n   - Score 0–10 (with band: 0–4 *Broken* · 5–6 *Functional* · 7–8 *Strong*\n     · 9–10 *Exceptional*)\n   - 1-paragraph evidence (cite specific elements / files / lines)\n   - One Keep / Fix / Quick-win bullet\n4. **Combined action lists** at the bottom:\n   - **Keep** — what's working, don't touch\n   - **Fix** — P0 / P1 issues that are visually expensive\n   - **Quick wins** — 5–15 minute tweaks with disproportionate impact\n\n## The 5 dimensions\n\n> Each dimension is independent — a deck can be 9/10 on Innovation but\n> 4/10 on Hierarchy and the report should say so plainly. Don't average\n> away interesting failures.\n\n### 1. Philosophy consistency · 哲学一致性\n\n> Does the artifact pick a clear *direction* and stick to it through\n> every micro-decision (chrome / kicker / spacing / accent)?\n\n**Evidence to look for:**\n- Is there one declared design direction (e.g. Monocle / WIRED /\n  Kinfolk) or is it three styles in a trench coat?\n- Does the chrome / kicker vocabulary stay in one register, or does\n  page 3 say \"Vol.04 · Spring\" and page 7 say \"BUT WAIT 🔥\"?\n- Are accent / serif / mono used by the same rule throughout?\n\n**0–4** Three styles fighting each other. **5–6** One direction but\nhalf the elements drift. **7–8** Coherent, occasional drift on edge\npages. **9–10** Every element argues for the same thesis.\n\n### 2. Visual hierarchy · 视觉层级\n\n> Can a stranger figure out what to read first, second, third — without\n> being told?\n\n**Evidence to look for:**\n- Is the largest type clearly the most important thing on each page?\n- Do mono / serif / sans roles match the information's *role* (meta /\n  body / display)?\n- Lots of \"loud\" elements competing? Or a clear primary + secondary +\n  tertiary tier?\n\n**0–4** Everything shouts. **5–6** Hierarchy works on hero pages but\nbreaks on body. **7–8** Clear tiers, occasional collision. **9–10** Eye\nmoves with zero friction.\n\n### 3. Detail execution · 细节执行\n\n> The 90/10 stuff — alignment, leading, kerning at large sizes, image\n> framing, foot/chrome polish, edge-case spacing.\n\n**Evidence to look for:**\n- Big-stat pages: does the number sit on a baseline, or float?\n- Left/right column tops aligned in `grid-2-7-5`?\n- `frame-img` + caption proportions consistent across pages?\n- Mono labels: same letter-spacing? same uppercase rule?\n- Any orphaned `<br>` causing 1-character lines?\n\n**0–4** Visible tape and string. **5–6** Most pages clean, 1–2\nragged. **7–8** Polished, expert eye finds 2–3 misses. **9–10**\nMagazine-grade — the kind of detail that makes printed-by-hand\ntypographers nod.\n\n### 4. Functionality · 功能性\n\n> Does the artifact *work* for its intended use? Click targets, nav,\n> readability at presentation distance, copy-paste-ability for code\n> blocks, mobile fallback if relevant.\n\n**Evidence to look for:**\n- Deck: keyboard / wheel / touch nav all working? Iframe scroll\n  fallback?\n- Landing: CTA above the fold? Phone number tappable on mobile?\n- Runbook: code blocks copyable, mono font, no smart quotes?\n- Critical info readable from 4m away (large screen presentation)?\n\n**0–4** Visually fine but doesn't accomplish its job. **5–6** Core\nflow works, edge cases broken. **7–8** Robust through normal use.\n**9–10** Defensively engineered — handles iframe / fullscreen / paste\n/ print without flinching.\n\n### 5. Innovation · 创新性\n\n> Does this push past the median? Is there one element that makes\n> people lean in?\n\n**Evidence to look for:**\n- One *unexpected* layout / motion / typographic move that wasn't\n  required?\n- Or 100% safe — could be any deck/landing from any agency?\n- Is the innovation *earned* (matches direction) or grafted on\n  (random WebGL on a Kinfolk slow-living deck)?\n\n**0–4** Generic AI-slop median. **5–6** Competent and unmemorable.\n**7–8** One memorable moment, the rest solid. **9–10** Multiple\nmoves you'd steal — but each one obviously serves the thesis.\n\n## Scoring discipline (read before you score)\n\n- **Always cite evidence** — \"scored 4 because hero page mixes\n  Playfair display with Inter sans on the same line\" beats \"feels\n  inconsistent\". Numbers without evidence get rejected.\n- **Don't average up** — if Hierarchy is 5 because page 3 is broken,\n  don't bump to 7 because pages 1 and 2 are fine. The score is the\n  *worst sustained band*.\n- **Don't grade-inflate** — a 7 means *strong*, not *acceptable*. If\n  every score is 7+, you're not reviewing critically.\n- **Innovation is allowed to be low** — 5/10 is fine for production\n  deliverables. Don't punish *appropriate* conservatism.\n\n## Workflow\n\n### Step 1 — Acquire the artifact\n\nThree modes:\n\n1. **Project file** — user said \"review the index.html I just made\":\n   open it from the project folder.\n2. **Pasted HTML** — user pasted code in the chat: read it from the\n   message.\n3. **Generated by you in this turn** — you just emitted an artifact\n   above and want to self-critique: re-read your own `<artifact>`.\n\nIf multiple HTML files exist, ask which one (don't review all).\n\n### Step 2 — Read enough to score\n\nSkim the entire `<style>`, then read 6–8 representative content\nblocks. **Do not score from frontmatter alone.** The score depends on\n*executed* design, not declared intent.\n\n### Step 3 — Score with evidence\n\nFor each of the 5 dimensions, write the score and a 30–80 word\nevidence paragraph that names specific elements. Use line numbers,\nclass names, page numbers.\n\nExample:\n```\nDimension: Detail execution\nScore: 6 / 10\nEvidence: Stat-cards on page 3 align cleanly (grid-6, 3×2), but on\npage 8 the right column foot sits 2vh higher than the left because\n.callout has 3vh top margin while the figure doesn't. Image captions\nuse mono on page 5 but sans on page 7 — pick one.\n```\n\n### Step 4 — Build the action lists\n\nAggregate the 5 evidence paragraphs into:\n\n- **Keep** (3–5 bullets) — concrete things working that the user must\n  not break in the next iteration. Cite by class / page / element.\n- **Fix** (3–6 bullets) — must-do, ordered by *visual cost saved per\n  minute spent*. Each bullet ≤ 1 sentence.\n- **Quick wins** (3–5 bullets) — 5–15 minutes each, high\n  signal-to-noise (e.g. \"swap `display:flex` for `grid` on page 4 to\n  fix the column drift\").\n\n### Step 5 — Emit the report HTML\n\nBuild a single file:\n\n- Header: artifact name + reviewer credit + date\n- Big radar chart (SVG)\n- 5 dimension cards in a 1-column or 2-column grid\n- Three action lists at the bottom with checkbox affordance\n\nUse the active DESIGN.md tokens if one exists; otherwise default to a\nneutral light theme (off-white background, near-black text, one accent\nfor radar fill).\n\n## Output contract\n\n```\n<artifact identifier=\"critique-<artifact-slug>\" type=\"text/html\" title=\"Critique · <Artifact Title>\">\n<!doctype html>\n<html>...</html>\n</artifact>\n```\n\nOne sentence before the artifact (\"Reviewed X across 5 dimensions, see\nreport below.\") and **stop after `</artifact>`** — do not paraphrase\nthe report in chat; the user will read the artifact.\n\n## Hard rules\n\n- **5 scores, every time** — partial reports (e.g. only 3 dimensions)\n  are not allowed.\n- **Evidence per score** — no \"feels off\" / \"needs work\". If you\n  can't cite an element, the score is not justified.\n- **Don't grade-inflate** — overall mean above 8 is suspicious; check\n  yourself.\n- **Don't review your own artifact in the same turn** — the user\n  needs to see it first. Self-critique only on explicit request\n  (\"now critique what you just made\").\n- **Single-file HTML only** — no external CSS/JS. Inline everything.\n- **Radar chart is mandatory** — gives the report a recognizable\n  silhouette and lets the user spot weak axes at a glance.","tags":["critique","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents"],"capabilities":["skill","source-nexu-io","skill-critique","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/critique","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (8,396 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:18.907Z","embedding":null,"createdAt":"2026-05-01T18:52:31.750Z","updatedAt":"2026-05-11T06:52:18.907Z","lastSeenAt":"2026-05-11T06:52:18.907Z","tsv":"'-2':512 '-5':514 '-7':513 '0':24,176,180,348,440,538,649,744 '1':144,155,192,269,535,549,830,882,888 '10':25,177,190,373,462,562,674,765 '100':717 '15':232 '2':158,381,550,558,832,905,956 '3':169,328,468,559,820,919 '4':181,207,349,441,539,578,650,745,788 '4/10':253 '4m':644 '5':4,49,65,167,183,231,239,355,444,544,659,684,751,817 '5/10':869 '6':184,356,445,545,660,752 '7':186,334,364,455,552,667,756,827,848,857 '8':187,365,456,553,668,757 '9':189,372,461,561,673,764 '9/10':249 '90/10':473 'abil':599 'accent':292,339 'accept':852 'accomplish':656 'acquir':883 'across':64,521 'action':69,209 'agenc':725 'agent':86,115 'ai':748 'ai-slop':747 'align':475,509 'allow':865 'alway':784 'appropri':878 'argu':376 'artifact':12,63,91,147,275,583,885,930 'ask':99,948 'averag':265,812 'away':266,645 'back':40 'band':179,841 'baselin':503 'beat':802 'big':494 'big-stat':493 'block':602,633 'bodi':426,454 'bottom':213 'break':452 'broken':182,666,822 'bullet':206 'bump':825 'caption':518 'card':172 'case':487,665 'caus':534 'charact':536 'chart':37,160 'chat':913 'check':112 'chrome':289,318 'cite':195,785 'clean':548 'clear':278,407,435,457 'click':589 'coat':315 'code':601,632,910 'coher':366 'collis':460 'column':507 'combin':208 'compar':126 'compet':432,753 'conservat':879 'consist':271,520 'contain':31,140 'copi':597 'copy-paste-':596 'copyabl':634 'core':661 'could':719 'critic':640,862 'critiqu':1,47,79,153,937 'cta':622 'd':769 'date':150 'decis':288 'deck':92,246,611,743 'deck/landing':722 'declar':300 'defens':675 'deliver':874 'design':7,57,76,132,301 'detail':19,469,569 'dimens':5,66,171,240,242 'direct':279,302,358,731 'disciplin':779 'display':427,794 'disproportion':236 'distanc':595 'doesn':654 'drift':363,368 'e.g':303 'earn':729 'edg':370,486,664 'edge-cas':485 'element':197,362,375,431,696 'emit':123,928 'engin':676 'enough':958 'entir':963 'everi':285,374,854 'everyth':442 'evid':39,194,293,399,489,607,702,786,807 'evidence-back':38 'except':191 'execut':470 'exist':947 'expens':228 'expert':6,78,555 'expert-critiqu':77 'eye':463,556 'failur':268 'fallback':604,620 'feel':803 'fight':352 'figur':388 'file':55,198,890,946 'find':557 'fine':652,834,871 'first':393 'five':170 'fix':46,70,202,221 'flinch':683 'float':505 'flow':80,662 'fold':625 'folder':904 'font':636 'foot/chrome':483 'frame':482,516 'frame-img':515 'friction':467 'fullscreen':679 'function':20,185,579 'generat':89,920 'generic':746 'get':808 'grade':565,845 'grade-infl':844 'graft':733 'grid':511 'half':360 'hand':575 'handl':677 'header':145 'hero':449,790 'hierarchi':18,255,383,446,815 'html':11,32,56,907,945 'huashu':75 'huashu-design':74 'ifram':618,678 'imag':481 'img':517 'impact':237 'import':410 'includ':143 'inconsist':804 'independ':244 'index.html':895 'inflat':846 'info':641 'inform':422 'inlin':161 'innov':21,251,685,728,863 'inspir':71 'intend':587 'inter':796 'interest':267 'issu':224 'job':658 'keep':45,201,214 'kern':477 'keyboard':612 'kicker':290,319 'kind':567 'kinfolk':306,739 'label':524 'land':94,621 'larg':479,646 'largest':405 'layout':708 'lead':476 'lean':700 'left/right':506 'letter':527 'letter-spac':526 'librari':164 'line':156,199,537,801 'list':44,210 'live':742 'look':295,401,491,609,704 'loop':113 'lot':428 'loud':430 'low':868 'made':898 'magazin':564 'magazine-grad':563 'make':571,698 'match':420,730 'mean':849 'median':692,750 'memor':759 'messag':918 'meta':425 'micro':287 'micro-decis':286 'minut':233 'miss':560 'mix':792 'mobil':603,630 'mode':887 'moment':760 'mono':341,416,523,635 'monocl':304 'motion':709 'move':464,711,767 'multipl':766,944 'nav':591,615 'nod':577 'normal':671 'number':499,627,805 'obvious':774 'occasion':367,459 'od':152 'one':200,299,323,357,695,706,758,773,950 'open':899 'orphan':533 'output':26,121 'p0':222 'p1':223 'page':95,327,333,371,414,450,496,522,547,791,819,829 'paragraph':193 'past':598,680,690,906,909 'peopl':699 'philosophi':16,270 'phone':626 'pick':276 'plain':262 'playfair':793 'polish':484,554 'present':594,648 'primari':436 'print':573,681 'printed-by-hand':572 'produc':51,135 'product':873 'project':15,889,903 'proport':519 'propos':68 'prototyp':93 'punish':877 'push':689 'quick':204,229 'quick-win':203 'quot':639 'radar':36,159 'rag':551 'random':735 're':859,939 're-read':938 'read':392,780,914,940,957 'readabl':592,642 'regist':324 'reject':809 'relev':606 'report':33,59,142,258 'requir':715 'rest':762 'review':8,58,106,141,149,151,861,893,953 'robust':669 'role':419,424 'rule':346,531 'run':2,117 'runbook':631 'safe':718 'said':892 'san':418,797 'say':260,329,335 'score':23,41,61,168,175,778,783,787,836,855,960 'screen':647 'scroll':619 'second':394 'secondari':437 'self':30,111,139,936 'self-check':110 'self-contain':29,138 'self-critiqu':935 'serif':340,417 'serv':775 'shout':443 'show':165 'singl':28,54,137 'single-fil':53 'sit':500 'size':480 'skill':48,154 'skill-critique' 'skim':961 'slop':749 'slow':741 'slow-liv':740 'smart':638 'solid':763 'source-nexu-io' 'space':291,488,528 'specif':196 'spring':331 'stat':495 'stay':321 'steal':770 'step':881,955 'stick':281 'stranger':387 'string':543 'strong':188,850 'stuff':474 'style':311,351 'sustain':840 'svg':162 'tape':541 'tappabl':628 'target':590 'tertiari':438 'thesi':380,777 'thing':411 'third':395 'three':43,310,350,886 'throughout':347 'tier':439,458 'told':398 'top':508 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'touch':220,614 'trench':314 'turn':925 'tweak':234 'two':127 'type':406 'typograph':576,710 'unexpect':707 'unmemor':755 'uppercas':530 'use':83,342,588,672 'user':88,98,891,908 'variant':128 'verdict':157 'visibl':540 'visual':17,227,382,651 'vocabulari':320 'vol.04':330 'wait':337 'want':933 'wasn':713 'webgl':736 'wheel':613 'win':205,230 'wire':305 'without':396,682,806 'work':217,447,584,617,663 'workflow':880 'worst':839 'wrong':102 'zero':466 '创新性':686 '功能性':580 '哲学一致性':272 '细节执行':471 '维度专家评审':50 '视觉层级':384","prices":[{"id":"c8f11d1c-09d3-47b1-bc9e-185d3568037c","listingId":"8f8d4b88-ee3a-4d7c-90a7-ff58b9d75a84","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-01T18:52:31.750Z"}],"sources":[{"listingId":"8f8d4b88-ee3a-4d7c-90a7-ff58b9d75a84","source":"github","sourceId":"nexu-io/open-design/critique","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/critique","isPrimary":false,"firstSeenAt":"2026-05-01T18:52:31.750Z","lastSeenAt":"2026-05-11T06:52:18.907Z"},{"listingId":"8f8d4b88-ee3a-4d7c-90a7-ff58b9d75a84","source":"skills_sh","sourceId":"nexu-io/open-design/critique","sourceUrl":"https://skills.sh/nexu-io/open-design/critique","isPrimary":true,"firstSeenAt":"2026-05-07T20:42:42.322Z","lastSeenAt":"2026-05-07T22:41:44.943Z"}],"details":{"listingId":"8f8d4b88-ee3a-4d7c-90a7-ff58b9d75a84","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"critique","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"0e8d6ccfd1769820b10916083ca152d3a250b4a4","skill_md_path":"skills/critique/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/critique"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"critique","description":"Run a 5-dimension expert design review on any HTML artifact in the\nproject — Philosophy / Visual hierarchy / Detail / Functionality /\nInnovation, each scored 0–10. Outputs a single self-contained HTML\nreport with a radar chart, evidence-backed scores, and three lists:\nKeep / Fix / Quick-wins. Use when the brief asks for a \"design\nreview\", \"design critique\", \"5 维度评审\", \"design audit\", or \"what's\nwrong with my design\"."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/critique"},"updatedAt":"2026-05-11T06:52:18.907Z"}}