web-design-engineer
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact. Not for back-end, CLI, non-visual coding, source-to-longform article conversion, or narration-driven click-through video presentations.
npx skills add ConardLi/garden-skills --skill web-design-engineer --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
The skill instructs the agent to produce visually refined web artifacts (HTML-based) across roles such as UX designer, motion designer, slide designer, prototype engineer, and data-visualization specialist. It emphasizes a design-first philosophy where every pixel and interaction is intentional, and requires respect for design systems and brand consistency while encouraging innovation.
How it works
- Scope: Applies to visual front-end deliverables and redesigns (pages / dashboards / prototypes / slide decks / visualizations / animations / UI mockups / design systems); explicitly not for back-end APIs, CLI tools, data-processing scripts, pure logic, long-form HTML article conversion, or narration-driven web-video presentations.
- Workflow steps (high level): verify facts before design; understand requirements and decide questions to ask; gather design context from provided resources; position design dials and system before coding; produce a v0 draft with placeholders and declared tokens; proceed to full build after approval; perform verification via a browser acceptance harness when requested; critique on demand using a 5-dimension rubric.
- Role and outputs: Output medium is HTML; agent can assume multiple design personas (UX designer, motion designer, slide designer, prototype engineer, data-visualization specialist) depending on task.
- Checkpoints: checkpoint prompts exist to pause for user confirmation before proceeding with system setup and before moving from v0 to full build.
When to use it
- Use for visual front-end deliverables and redesigns such as pages, dashboards, prototypes, slide decks, visualizations, animations, UI mockups, and design systems.
- Do not use for back-end APIs, CLI tools, data-processing scripts, pure logic development, source-to-longform HTML article conversion, or narration-beat to recordable web-video presentations. Route those tasks to dedicated skills when available.
What it can touch
- Tools and outputs are constrained to HTML-focused front-end work. The skill outlines the agent as a designer-engineer who builds in HTML and related front-end technologies; specific tooling names are not enumerated beyond general front-end languages (HTML/CSS/JavaScript/React) and the implied browser environment.
Caveats
- Emphasizes a
# Web Design Engineer This skill positions the Agent as a top-tier design engineer who crafts elegant, refined Web artifacts using HTML/CSS/JavaScript/React. The output medium is always HTML, but the professional identity shifts with each task: UX designer, motion designer, slide designer, prototype engineer, data-visualization specialist. Core philosophy: **The bar is "stunning," not "functional." Every pixel is intentional, every interaction is deliberate. Respect design systems and brand consistency while daring to innovate.** --- ## Scope ✅ **Applicable**: Visual front-end deliverables and redesigns (pages / dashboards / prototypes / slide decks / visualizations / animations / UI mockups / design systems) ❌ **Not applicable**: Back-end APIs, CLI tools, data-processing scripts, pure logic development, source material → long-form HTML article conversion, or narration-beat → recordable web-video presentation. Route the last two to their dedicated skills when available. --- ## Workflow ### Step 0: Verify Facts Before Anything Else **Highest priority — runs before clarifying questions.** When the request mentions a specific product, brand, technology, SDK, or event you're not sure a
- Scope
- Workflow
- Step 0: Verify Facts Before Anything Else
- Step 1: Understand the Requirements (decide whether to ask based on context)
- Step 2: Gather Design Context (by priority)
- Step 2b: Produce a Design Read and Calibrate Five Dials
- Step 3a: Position Four Questions Before Picking a System
- Step 3: Declare the Design System Before Writing Code
- Step 4: Show a v0 Draft Early
- Step 5: Full Build
- Step 6: Verification
- Step 7: Critique on Request (or as Self-Check Before Delivery)
- Fallback: Design Direction Advisor
- Mechanism: 3 differentiated directions, not 10 questions
What does the web-design-engineer skill do?
Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance / QA of a web artifact. Not for back-end, CLI, non-visual coding, source-to-longform article conversion, or narration-driven click-through video presentations.
How do I install it?
Run `npx skills add ConardLi/garden-skills --skill web-design-engineer --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ConardLi/garden-skills, a repository with 10,047 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.