What does this skill do, and when should you use it?
Web Design Engineer is the design-and-frontend skill in the Garden Skills collection. It is intended for creating or redesigning web pages, dashboards, interactive prototypes, HTML slide decks, animations, UI mockups, data visualizations, and design-system explorations. Its workflow establishes context and design decisions first, presents an early v0, then builds and self-checks the artifact. It supports HTML, CSS, JavaScript, and React, but excludes backend work, CLI tools, pure logic development, long-form article conversion, and narration-driven video presentations.
Reads supplied screenshots, Figma files, codebases, UI kits, design systems, or existing pages and extracts visual tokens such as color, typography, spacing, radius, shadows, motion, and copy tone; produces a Design Read and design-system declaration; creates an assumption-labeled v0 draft; implements HTML/CSS/JavaScript/React artifacts with responsive layouts, interaction states, and motion; runs browser acceptance only when the user explicitly requests acceptance, QA, browser testing, or responsive verification; and performs a five-dimension critique or pre-delivery checklist when applicable.
- A product designer needs a high-fidelity landing page from a product brief and wants to approve the visual direction before full implementation.
- A frontend engineer needs to redesign an existing dashboard while preserving its information architecture, routes, forms, or accessibility contracts.
- A team needs a clickable HTML or React prototype to explore layout, visual, interaction, and creative variants.
- A data team needs a responsive visualization dashboard with light/dark mode, semantic color encoding, and a strong data-ink ratio.
- A presenter needs an HTML slide deck with a fixed 1920×1080 canvas, keyboard navigation, and viewport scaling.
How do you install this skill?
- Core workflows may depend on overseas search, font CDNs, image CDNs, or other external resources; provide local mirrors, offline fonts, and fallback behavior.
- Do not treat gallery, comparison-demo, or “validated” statements in the README as verified test results; key paths, responsiveness, accessibility, and asset loading still require execution checks before delivery.
- Add explicit permission and data-flow disclosures, sensitive-data handling rules, maintainer ownership, update path, and a changelog.
- Shell / CLI
- Network access
- Local filesystem
React and Babel for React prototypesChart.js or D3.js for applicable data visualizations
Use the repository’s documented skills CLI command: npx skills add ConardLi/garden-skills -s web-design-engineer. Alternatively, clone the repository and copy skills/web-design-engineer into a project’s .claude/skills/ or .agents/skills/ directory. The README also documents Claude Code marketplace, release ZIP, and Git submodule installation paths.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/ConardLi/garden-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/web-design-engineer" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Create a responsive React data dashboard; first provide the Design Read, design-system declaration, and v0 draft.
After placing the folder in a supported skills directory, submit a concrete visual frontend request, for example: “Create a responsive React data dashboard; first provide the Design Read, design-system declaration, and v0 draft.” Explicitly request browser acceptance or responsive testing when needed; building or polishing alone does not trigger executable browser validation.
What are this skill's strengths and limitations?
- Covers a broad range of visual frontend artifacts, including pages, dashboards, prototypes, slides, animations, and visualizations.
- Emphasizes design systems, real brand assets, anti-cliché judgment, responsive behavior, and interaction states.
- Includes a Design Direction Advisor, 25 anchored style recipes, and advanced implementation references.
- The repository documents compatibility with Claude Code, Claude.ai, and Codex CLI.
- Its checkpoints require pausing for user confirmation at design-system and v0 stages, which may slow teams seeking one-pass delivery.
- For branded work, missing real logos or product assets can block progress because CSS substitutes are not accepted.
- Browser acceptance is conditional on an explicit request rather than being the default for every build.
- The supplied material does not document a standalone test suite or detailed cross-browser coverage.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Web Design Engineer this page | 50 · Use with care | ★ 13k | 16d ago | MIT |
| Image-to-Code Skill | 48 · Use with care | ★ 96k | 12d ago | MIT |
| AnyDesign | 58 · Recommended | ★ 219 | 1mo ago | MIT |
| Frontend Design Skill | 52 · Use with care | ★ 5.5k | 5mo ago | MIT |
| Artifacts Builder — Multi-Component Frontend Artifact Suite | 53 · Use with care | ★ 3.1k | 8mo ago | MIT |
How did FollowSkills review this skill?
The evidence shows fact verification, user confirmation checkpoints, an explicit gate for browser acceptance, honest placeholders, real-asset guidance, and version-copy practices; no malware, credential theft, covert exfiltration, or destructive default is visible. Points are deducted because data flows, permissions, sensitive-data handling, recovery, and rollback for external search, CDNs, asset sourcing, and browser tooling are not fully specified; publisher identity is unverified.
The workflow, scope, and several coding conventions are fairly coherent, with some abnormal-input and acceptance-failure guidance. Static materials provide no executable test suite or CI evidence covering key paths; several referenced files are not included, and some templates depend on external CDNs, so reliability remains limited under the static ceiling.
Target artifacts, exclusions, implicit invocation, and design scenarios are described clearly, with bilingual documentation. Points are deducted because semantic triggers remain broad, fonts/assets/browser workflows may depend on overseas networks without mainland-China fallbacks, and boundaries for non-React or non-browser environments are not sufficiently explicit.
The skill has readable information architecture, progressive workflow disclosure, installation layout, a manifest version, MIT licensing, examples, and limitation notes. Points are deducted because no maintainer, update path, or changelog is shown; several reference-file and dependency assumptions remain implicit.
The skill directly targets visual web artifacts and supplies design-system, v0, full-build, and self-check workflows that could reduce generic output and produce usable HTML. Static review cannot verify the gallery or examples, and the subjective quality claim plus required manual assets, fact checks, and browser review leave substantial rework uncertainty.
The supplied files offer auditable prompt text, manifest metadata, templates, demo paths, and comparison descriptions, providing limited traceability. Points are deducted because no independent execution results, test reports, or third-party review are included; claims such as “validated” and “real artefact” cannot be independently confirmed from this material.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →