web-design-engineer Skill Review: 35,406 Bytes, Three Stop Signs, No Evals
The web-design-engineer SKILL.md is 35,406 bytes. At the usual bytes ÷ 4 rule of thumb that's about 8,852 tokens, and somewhere in them the agent is told three separate times to stop and wait for a human. It's the lead skill in ConardLi's garden-skills: 13,278 GitHub stars, MIT license, six skills in the repo. The README says it "dramatically improves the design quality of AI-generated HTML/CSS/JavaScript artifacts."
A source file can't prove output quality, so this review sticks to what can be checked: the instructions, the arithmetic on their size, and what people have written in public. We didn't run the skill through any model or API. Estimates are labelled as estimates.
TL;DR / Key Takeaways
- The web-design-engineer skill (manifest version 1.3.0) has a 35,406-byte SKILL.md, an estimated 8,852 tokens at bytes ÷ 4; its 455-character description, about 114 estimated tokens, is all that sits in context until the skill triggers.
- Its references/ folder adds 143,453 bytes (about 35,863 estimated tokens) across 8 guides and 25 style recipes plus an index; a landing-page path of SKILL.md, two guides and one recipe is 51,838 bytes, about 12,960 estimated tokens.
- The ConardLi/garden-skills repository has 13,278 stars, 1,571 forks, an MIT license and 6 SKILL.md files; skills.sh lists web-design-engineer at 8.7K installs, from that site's own telemetry.
- Public discussion is thin: 3 of the 19 issues ever opened in garden-skills touch this skill, all closed with a maintainer reply, and a Hacker News search found no relevant stories.
- The repository contains no evals (no file path includes "eval"), so the README's design-quality claim rests on a gallery of rendered recipes, not a benchmark.
What the skill actually says
It's a seven-step workflow, not a style guide: verify facts, decide whether to ask questions, gather design context, write a "Design Read" with five 1-to-10 dials, declare a design system, show a rough v0, then build and self-check. The tone is blunt from the first paragraph:
"The bar is ‘stunning,’ not ‘functional.’ Every pixel is intentional, every interaction is deliberate."
The pacing is the part worth stealing. Checkpoint 1 says to present the plan, then "actually wait — don't say it and immediately start coding." Checkpoint 2 ships a v0 before building further; checkpoint 3 pauses on non-trivial decisions. An anti-cliché table bans purple-pink-blue gradients, emoji as icons, left-border accent cards and Inter/Roboto/Arial display type unless the brand spec uses them. The placeholder rule fits on one line:
"A placeholder signals ‘real material needed here.’ A fake signals ‘I cut corners.’"
Name an anchor like Linear or Aesop and the agent reads one recipe file (palette, type, spacing, radius, shadow, motion). The three we measured run 2,796 to 3,174 bytes.
What it costs you in context
This is arithmetic, not a measurement: bytes ÷ 4 ≈ tokens, a rough rule that drifts on code and non-English text. Anyone can redo it from these sizes.
| File | Bytes | Est. tokens (bytes ÷ 4) | Loaded when |
|---|---|---|---|
SKILL.md | 35,406 | 8,852 | On trigger |
references/advanced-patterns.md | 14,722 | 3,681 | Slides, frames, charts |
references/design-directions.md | 14,105 | 3,526 | Vague brief |
references/critique-guide.md | 10,446 | 2,612 | Critique request |
references/failure-patterns.md | 7,119 | 1,780 | Marketing pages, redesigns |
references/design-calibration.md | 6,139 | 1,535 | Design Read and dials |
references/browser-acceptance.md | 4,643 | 1,161 | Explicit QA request only |
references/redesign-protocol.md | 4,181 | 1,045 | Existing UI |
references/block-library.md | 1,767 | 442 | Block lookup |
references/style-recipes/ (26 files) | 80,331 | 20,083 | One recipe on request (e.g. linear.md: 3,174 B, 794 tokens) |
| Everything | 178,859 | 44,715 | Upper bound; never loaded at once |
Idle, only the 455-character description is in context. Triggered, SKILL.md adds about 8,852. The trigger is wide: pages, dashboards, prototypes, slide decks, animations, UI mockups, visualizations, and agents/openai.yaml sets allow_implicit_invocation: true. Whether the text is re-sent on later turns depends on your harness; we haven't measured that.
Safety check
The skill directory holds markdown, one YAML file and one JSON manifest, no scripts. We read SKILL.md and three reference files in full and pattern-scanned the rest for shell commands, network calls, credential access and prompt-injection phrasing; hits were CDN URLs and a local dev command in the README. Nothing was executed. The other five skills in the repo ship .sh, .py, .js or .mjs files we did not review.
What the community reports
| Source | Date | What was reported | Link |
|---|---|---|---|
| GitHub #14, user Sweet-KK | 2026-05-19 | Redesigning an existing site's intro page, the result "still has an AI smell" (一股 AI 味). Maintainer: add constraints (audience, what to keep, what to forbid) or use the built-in templates. Closed. | #14 |
| GitHub #9, user Yinris05 | 2026-05-17 | Description over 1,024 characters, so Codex couldn't find the skill. Maintainer optimized it; we counted 455 characters now. Closed. | #9 |
| GitHub #20, user Similarityoung | 2026-06-06 | Installing one marketplace plugin installed every skill. Maintainer said fixed; we didn't re-test. Closed. | #20 |
| GitHub #16, user shesl-tinkerland | 2026-05-22 | Rebuilt a default-looking landing page with the workflow and credits design-system-before-code and the placeholder rule. The post also promotes the poster's own hosted demo. Screenshots unverified. Open, no replies. | #16 |
| skills.sh listing | 2026-10-26 | 8.7K installs, first seen Apr 22, 2026, Pass badges from Gen Agent Trust Hub, Socket and Snyk. Site telemetry: adoption, not quality. | skills.sh |
| Hacker News (Algolia) | 2026-10-26 | Searches for "garden-skills", "web-design-engineer", "ConardLi skills": no relevant stories. | search |
That's one direct quality complaint, one endorsement from someone promoting their own product, and an install counter. The maintainer's answer to #14, that the fix for "looks AI-made" is more input from you, is sensible and matches the skill's own advice to ask on vague briefs, but it sits awkwardly beside "dramatically improves." Eight of the 9 open issues have zero comments; none is a bug report against this skill. SKILL.md was last changed 2026-07-12; the repo was pushed 2026-10-25.
How to install it
Both routes come from the repo README. We copied them; we didn't run them.
# one skill, via the skills CLI
npx skills add ConardLi/garden-skills -s web-design-engineer
# Claude Code plugin marketplace
/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skillsLeave off -s and the first command installs all six skills, including the five that ship scripts.
Where it earns its keep, and where it doesn't
It earns its keep on greenfield pages and decks where the default is the gradient-and-Inter look; on vague briefs, where it offers three directions from different design schools instead of ten questions; and on redesigns, where redesign-protocol.md (4,181 bytes) classifies the job as extension, preserve or overhaul and protects routes, analytics and forms. The no-fake-data rule is one most design prompts never write.
It's a poor fit if you already have a mature design system, since the direction advisor, variant philosophy and Tweaks guidance still ride along in those 8,852 tokens. And it has real problems:
- A pointer to nothing. SKILL.md says twice (lines 238 and 438) that pinned React and Babel script tags with
integrityhashes live inreferences/advanced-patterns.md. We searched the skill's markdown outside the READMEs for "integrity", "react@", "react-dom" and "babel"; only SKILL.md matches. The one external script tag in advanced-patterns.md is Chart.js with no version. The agent has nothing to copy. - The stop signs assume a human. Fine in a chat. In a headless job, "actually wait" means a stalled run or a skipped step, and SKILL.md defines no fast path for a trivial edit.
- No evals. A checklist item reads "Visual quality at Dribbble / Behance showcase level," which nobody can verify. A gallery shows what recipes can look like, not that the workflow beats an unguided prompt.
- Small contradictions. Content Principles say not to add sections unilaterally; the Tweaks section says to add 1–2 creative tweaks by default. The manifest calls browser acceptance an "executable" harness, but
browser-acceptance.mdis a 4,643-byte prose checklist.
Worth a look if you generate a lot of front-end. Copy the checkpoint pacing and the anti-cliché list into your own prompt first, then decide whether 8,852 estimated tokens per trigger buys you the rest. We can't tell you it improves your output, and neither can the repo.
FAQ
What does the web-design-engineer skill do?
A seven-step workflow for building HTML, CSS, JavaScript and React artifacts: verify facts, gather context, write a Design Read with five 1-to-10 dials, declare a design system, show a v0, build, self-check. It ships a 35,406-byte SKILL.md, 8 reference guides and 25 style recipes plus an index, with no scripts.
How much context does web-design-engineer use?
Estimated at bytes divided by 4: SKILL.md is about 8,852 tokens and the 455-character description about 114. A landing-page path (SKILL.md, design-calibration, failure-patterns, one recipe) is 51,838 bytes, about 12,960 tokens. These are file-size arithmetic, not measured session costs.
Does web-design-engineer improve design quality?
No benchmark exists. The repository has no eval files, and the README rests on a gallery of rendered recipes. One GitHub user reported the output still looked AI-made on a redesign, and the maintainer suggested adding audience and style constraints. Public discussion is thin.
How do I install web-design-engineer?
Per the README: run npx skills add ConardLi/garden-skills -s web-design-engineer, or in Claude Code run /plugin marketplace add ConardLi/garden-skills and then /plugin install web-design-skills@garden-skills. Omitting -s installs all six skills, five of which ship scripts.
Skill by ConardLi, MIT licensed (the LICENSE file reads "Copyright (c) 2026" with no named holder). Source: github.com/ConardLi/garden-skills, reviewed at commit 2b9a893 on October 26, 2026. Quoted lines are short excerpts for review purposes. Stars, installs and issue activity change, and community reception shifts over time; check the links above for current numbers.