skills.rest
YuukiMarine
YuukiMarineCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-engineer

Design interactive web pages using HTML/CSS/JavaScript/React templates and tools.

Updated Jun 11, 2026
Search Tags:#web development#web design#UI design#interactive design#HTML/CSS/JavaScript/React
One-click install
npx skills add https://github.com/YuukiMarine/websiteskills --skill web-design-engineer-yuukimarine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-engineer
Source: https://github.com/YuukiMarine/websiteskills/tree/main/skills/web-design-engineer
Command: npx skills add https://github.com/YuukiMarine/websiteskills --skill web-design-engineer-yuukimarine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, babel, chart.js, d3, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps you create polished visual web artifacts like pages, dashboards, prototypes, and animations without writing code, providing a powerful tool for design engineers and professionals.

Core Features & Use Cases

  • Visual Artifacts Creation: Generate HTML/CSS/JavaScript/React-based web artifacts.
  • Customization: Customize the visual design and interaction patterns.
  • Use Case: If you need a professional, interactive landing page for your product, this Skill can create it for you with minimal input.

Quick Start

Use the web-design-engineer skill to create a landing page with the theme "Modern Tech" and a focus on user engagement.

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 interactive web artifacts without writing HTML, CSS, or JavaScript code?▼

You can generate interactive web artifacts like pages and dashboards without manually writing HTML, CSS, or JavaScript code. This Skill provides templates to create visually stunning React-based websites tailored to your design vision with minimal text input.

Can I use React and Babel to create custom UI design prototypes?▼

Yes, you can use React and Babel to create custom UI design prototypes. This Skill requires React and Babel for rendering interactive and presentational web artifacts, allowing you to customize visual design and interaction patterns for your front-end development tasks.

Does this web design tool support complex data visualizations with Chart.js or D3.js?▼

Yes, this web design tool supports complex data visualizations with Chart.js or D3.js. While React and Babel handle the core rendering of your web artifacts, you can optionally integrate Chart.js or D3.js to build advanced interactive visualizations and dashboards.

What is the best way to generate a modern landing page for user engagement?▼

The best way to generate a modern landing page for user engagement is to specify a theme like "Modern Tech" as input. The Skill then designs and builds a professional, interactive HTML/CSS/JavaScript/React landing page focused on your desired engagement patterns.

Do I need to install dependencies before generating front-end web pages?▼

Yes, you need the React and Babel dependencies installed to support rendering before generating front-end web pages. Chart.js and D3 are also required dependencies if you want to optionally generate complex visualizations within your interactive web artifacts.

Related Skills

Explore More Design & Creative Skills→
joabeoliveirajoabeoliveira

Graphics & Animations

Guide web graphics and animations with Chart.js, D3.js, CSS, and JavaScript.

Community
Intermediate
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
ClutchEngineeringClutchEngineering
14

slipstream

Compose static HTML sites with Slipstream and Tailwind CSS.

Official
Advanced