mui-runtime-ux-patterns

name

mui-runtime-ux-patterns

description

Use when planning, implementing, or reviewing MUI runtime screens, apps-template MUI dashboards, metahub template metadata, CRUD dialogs, DataGrid/table/card displays, relation builders, resource-source fields, or UI E2E flows. Enforces user-friendly runtime UI contracts: no raw user-facing IDs, no raw JSON/object cells, multiline long-text fields, localized validation, and reuse of existing dashboard primitives.

MUI Runtime UX Patterns

Use this skill whenever work touches published application runtime UI, packages/universo-react-apps-template-mui, packages/universo-react-template-mui, metahub template metadata, app layouts, CRUD dialogs, DataGrid tables, cards, relation builders, or Playwright browser flows for user-facing runtime screens.

Required Output

Before implementation, produce or verify a UI Contract for every touched screen, dialog, table, or card:

• field semantics and user role;
• default control type;
• display value in grids/cards;
• hidden/system-owned fields;
• default values from runtime context;
• validation and localized error behavior;
• responsive behavior and browser proof.

Blocking Rules

• Normal user-facing surfaces must not expose raw editable *Id, OwnerId, UserId, AssignedUserId, UUID-only values, or hidden-knowledge workflows unless explicitly marked admin/debug-only.
• Semantic long-text fields such as description, notes, summary, details, body, instructions, feedback, and comment must use multiline controls by default.
• Media, cover, file, resource-source, block-content, and structured JSON fields must be hidden, formatted, or rendered with previews/badges. Raw JSON.stringify() output is not acceptable on normal grids/cards.
• Validation messages must be localized and user-facing. Raw Zod/internal messages are defects on localized surfaces.
• Reuse existing MUI dashboard/app-template primitives before creating new widgets or layouts.
• Resource/list surfaces must use the canonical table/list primitive and its default density/header styling unless the task explicitly requires a compact embedded table. If the canonical table is reused with custom columns, preserve expected structural affordances such as numbered # rows when the comparable surface has them.
• Destructive confirmation dialogs must use the shared confirmation/delete dialog contract and must not expose resize handles, fullscreen controls, or other long-form editing affordances. Their action footer must use the standard dialog action spacing.
• Fix generic runtime metadata/rendering behavior where possible. Do not add LMS-only UI forks for generic problems.
• packages/universo-react-apps-template-mui must stay isolated from the legacy template packages. It must not depend on packages/universo-react-template-mui or any feature package scheduled for removal during the architectural transition (universo-react-metahubs-*, universo-react-applications-*, universo-react-admin-*, universo-react-profile-*, universo-react-start-*). Component duplication between those packages and universo-react-apps-template-mui is acceptable and intentional during the transition. See references/apps-template-isolation.md.

References

• Read references/field-control-contract.md when mapping metadata fields to form controls.
• Read references/data-grid-display-contract.md when table/card output or DataGrid columns are affected.
• Read references/dashboard-template-contract.md when app layout, widgets, relation builders, or dashboard consistency are affected.
• Read references/apps-template-isolation.md when work touches packages/universo-react-apps-template-mui, its dependency boundary, or shared-vs-duplicated component decisions during the architectural transition.
• Read references/evaluation.md when checking that this skill would catch known bad UI plans.