Agent skill · design visual · conardli
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.
Why this skill is useful
Adds specific design patterns and workflows for creating polished web artifacts that the AI wouldn't reliably generate on its own.
What it needs
About 12k tokens when loaded. Last updated 2026-07-12. 10,116 stars on the source repository.
What this skill does
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. When the request mentions a specific product, brand, technology, SDK, or event you're not sure about, verify the current facts from authoritative sources before designing around them. Never assert unstable facts from memory. Trigger conditions (any one): 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 If search returns nothing or is ambiguous → ask the user. Don't guess. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills conardli/web-design-engineer