skills.rest
mmcmedia
mmcmediaCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-designer

Design and implement responsive web interfaces with HTML5, CSS3, and vanilla JavaScript.

2|Updated Feb 15, 2026
Search Tags:#design#ui#accessibility#dashboard#prototype#responsive#ux
One-click install
npx skills add https://github.com/mmcmedia/openclaw-agents --skill ui-ux-designer-mmcmedia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/mmcmedia/openclaw-agents/tree/main/skills/ui-ux-designer
Command: npx skills add https://github.com/mmcmedia/openclaw-agents --skill ui-ux-designer-mmcmedia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design and build user interfaces, dashboards, and web applications with focus on user experience, visual hierarchy, and interactive design. Use when McKinzie needs to create or redesign dashboards, landing pages, tools, or any visual interface. Handles both design strategy and implementation (HTML/CSS/JS).

Core Features & Use Cases

  • Design strategy and envisioning dashboards and web apps focused on clarity, hierarchy, and usability.
  • Visual system development including typography, color, spacing, and component libraries.
  • Implementation guidance for HTML/CSS/JS with accessible, responsive front-ends.

Quick Start

Provide a complete UI/UX concept and a production-ready HTML/CSS/JS scaffold that aligns with the given inspiration and requirements.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I design a responsive dashboard layout for both desktop and mobile?▼

To design a responsive dashboard, establish a cohesive visual system with clear hierarchy and accessible contrast. Generate a production-ready HTML5, CSS3, and vanilla JavaScript scaffold that adapts layout behavior across desktop and mobile contexts.

What is the best way to plan visual hierarchy for a web application interface?▼

Planning visual hierarchy for a web application involves defining typography, color, and spacing rules within a design system. This ensures clarity and usability across interactive tools, landing pages, and dashboards.

Can I get both UI design strategy and front-end implementation guidance together?▼

Yes, UI design strategy and front-end implementation are handled together. It delivers a complete UI/UX concept alongside a production-ready HTML5, CSS3, and vanilla JavaScript scaffold aligned with your visual system requirements.

Does this approach support accessible contrast and responsive behavior for interactive tools?▼

Accessible contrast and responsive behavior are explicitly supported for interactive tools. Implementation guidance ensures front-ends built with HTML5, CSS3, and vanilla JavaScript meet accessibility standards while adapting across devices.

How do I build a component library for a new web application design system?▼

Building a component library for a web application requires defining consistent typography, color, and spacing rules. This approach develops a visual system to ensure cohesive and accessible interface implementation.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
doncan-orozcodoncan-orozco

web-artifacts

Generate self-contained HTML/CSS/JavaScript artifacts for interactive web components.

Community
Intermediate
Pasha2308Pasha2308
1

advanced-visualization

Create interactive visual content using HTML, SVG, Canvas, D3.js, and Chart.js.

Community
Advanced
Maccio-huangMaccio-huang

web-prototype

Generate desktop web prototypes from predefined HTML layouts and design systems.

Community
Basic