Menu
CSS @layer architecture, 3-tier design tokens, and MudBlazor wrapper components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Run the canonical build plus all nine per-project test commands from docs/TESTING.md. Never uses solution-level dotnet test.
Create or re-baseline lean, repository-grounded implementation plans and persistent dev docs when users ask for an implementation plan, technical plan, feature plan, refactor plan, or dev-docs workstream.
Senior CTO review workflow for repository-grounded implementation-plan workstreams used before coding.
Apply project EF Core conventions for repositories, DbContext setup, query filters, migrations, and seeded lookup data.
Create a self-contained HTML artifact focused on a high-quality SVG architecture or system diagram with minimal supporting prose.
Create a pragmatic self-contained HTML plan that organizes the user's plan content visually without expanding the scope unnecessarily.
| name | design-system |
| description | CSS @layer architecture, 3-tier design tokens, and MudBlazor wrapper components. |
| type | domain |
| enforcement | enforce |
| priority | high |
ABOUTME: CSS design system skill covering @layer architecture, design tokens, and wrapper components. ABOUTME: Enforces layer ordering, token usage, and MudBlazor wrapper patterns.
css layers, @layer, design tokens, wrapper component, AppButton, AppCard, AppTextField, AppIconButton, AppDialogShell, DialogOptionsFactory, AppearanceStyleBuilder, mudblazor override, display contents, ::deep
wwwroot/css/layers.csswwwroot/css/tokens.csswwwroot/css/mudblazor-overrides.csswwwroot/css/utilities.css**/Components/Common/App*.razor**/Components/Common/App*.razor.css**/Helpers/AppearanceStyleBuilder.cs**/Services/DialogOptionsFactory.csreset → base → tokens → mudblazor-overrides → components → utilities. Unlayered CSS (Blazor CSS isolation, MudThemeProvider) beats all layered — by design..mud-* overrides are ONLY allowed in mudblazor-overrides.css. Each override must have a comment justifying it. No bare .mud-* selectors anywhere else.display: contents to be transparent in layout, then ::deep to style MudBlazor internals via CSS isolation.--mud-palette-*), Component (scoped to specific components).--isl-space-1 (4px) through --isl-space-16 (64px).clamp() between 320px and 1280px viewport widths.DialogOptions manually.BuildStyle, BuildHeroStyle, BuildBannerStyle.Load this skill when:
wwwroot/css/Components/Common/resources/layer-architecture.md — 6 CSS layers, ordering rules, override policyresources/token-system.md — 3-tier token definitions, naming conventionsresources/wrapper-components.md — 5 wrappers, parameters, styling patternsresources/appearance-builder.md — AppearanceStyleBuilder, DialogOptionsFactory, effectsdocs/DESIGN_SYSTEM.md.agents/skills/blazor-ui-conventions/SKILL.md.agents/skills/blazor-css-isolation/SKILL.md