Skills
.Work. You
Rest

web-design-engineer

Community

Turn ideas into stunning web experiences.

Design & Creative#html#frontend#react#javascript#css#design-system#web-design
AuthorConardLi
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Build high-quality visual Web artifacts using HTML/CSS/JavaScript/React — web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, animated demos, UI mockups, data visualizations, and more. It applies to requests requiring a visual, interactive, or front-end deliverable. Use this skill whenever the user's request involves a visual or interactive deliverable, including web pages, marketing pages, prototypes, dashboards, or design-system explorations. Not applicable to non-visual code tasks or back-end work.

Core Features & Use Cases

  • Produce production-ready HTML/CSS/JS output, including responsive layouts and accessible semantics.
  • Create web pages, landing pages, dashboards, interactive prototypes, HTML slide decks, and data visualizations, with device frames and design-system tokens.
  • Transform design prompts, screenshots, or PRDs into interactive implementations while maintaining branding and design-system constraints.

Quick Start

Use the web-design-engineer skill to produce a stunning front-end deliverable (web page, dashboard, or prototype) following the declared design system.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: web-design-engineer
Download link: https://github.com/ConardLi/garden-skills/archive/main.zip#web-design-engineer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.