conardli avatar

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-code

Installs 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

More from conardli/garden-skills

All 5
1github avatarfolder-structure-blueprint-generatorgithub/awesome-copilotComprehensive technology-agnostic prompt for analyzing and documenting project folder structures. Auto-detects project types (.NET, Java, React, Angular, Python9.5Kskills.sh installs
2github avatarcode-exemplars-blueprint-generatorgithub/awesome-copilotTechnology-agnostic prompt generator that creates customizable AI prompts for scanning codebases and identifying high-quality code exemplars. Supports multiple 8.8Kskills.sh installs
3tw93 avatardesigntw93/wazaProduces distinctive, production-grade UI for pages, components, visual interfaces, typography, and screenshot-driven polish. Use when users ask in any language8.7Kskills.sh installs
4vercel-labs avatarnextvercel-labs/json-renderNext.js renderer for json-render that turns JSON specs into full Next.js applications with routes, layouts, SSR, and metadata. Use when working with @json-rende8.6Kskills.sh installs
5josiahsiegel avatartailwindcss-advanced-layoutsjosiahsiegel/claude-plugin-marketplaceTailwind CSS advanced layout techniques including CSS Grid and Flexbox patterns. PROACTIVELY activate for: (1) building complex layouts with CSS Grid, (2) grid-8.2Kskills.sh installs
6shubhamsaboo avatarfullstack-developershubhamsaboo/awesome-llm-appsModern web development expertise covering React, Node.js, databases, and full-stack architecture. Use when: building web applications, developing APIs, creating7.9Kskills.sh installs