skills.rest
Tairitsua
TairitsuaCOMMUNITY
Explore all skills by this author →
GitHub

mo-ui-design

Create interactive HTML prototypes for MudBlazor/Blazor UI designs.

13|6|Updated Feb 19, 2025
Search Tags:#ui-design#aesthetics#design-system#wireframe#mudblazor#html-prototype
One-click install
npx skills add https://github.com/Tairitsua/Monica --skill mo-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mo-ui-design
Source: https://github.com/Tairitsua/Monica/tree/main/.claude/skills/mo-ui-design
Command: npx skills add https://github.com/Tairitsua/Monica --skill mo-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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/.

Frequently Asked Questions about mo-ui-design

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

FAQPage Schema
How do I create interactive HTML prototypes for MudBlazor UIs before implementation?▼

Create interactive HTML prototypes for MudBlazor UIs by generating a self-contained .ui-design/{feature-name}/ folder containing design.md and index.html to validate visual direction and prevent premature engineering decisions.

What is a design-only workflow for Blazor wireframes and page layouts?▼

A design-only workflow for Blazor wireframes keeps sessions strictly about aesthetics and interactions, guiding teams through discovery, design documentation, prototyping, and iteration to align stakeholders before coding.

Does the HTML UI prototype use Tailwind CSS and custom fonts?▼

Yes, the HTML UI prototype uses Tailwind via CDN and enforces unique Google Fonts pairings to achieve bold, distinct aesthetics while maintaining responsive behavior and accessibility considerations.

Can I generate realistic mock data for MudBlazor dashboard prototypes?▼

Yes, you can generate realistic mock data for MudBlazor dashboard prototypes. The workflow produces interactive MVP prototypes with realistic data to show stakeholders how new interfaces behave and look.

What is the file structure for a Blazor HTML UI prototype?▼

The file structure for a Blazor HTML UI prototype is a self-contained .ui-design/{feature-name}/ directory that includes a design.md design document and an index.html prototype, optionally with styles, scripts, and mock data.

When should I use HTML wireframes instead of directly coding MudBlazor components?▼

Use HTML wireframes instead of directly coding MudBlazor components when you need to visualize and validate interface designs with stakeholders, preventing premature engineering decisions and aligning on visual direction first.

Related Skills

Explore More Design & Creative Skills→
profmikegreeneprofmikegreene
1

ux-prototyping

Design and prototype user interfaces and dashboards for usability testing.

Community
Intermediate
wkallhofwkallhof

Frontend Development Skill

Guide Blazor frontend development with MudBlazor design system patterns.

Community
Intermediate
o2b3ko2b3k

tailwindcss-development

Standardize Tailwind CSS utility classes and v4 syntax in HTML components.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

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

Community
Intermediate