メニュー
CSS @layer architecture, 3-tier design tokens, and MudBlazor wrapper components.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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