# Web Design Engineer

Build or redesign polished browser-rendered visual artifacts with...

- Repository: https://github.com/ConardLi/garden-skills (13467 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-25
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ConardLi/garden-skills --skill web-design-engineer -g -a claude-code -y`
Codex: `npx skills add ConardLi/garden-skills --skill web-design-engineer -g -a codex -y`
Cursor: `npx skills add ConardLi/garden-skills --skill web-design-engineer -g -a cursor -y`
Gemini CLI: `npx skills add ConardLi/garden-skills --skill web-design-engineer -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ConardLi/garden-skills`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 about, verify the current facts from authoritative sources before designing around them. Never assert unstable facts from memory.

**Trigger conditions** (any one):

- The request names a specific product / SDK / library you're unsure about (e.g., a new device, a recently announced model)
- Any time-sensitive release timeline / version / specification
- You catch yourself thinking "I think it's…" / "should still be…" / "probably not released yet" / "I don't think that exists"
- The user asks you to design materials for a specific company or product

The rest: https://github.com/ConardLi/garden-skills/blob/HEAD/skills/web-design-engineer/SKILL.md