mo-ui-development

Create and modify Monica UI Blazor components with MudBlazor patterns.

13|6|Updated Feb 19, 2025
One-click install
npx skills add https://github.com/Tairitsua/Monica --skill mo-ui-development
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mo-ui-development
Source: https://github.com/Tairitsua/Monica/tree/main/.claude/skills/mo-ui-development
Command: npx skills add https://github.com/Tairitsua/Monica --skill mo-ui-development

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires requests, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Monica UI development tasks can be error-prone and time-consuming without a structured approach. This skill provides guidance and tooling to create or modify Blazor UI components, apply MudBlazor patterns, fix CSS isolation, migrate to MudBlazor v9, validate MudBlazor CSS variables, implement browser storage with IMoBrowserStorage, and implement localization/i18n across Monica UI modules.

Core Features & Use Cases

  • Scaffold Monica Blazor UI components and pages with consistent architecture and naming conventions.
  • Facilitate MudBlazor v9 migrations, ensure correct CSS variable usage, and enforce CSS isolation workflows.
  • Provide localization/i18n scaffolding and browser storage patterns for offline or intranet environments.
  • Offer references, scripts, and best-practice guidance from the mo-ui-development repository to standardize workflows.

Quick Start

Create a new Monica UI Blazor component following the mo-ui-development guidelines.

Frequently Asked Questions about mo-ui-development

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

FAQPage Schema
How do I migrate Blazor projects to MudBlazor v9 and validate CSS variables?

To migrate Blazor projects to MudBlazor v9 and validate CSS variables, use the skill's scripts and references to enforce v9 patterns and validate variable usage. It guides the migration workflow and ensures correct CSS variable application.

What is the best way to implement CSS isolation in Blazor UI components?

CSS isolation in Blazor UI components is best implemented by following Monica UI naming conventions provided by the skill. It supplies guardrails and structured workflows to prevent styling leaks and ensure component-level CSS isolation.

How do I add localization and i18n to Monica UI modules in a Blazor app?

To add localization and i18n to Monica UI modules in a Blazor app, use the skill's scaffolding to provision localization resources across modules. It provides structured patterns to implement i18n specifically for offline or intranet Blazor environments.

Can I implement browser storage with IMoBrowserStorage in offline Blazor applications?

You can implement browser storage with IMoBrowserStorage in offline Blazor applications by applying the Monica UI storage patterns included in the skill. It provides specific references to structure browser storage for offline or intranet environments.

What should I do if the local MudBlazor source path is unavailable during UI development?

If the local MudBlazor source path is unavailable during UI development, execute the recovery steps included in the skill's scripts. These guardrails allow you to continue modifying and validating MudBlazor-based pages without interruption.