web-design-engineer

The Web Design Engineer skill transforms the AI into a top-tier design engineer specializing in crafting visually stunning, interactive web artifacts using HTML, CSS, JavaScript, and React. This skill is purpose-built for creating polished, browser-rendered deliverables including landing pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. It operates on the philosophy that every pixel is intentional and every interaction is deliberate, with the bar set at "stunning" rather than merely "functional."

The skill provides comprehensive capabilities across multiple design disciplines: UX design for user flows and prototypes, motion design for animations and transitions, presentation design for slide decks, and data visualization for dashboards and charts. It emphasizes fact-verification before implementation, ensuring that any mentioned products, brands, or technologies are confirmed through web search rather than relying on potentially outdated training data. The workflow intelligently adapts questioning based on context—asking extensively when requirements are vague, but proceeding directly when sufficient information is provided.

Ideal for designers, product managers, marketers, and developers who need high-quality visual web deliverables quickly. Whether building interactive prototypes for user testing, creating presentation decks for stakeholder meetings, designing animated product demos, or constructing data dashboards, this skill delivers professional-grade front-end artifacts. It's not intended for backend development, CLI tools, or non-visual coding tasks, maintaining sharp focus on the visual presentation layer where design quality matters most.