القائمة
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