Individual skill

web-design-engineer

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.

skills/web-design-engineer/SKILL.md

Read pinned source

Source commit 2b9a89340b70f632d31c0f1c69fce94a7912423e

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: No
Observed behavior: Not checked yet
Last checked: Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 15,004
Repository last updated: Nov 8, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

agent Repository topic
claude Repository topic
gpt-image-2 Repository topic
rag Repository topic
skills Repository topic
web-design Repository topic
design Derived category
engineering Derived category
design-interface Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

README.mddoc · 28,270 bytes
README.zh-CN.mddoc · 27,553 bytes
SKILL.mdcore · 35,406 bytes
SKILL.mdcore · 35,406 bytes
SKILL.mdcore · 35,406 bytes
SKILL.mdcore · 35,406 bytes
agents/openai.yamlasset · 288 bytes
manifest.jsonasset · 609 bytes
references/advanced-patterns.mddoc · 14,722 bytes
references/block-library.mddoc · 1,767 bytes
references/browser-acceptance.mddoc · 4,643 bytes
references/critique-guide.mddoc · 10,446 bytes
references/design-calibration.mddoc · 6,139 bytes
references/design-directions.mddoc · 14,105 bytes
references/failure-patterns.mddoc · 7,119 bytes
references/redesign-protocol.mddoc · 4,181 bytes
references/style-recipes/INDEX.mddoc · 12,177 bytes
references/style-recipes/active-theory.mddoc · 2,581 bytes
references/style-recipes/aesop.mddoc · 2,796 bytes
references/style-recipes/apple-hig.mddoc · 3,076 bytes
references/style-recipes/are-na.mddoc · 2,230 bytes
references/style-recipes/balenciaga-post-2017.mddoc · 2,361 bytes
references/style-recipes/bloomberg-businessweek-turley.mddoc · 2,585 bytes
references/style-recipes/bloomberg-terminal.mddoc · 2,772 bytes
references/style-recipes/dieter-rams-braun.mddoc · 2,602 bytes
references/style-recipes/field-io.mddoc · 2,921 bytes
references/style-recipes/headspace-meditation.mddoc · 2,675 bytes
references/style-recipes/linear.mddoc · 3,174 bytes
references/style-recipes/mailchimp-freddie.mddoc · 2,540 bytes
references/style-recipes/mid-century-modern.mddoc · 2,723 bytes
references/style-recipes/monocle-magazine.mddoc · 2,620 bytes
references/style-recipes/muji-kenya-hara.mddoc · 2,713 bytes
references/style-recipes/notion-pre-ai.mddoc · 2,867 bytes
references/style-recipes/nyt-the-daily.mddoc · 2,691 bytes
references/style-recipes/pentagram.mddoc · 2,835 bytes
references/style-recipes/raycast.mddoc · 3,238 bytes
references/style-recipes/resn-storytelling.mddoc · 2,441 bytes
references/style-recipes/stripe-press.mddoc · 2,880 bytes
references/style-recipes/tufte-dataink.mddoc · 2,591 bytes
references/style-recipes/vercel-mesh.mddoc · 2,975 bytes
references/style-recipes/vignelli-swiss-helvetica.mddoc · 2,517 bytes
references/style-recipes/y2k-retrofuturism.mddoc · 2,750 bytes

Read excerpt


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