monica-ui-development

Files (28)

• SKILL.md
• openai.yaml · agents/
• adaptive-mudblazor-list-table-pattern.md · references/
• auto-refresh-page-pattern.md · references/
• blazor-best-practices.md · references/
• browser-storage-guide.md · references/
• component-reference.md · references/
• css-isolation-fix-workflow.md · references/
• migration-guide-v9.md · references/
• module-structure-guide.md · references/
• moicon-authoring.md · references/
• monica-grove-design-language.md · references/
• monica-precision-design-language.md · references/
• monica-visual-language.md · references/
• monica-workbench-design-language.md · references/
• mudblazor-css-variables.md · references/
• offline-requirements.md · references/
• repository-tooling.md · references/
• theme-authoring-pitfalls.md · references/
• theme-css-guide.md · references/
• font_downloader.py · scripts/
• skill_repository.py · scripts/
• subset_ui_font.py · scripts/
• sync_mud_css_variables.py · scripts/
• validate_mud_css_variables.py · scripts/
• test_font_downloader.py · tests/
• test_skill_repository.py · tests/
• test_validate_mud_css_variables.py · tests/

SKILL.md (first lines)

# Monica UI Development

Use `$monica-architecture` for UI module boundaries and page decomposition. For a focused UI change, inspect the owning component, its CSS, and the rendered DOM. Use `$monica-ui-audit` when the task asks for a compliance review or the change has a concrete cross-cutting risk. Use `$monica-ui-localization` for user-facing strings, resources, or registry keys; use `$monica-infra-ui` for consumer registration.

For a page redesign, apply the shared [visual language](references/monica-visual-language.md) for the signature region, color role map, scale tiers, and component vocabulary, and the [working-interface language](references/monica-workbench-design-language.md) for task analysis, evidence honesty, responsive containment, and review. A neutral, single-accent page does not meet the visual language.

For icon rendering, catalog additions, SVG source imports, and generation, follow [MoIcon authoring](references/moicon-authoring.md). Public component and MudBlazor-slot usage belongs to the [icon consumer contract](../monica-infra-ui/references/icons.md).

Put component layout and local presentation in `.razor.css`. A Blazor isolation selector does not automatically reach a child MudBlazor component root: scope a real HTML wrapper and use `::deep`. Compare compiled `*.bundle.scp.css` selectors with the live DOM when a class exists but a rule does not apply. Prefer MudBlazor primitives for menus, dialogs, drawers, and popovers. Use v9 async APIs (`ShowAsync`, `ShowMessageBoxAsync`) and the v9 converter contract. Read [CSS isolation workflow](references/css-isolation-fix-workflow.md) or [v9 migration](references/migration-guide-v9.md) when those issues arise.

For a loading, empty, or unavailable block replacing results, reuse `MoContentState` and its [content-state contract](../monica-infra-ui/references/content-states.md). Keep native empty rows out of responsive data-cell label grids and percentage widths. Verify centering against the entire painted results region, not only the state's own narrowed box.

Format page timestamps through the shell-owned `MoTimeFormatter`; follow [page time display](../monica-infra-ui/references/time-display.md) for Clock conversion, host-configurable formats, source `DateTimeKind` semantics and the schedule-calendar exception. Do not use OS-local conversions or duplicate UTC strings in ordinary rows.

Keep data initialization in `OnInitializedAsync` or `OnParametersSetAsync` and DOM-dependent interop in `OnAfterRenderAsync`. An incomplete await permits re-entry and disposal. Cancel component-owned work, observe late resource-producing tasks, stop JavaScript callbacks before disposing their .NET targets, and avoid interop that mutates DOM from `DisposeAsync`. Read [Blazor lifecycle guidance](references/blazor-best-practices.md) for ownership/interleaving, [auto-refresh pattern](references/auto-refresh-page-pattern.md) for polling, and [browser storage](references/browser-storage-guide.md) when persisting UI state. `IBrowserStorage` owns local/session storage; its runtime keys have the `mo:` prefix.

Use MudBlazor palette variables first and the approved `--mo-color-*` tokens for roles the palette cannot express. Keep supplemental semantic tokens small and reusable across modules; do not introduce hardcoded colors in UI Razor, CSS, JS, or C# visualization payloads. `mo-theme-main.css` composes theme resources and token defaults; put new component styling in its owning stylesheet rather than adding it there during color cleanup. Keep component-specific selectors in the owning CSS, shared MudBlazor visuals in theme CSS, and shell sizing in layout CSS. The shell owns AppBar height and viewport scrolling; page CSS should use available parent height and local overflow. Runtime fonts and static resources stay local; ship WOFF2 rather than source TTF/OTF. Read [theme CSS](references/theme-css-guide.md), [offline assets](references/offline-requirements.md), and the selected theme's contract: [Precision Default](references/monica-precision-design-language.md) or [optional Grove](references/monica-grove-design-language.md). For theme regressions use [theme pitfalls](references/theme-authoring-pitfalls.md); for dense tables use [adaptive list/table](references/adaptive-mudblazor-list-table-pattern.md).

Reuse `MoJson` for JSON previews and drafts instead of a module-local tokenizer, formatter or multiline text field. Follow the [JSON component contract](../monica-infra-ui/references/json.md); callers retain schema validation, redaction and save ownership. Use ordinary text or a specialized viewer for logs, stack traces, SQL, Markdown and diffs.

When MudBlazor API or DOM behavior is uncertain, inspect source matching the project's resolved package version. Use `inspect-dependency-source` when available; otherwise use a verified exact checkout. Read [source and repository tooling](references/repository-tooling.md) for explicit source inputs, CSS variable catalogs, and font subset defaults. Use `scripts/font_downloader.py` for local font downloads and [offline assets](references/offline-requirements.md) for packaging constraints. Validate theme colors with the repository's `scripts/validate_ui_theme_tokens.py` when styling changes.

From Tairitsua/Monica, MIT.

More from Tairitsua/Monica