web-design-engineer — Skills

What it does

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

Product context: What product? Target users? Existing design system / brand guidelines / codebase?

Output type: Web page / prototype / slide deck / animation / dashboard? Fidelity level?

Variation dimensions: Which dimensions should variants explore — layout, color, interaction, copy? How many?

Requirements & configuration

Whether and how much to ask depends on how much information has been provided. Do not mechanically fire off a long list of questions every time:

| Typography | Low — needs the above to land | Auxiliary |

Complete this lightweight self-check before delivery. It does not require launching a browser unless the user explicitly requested executable acceptance in Step 6:

Configuration: INDEX

web design engineer

Source

Repository: https://github.com/conardli/garden-skills

web-design-engineer FAQ

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

What does web-design-engineer require?

Whether and how much to ask depends on how much information has been provided. Do not mechanically fire off a long list of questions every time: | Typography | Low — needs the above to land | Auxiliary | Complete this lightweight self-check before delivery. It does not require launching a browser unless the user explicitly requested executable acceptance in Step 6: Configuration keys: INDEX.

How do I install web-design-engineer?

Run: npx -y skills add https://github.com/conardli/garden-skills --skill web-design-engineer --agent claude-code — the source lives at github.com/conardli/garden-skills.

Maintain web-design-engineer?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[web-design-engineer on getagentictools](https://getagentictools.com/skills/conardli-garden-skills-web-design-engineer?ref=badge)

npx agentictools info skills/conardli-garden-skills-web-design-engineer

The second line is the CLI lookup for this page — handy in READMEs and docs.