New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Critique

by sanqiufong in sanqiufong/slides-from-anything

Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10.

Apache-2.0Auto-check passedMedia & Creative

Install Critique

skills CLI
$ npx skills add sanqiufong/slides-from-anything --skill critique -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sanqiufong/slides-from-anything critique --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sanqiufong/slides-from-anything.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/critique .claude/skills/critique && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
critique
GitHub stars
132
Used in
1 other repo
Token cost
~2.4k tokens
SKILL.md length
1,151 words
Files
2
Skills in repo
48
Repo updated
First seen
Licence
Apache-2.0

At a glance

Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10.

  • Works in 10 steps: Philosophy consistency · 哲学一致性 → Visual hierarchy · 视觉层级 → Detail execution · 细节执行 → …
  • The brief asks for a design review
  • SKILL.md covers When to use, What you produce, The 5 dimensions and Scoring discipline (read…, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Critique is an agent skill from sanqiufong/slides-from-anything. Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file.

It sits in Media & Creative, covering Design review and critique and HTML artifacts. The repository describes itself as: Turn anything into slides. The licence is Apache-2.0.

When your agent uses it

  • The brief asks for a design review
  • Design critique
  • Whats wrong with my design

Example prompts

  • “design review”
  • “design critique”
  • “5 维度评审”
  • “/critique”

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. Philosophy consistency · 哲学一致性
  2. Visual hierarchy · 视觉层级
  3. Detail execution · 细节执行
  4. Functionality · 功能性
  5. Innovation · 创新性
  6. Acquire the artifact
  7. Read enough to score
  8. Score with evidence
  9. Build the action lists
  10. Emit the report HTML

What it can do on your machine

Read from SKILL.md and the folder at commit 65da4ac. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Critique loads about 2.4k tokens when it runs. Until then it costs about 107 tokens; SKILL.md has 1,151 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~107
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sanqiufong/slides-from-anything at commit 65da4ac, republished under its Apache-2.0 licence (© sanqiufong). 1,151 words, ~2,363 tokens.

Download SKILL.mdSave it as .claude/skills/critique/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
critique
description
Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".
triggers
critique, design review, design audit, 5 维度评审, 5-dim review, audit my design, review my deck, review my landing page, 评审, 复盘
od.mode
prototype
od.platform
desktop
od.scenario
design
od.upstream
https://github.com/alchaincyf/huashu-design
od.example_prompt
Run a 5-dimension critique on the magazine-web-ppt deck I just generated — score philosophy / hierarchy / detail / function / innovation, give me Keep / Fix /…

Critique Skill · 5 维度专家评审

Produce a single-file HTML "design review report" that scores any artifact across 5 dimensions and proposes actionable fixes. Inspired by the huashu-design expert-critique flow.

When to use

  • After the agent (or user) generates an artifact (deck / prototype / landing page) and the user asks "what's wrong with this?" or "review this"
  • As a self-check loop the agent can run on its own output before emitting it
  • For comparing two variants of the same design

What you produce

A single self-contained <artifact type="text/html"> review report including:

  1. Header — what artifact was reviewed, date, reviewer ("OD · Critique skill"), 1-line verdict
  2. Radar chart (inline SVG, no library) showing the 5 scores
  3. Five dimension cards, each with:
    • Score 0–10 (with band: 0–4 Broken · 5–6 Functional · 7–8 Strong · 9–10 Exceptional)
    • 1-paragraph evidence (cite specific elements / files / lines)
    • One Keep / Fix / Quick-win bullet
  4. Combined action lists at the bottom:
    • Keep — what's working, don't touch
    • Fix — P0 / P1 issues that are visually expensive
    • Quick wins — 5–15 minute tweaks with disproportionate impact

The 5 dimensions

Each dimension is independent — a deck can be 9/10 on Innovation but 4/10 on Hierarchy and the report should say so plainly. Don't average away interesting failures.

1. Philosophy consistency · 哲学一致性

Does the artifact pick a clear direction and stick to it through every micro-decision (chrome / kicker / spacing / accent)?

Evidence to look for:

  • Is there one declared design direction (e.g. Monocle / WIRED / Kinfolk) or is it three styles in a trench coat?
  • Does the chrome / kicker vocabulary stay in one register, or does page 3 say "Vol.04 · Spring" and page 7 say "BUT WAIT 🔥"?
  • Are accent / serif / mono used by the same rule throughout?

0–4 Three styles fighting each other. 5–6 One direction but half the elements drift. 7–8 Coherent, occasional drift on edge pages. 9–10 Every element argues for the same thesis.

2. Visual hierarchy · 视觉层级

Can a stranger figure out what to read first, second, third — without being told?

Evidence to look for:

  • Is the largest type clearly the most important thing on each page?
  • Do mono / serif / sans roles match the information's role (meta / body / display)?
  • Lots of "loud" elements competing? Or a clear primary + secondary + tertiary tier?

0–4 Everything shouts. 5–6 Hierarchy works on hero pages but breaks on body. 7–8 Clear tiers, occasional collision. 9–10 Eye moves with zero friction.

3. Detail execution · 细节执行

The 90/10 stuff — alignment, leading, kerning at large sizes, image framing, foot/chrome polish, edge-case spacing.

Evidence to look for:

  • Big-stat pages: does the number sit on a baseline, or float?
  • Left/right column tops aligned in grid-2-7-5?
  • frame-img + caption proportions consistent across pages?
  • Mono labels: same letter-spacing? same uppercase rule?
  • Any orphaned <br> causing 1-character lines?

0–4 Visible tape and string. 5–6 Most pages clean, 1–2 ragged. 7–8 Polished, expert eye finds 2–3 misses. 9–10 Magazine-grade — the kind of detail that makes printed-by-hand typographers nod.

4. Functionality · 功能性

Does the artifact work for its intended use? Click targets, nav, readability at presentation distance, copy-paste-ability for code blocks, mobile fallback if relevant.

Evidence to look for:

  • Deck: keyboard / wheel / touch nav all working? Iframe scroll fallback?
  • Landing: CTA above the fold? Phone number tappable on mobile?
  • Runbook: code blocks copyable, mono font, no smart quotes?
  • Critical info readable from 4m away (large screen presentation)?

0–4 Visually fine but doesn't accomplish its job. 5–6 Core flow works, edge cases broken. 7–8 Robust through normal use. 9–10 Defensively engineered — handles iframe / fullscreen / paste / print without flinching.

5. Innovation · 创新性

Does this push past the median? Is there one element that makes people lean in?

Evidence to look for:

  • One unexpected layout / motion / typographic move that wasn't required?
  • Or 100% safe — could be any deck/landing from any agency?
  • Is the innovation earned (matches direction) or grafted on (random WebGL on a Kinfolk slow-living deck)?

0–4 Generic AI-slop median. 5–6 Competent and unmemorable. 7–8 One memorable moment, the rest solid. 9–10 Multiple moves you'd steal — but each one obviously serves the thesis.

Show full SKILL.md (493 more words)Show less

Scoring discipline (read before you score)

  • Always cite evidence — "scored 4 because hero page mixes Playfair display with Inter sans on the same line" beats "feels inconsistent". Numbers without evidence get rejected.
  • Don't average up — if Hierarchy is 5 because page 3 is broken, don't bump to 7 because pages 1 and 2 are fine. The score is the worst sustained band.
  • Don't grade-inflate — a 7 means strong, not acceptable. If every score is 7+, you're not reviewing critically.
  • Innovation is allowed to be low — 5/10 is fine for production deliverables. Don't punish appropriate conservatism.

Workflow

Step 1 — Acquire the artifact

Three modes:

  1. Project file — user said "review the index.html I just made": open it from the project folder.
  2. Pasted HTML — user pasted code in the chat: read it from the message.
  3. Generated by you in this turn — you just emitted an artifact above and want to self-critique: re-read your own <artifact>.

If multiple HTML files exist, ask which one (don't review all).

Step 2 — Read enough to score

Skim the entire <style>, then read 6–8 representative content blocks. Do not score from frontmatter alone. The score depends on executed design, not declared intent.

Step 3 — Score with evidence

For each of the 5 dimensions, write the score and a 30–80 word evidence paragraph that names specific elements. Use line numbers, class names, page numbers.

Example:

Dimension: Detail execution
Score: 6 / 10
Evidence: Stat-cards on page 3 align cleanly (grid-6, 3×2), but on
page 8 the right column foot sits 2vh higher than the left because
.callout has 3vh top margin while the figure doesn't. Image captions
use mono on page 5 but sans on page 7 — pick one.
Step 4 — Build the action lists

Aggregate the 5 evidence paragraphs into:

  • Keep (3–5 bullets) — concrete things working that the user must not break in the next iteration. Cite by class / page / element.
  • Fix (3–6 bullets) — must-do, ordered by visual cost saved per minute spent. Each bullet ≤ 1 sentence.
  • Quick wins (3–5 bullets) — 5–15 minutes each, high signal-to-noise (e.g. "swap display:flex for grid on page 4 to fix the column drift").
Step 5 — Emit the report HTML

Build a single file:

  • Header: artifact name + reviewer credit + date
  • Big radar chart (SVG)
  • 5 dimension cards in a 1-column or 2-column grid
  • Three action lists at the bottom with checkbox affordance

Use the active DESIGN.md tokens if one exists; otherwise default to a neutral light theme (off-white background, near-black text, one accent for radar fill).

Output contract

<artifact identifier="critique-<artifact-slug>" type="text/html" title="Critique · <Artifact Title>">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact ("Reviewed X across 5 dimensions, see report below.") and stop after </artifact> — do not paraphrase the report in chat; the user will read the artifact.

Hard rules

  • 5 scores, every time — partial reports (e.g. only 3 dimensions) are not allowed.
  • Evidence per score — no "feels off" / "needs work". If you can't cite an element, the score is not justified.
  • Don't grade-inflate — overall mean above 8 is suspicious; check yourself.
  • Don't review your own artifact in the same turn — the user needs to see it first. Self-critique only on explicit request ("now critique what you just made").
  • Single-file HTML only — no external CSS/JS. Inline everything.
  • Radar chart is mandatory — gives the report a recognizable silhouette and lets the user spot weak axes at a glance.

© sanqiufong, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in skills/critique of sanqiufong/slides-from-anything.

  • SKILL.md
  • example.html

Open the folder on GitHubat commit 65da4ac

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in sanqiufong/slides-from-anything, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Critique next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Critique compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Critique this skillsanqiufong/slides-from-anything1321 repos~2.4kAutomated safety check: PassApache-2.0
Reimagine It AuditKayforkind/reimagine-it205—~756Automated safety check: PassMIT
Visualizedisplay-dev/visualize138—~7.4kAutomated safety check: PassMIT
Web Design EngineerConardLi/garden-skills13k—~8.8kAutomated safety check: PassMIT
Frontend DesignCitrus-bit/Anaxa120—~1.9kAutomated safety check: PassApache-2.0
SN Motion HTMLOpenSenseNova/SenseNova-Skills5.7k—~2.2kAutomated safety check: NotesMIT

Similar skills

  • Reimagine It Audit

    Kayforkind/reimagine-it

    Design Health — runs 19 deterministic quality checks on HTML output.

    205 GitHub stars~756 tokensUpdated 4 days ago
    Media & CreativeAuto-check passed

  • Visualize

    display-dev/visualize

    Generate beautiful, on-brand HTML artifacts — reports, diagrams, diff reviews, slide decks, plans, recaps, dashboards.

    138 GitHub stars~7.4k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Web Design Engineer

    ConardLi/garden-skills

    Builds polished browser-rendered HTML, CSS, JavaScript and React pages, dashboards, prototypes and slide decks, aiming for a stunning rather than merely functional result.

    13k GitHub stars~8.8k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Frontend Design

    Citrus-bit/Anaxa

    Create distinctive, production-grade frontend interfaces with high design quality for new standalone web artifacts, pages, posters, dashboards, React components, HTML/CSS layouts, or clearly…

    120 GitHub stars~1.9k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • SN Motion HTML

    OpenSenseNova/SenseNova-Skills

    Builds HTML stories where one continuous camera journey advances with page progress, using researched structure, AI stills, Seedance video clips and browser QA.

    5.7k GitHub stars~2.2k tokensUpdated 2 days ago
    Media & CreativeAuto-check: notes

  • Math Explainer

    GordenSun/mathVideoMaker

    Generate math explanation videos (animated with Manim) and interactive web pages from a user's request.

    290 GitHub starsUsed in 1 repo~2.4k tokens
    Media & CreativeAuto-check passed

More from sanqiufong/slides-from-anything

All 48 skills in this repo

  • PPTX HTML Fidelity Audit

    sanqiufong/slides-from-anything

    Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with…

    132 GitHub starsUsed in 1 repo~3.5k tokens
    Auto-check passed

  • Mobile App

    sanqiufong/slides-from-anything

    A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page.

    132 GitHub starsUsed in 1 repo~942 tokens
    Auto-check passed

  • Replit Deck

    sanqiufong/slides-from-anything

    Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery.

    132 GitHub starsUsed in 1 repo~2.9k tokens
    Auto-check passed

  • Live Artifact

    sanqiufong/slides-from-anything

    Create refreshable, auditable Open Design artifacts backed by connector or local data.

    132 GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Open Design Landing

    sanqiufong/slides-from-anything

    Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own…

    132 GitHub starsUsed in 1 repo~3.3k tokens
    Auto-check passed

  • Web Prototype

    sanqiufong/slides-from-anything

    General-purpose desktop web prototype. An agent skill from sanqiufong/slides-from-anything.

    132 GitHub starsUsed in 3 repos~1k tokens
    Auto-check passed

Categories

Questions about Critique

What does Critique do?

Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Critique is an agent skill from sanqiufong/slides-from-anything. Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10.

When should I use Critique?

Critique fits situations like: the brief asks for a design review; design critique; whats wrong with my design.

How do I install Critique in Claude Code?

Run `npx skills add sanqiufong/slides-from-anything --skill critique -a claude-code`. Or copy the skill folder (skills/critique in sanqiufong/slides-from-anything) into .claude/skills/critique in your project. Claude Code loads it when a task matches its description.

How do I install Critique in Codex?

Run `npx skills add sanqiufong/slides-from-anything --skill critique -a codex`. Or copy the skill folder (skills/critique in sanqiufong/slides-from-anything) into .agents/skills/critique in your project. Codex loads it when a task matches its description.

Can I use Critique in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sanqiufong/slides-from-anything --skill critique -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/critique, .gemini/skills/critique, .github/skills/critique and .opencode/skills/critique in your project.

What does Critique need to run?

SKILL.md names no scripts, command-line tools or credentials: Critique is instructions for the agent only.

Does Critique access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Critique safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Critique use?

Critique is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Critique use?

About 2.4k tokens (SKILL.md is roughly 9.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Critique?

Skills that share tags, products or a category with Critique: Reimagine It Audit (Kayforkind/reimagine-it, 205 stars), Visualize (display-dev/visualize, 138 stars), Web Design Engineer (ConardLi/garden-skills, 13k stars) and Frontend Design (Citrus-bit/Anaxa, 120 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Critique?

sanqiufong (a GitHub user) maintains it in sanqiufong/slides-from-anything, which has 132 GitHub stars. The repository holds 48 skills in this directory. The repository was last updated on October 10, 2026.

Source: sanqiufong/slides-from-anything on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.