mo-ui-design

What problem does it solve?

This Skill provides a focused, design-only workflow to create interactive HTML prototypes that visualize and validate UI designs before any MudBlazor/Blazor implementation, preventing premature engineering decisions and aligning stakeholders on visual direction.

Core Features & Use Cases

• Design-first workflow: Guided phases for discovery, design documentation, prototyping, and iteration to keep sessions strictly about aesthetics and interactions.
• Deliverables: Produces a self-contained .ui-design/{feature-name}/ folder with a design.md design document and an interactive index.html prototype (optionally styles, scripts, and mock data for complex prototypes).
• Aesthetic and technical rules: Enforces bold, distinct aesthetics, Tailwind via CDN, unique Google Fonts pairings, realistic mock data, responsive behavior, and accessibility/motion considerations.
• Use Case: A product designer needs an interactive MVP to show stakeholders how a new dashboard behaves and looks before engineering commits to a MudBlazor implementation.

Quick Start

Create an interactive HTML prototype for a feature named device-dashboard with a retro-futuristic aesthetic and include design.md and index.html under .ui-design/device-dashboard/.