skills.rest
mykcs
mykcsCOMMUNITY
Explore all skills by this author →
GitHub

web-design-engineer

Generate HTML/CSS/JavaScript/React web artifacts from design intent and references.

1|Updated May 17, 2026
Search Tags:#data visualization#React#design system#web design#slide deck#UI implementation#interactive prototype
One-click install
npx skills add https://github.com/mykcs/myk-skills --skill web-design-engineer-mykcs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-engineer
Source: https://github.com/mykcs/myk-skills/tree/main/web-design-engineer
Command: npx skills add https://github.com/mykcs/myk-skills --skill web-design-engineer-mykcs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you turn product ideas, screenshots, or PRDs into polished, interactive front-end deliverables with strong visual craft and a consistent design system.

Core Features & Use Cases

  • Interactive Web Deliverables: Create web pages, landing pages, dashboards, prototypes, and animated demos in HTML/CSS/JavaScript/React.
  • Slide Decks & Visual Presentations: Produce HTML slide decks with a fixed 1920×1080 layout, keyboard navigation, and persistent slide position.
  • Dashboards & Data Visualizations: Build responsive dashboards using Chart.js or D3 with semantic color encoding and dark/light support.
  • Motion & UX Craft: Implement micro-interactions, state coverage (default/hover/focus/disabled/loading/empty/error), and animation timelines when needed.

Quick Start

Build an interactive dashboard prototype that matches my provided screenshot, uses a cohesive design system, and includes complete states plus a Tweaks panel for theme and interaction variations.

Frequently Asked Questions about web-design-engineer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an interactive React dashboard from a screenshot?▼

Build a React dashboard from a screenshot by providing the image as a reference; the system generates HTML/CSS/JavaScript/React code with declared design tokens, semantic color encoding, and complete interactive states.

Can I generate an HTML slide deck with keyboard navigation?▼

Generate an HTML slide deck with a fixed 1920×1080 layout, keyboard navigation, and persistent slide position tracking directly from your presentation content and design references.

What is the best way to create a data visualization prototype with Chart.js?▼

Create a data visualization prototype with Chart.js by specifying dashboard requirements to generate a responsive interface featuring dark/light support, semantic color encoding, and interactive motion design.

Does this approach support UI implementation with complete component states?▼

UI implementation includes comprehensive state coverage spanning default, hover, focus, disabled, loading, empty, and error states, ensuring accessibility-minded and robust interactive micro-interactions for web artifacts.

Do I need React to build interactive web prototypes?▼

React is required for implementation, as the deliverables use HTML/CSS/JavaScript/React with declared design tokens to produce interactive prototypes, marketing pages, and animated demos rather than back-end logic.

Related Skills

Explore More Design & Creative Skills→
gil00pitagil00pita

sass-scss

Organize CSS with modular Sass/SCSS using modules, mixins, and tokens.

Community
Advanced
zunyiqingfeng-codezunyiqingfeng-code
2

web-design-engineer

Create HTML/CSS/JavaScript/React web artifacts with design-system coherence.

Community
Advanced
CopilotKitCopilotKit
1.5k

Advanced Visualization Techniques

Generate interactive HTML/SVG widgets for dashboards and data visualizations.

Official
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate