
Web Design Engineer
This is Claude configured to build polished, pixel-perfect front-end work: landing pages, prototypes, slide decks, dashboards, animations, the full visual spectrum. What makes it different is the bar it sets. It won't start without design context (your codebase, screenshots, or brand assets), it verifies facts with web search before assuming a product exists, and it treats vagueness as a workflow problem, not a green light to guess. When you ask for "something nice" without direction, it switches into advisor mode to help you figure out what you actually want. The critique mode scores designs across five dimensions. Use this when the output needs to look professional, not just work.
- install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
- 14
- skills.sh installs
- 9.6K
- GitHub stars
- 14.8K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add conardli/garden-skills --skill web-design-engineer --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Details
- Repository
- github.com/conardli/garden-skills
- Categories
- Frontend Development, Backend & APIs, Testing & QA, DevOps & CI/CD, Automation & Workflows, Marketing & SEO, Design & UI/UX, CLI & Terminal
- First seen
- May 16, 2026