本文へ移動
cccskills
無料GitHub で公開

design-system

Load for global UI-system changes involving CSS `@layer`, primitive/semantic/component tokens, themes, reusable MudBlazor wrappers, or design-token governance; not for one component's isolated CSS.

islamu-ngo/Event
インストール方法を見る

含まれるファイル（5）

  • SKILL.md2.1 KB
  • resources/appearance-builder.md2.9 KB
  • resources/layer-architecture.md2.0 KB
  • resources/token-system.md2.7 KB
  • resources/wrapper-components.md2.5 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

ABOUTME: CSS design system skill covering @layer architecture, design tokens, and wrapper components. ABOUTME: Enforces layer ordering, token usage, and MudBlazor wrapper patterns.

Design System

Non-Inferable Rules

  1. CSS layers order (lowest→highest): reset → base → tokens → mudblazor-overrides → components → utilities. Unlayered CSS (Blazor CSS isolation, MudThemeProvider) beats all layered — by design.
  2. MudBlazor .mud-* overrides are ONLY allowed in mudblazor-overrides.css. Each override must have a comment justifying it. No bare .mud-* selectors anywhere else.
  3. All wrapper components use display: contents to be transparent in layout, then ::deep to style MudBlazor internals via CSS isolation.
  4. Design tokens follow 3 tiers: Primitives (raw values), Semantic (contextual meaning from --mud-palette-*), Component (scoped to specific components).
  5. Spacing uses a 4px grid: --isl-space-1 (4px) through --isl-space-16 (64px).
  6. Typography is fluid: H1–H6 use clamp() between 320px and 1280px viewport widths.
  7. DialogOptionsFactory provides 4 standard presets: Small, Medium, Confirmation, Editor. Always use a preset — never create DialogOptions manually.
  8. AppearanceStyleBuilder has 4 background effects: None, SoftOverlay (0.24), StrongOverlay (0.40), Blur (0.18). Methods: BuildStyle, BuildHeroStyle, BuildBannerStyle.

Resources

  • resources/layer-architecture.md — 6 CSS layers, ordering rules, override policy
  • resources/token-system.md — 3-tier token definitions, naming conventions
  • resources/wrapper-components.md — 5 wrappers, parameters, styling patterns
  • resources/appearance-builder.md — AppearanceStyleBuilder, DialogOptionsFactory, effects

Related

  • docs/internal/DESIGN_SYSTEM.md
  • .agents/skills/blazor-ui-conventions/SKILL.md
  • .agents/skills/blazor-css-isolation/SKILL.md

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

accessibility

無料

Load for Blazor/MudBlazor UI changes involving forms, dialogs, focus, keyboard navigation, landmarks, ARIA, color contrast, RTL-safe styling, or WCAG 2.2 AA tests; not for backend-only changes.

日本語の概要は準備中です。原文の説明を表示しています。

islamu-ngo/Event82026年10月8日 更新

agentic-research

無料

Load when a task asks to research, verify, compare, or look up framework/package behavior, release notes, standards, RFCs, CVEs, or unfamiliar APIs; use repository evidence first, then official docs, and not for codebase navigation alone.

日本語の概要は準備中です。原文の説明を表示しています。

islamu-ngo/Event82026年10月8日 更新

aspire

無料

Load for Aspire AppHost work: start/stop/wait resources, inspect dashboard/logs/traces, add integrations/resources, rebuild a service, run isolated worktrees, or diagnose Aspire orchestration; not for plain dotnet apps, container-only deployments, or cloud deployment.

日本語の概要は準備中です。原文の説明を表示しています。

islamu-ngo/Event82026年10月8日 更新

auth-patterns

無料

Load for authentication or authorization changes involving BFF cookies/tokens, JWT validation, claims/user ID extraction, policies, handler access checks, impersonation, or 401/403 bugs; not for UI affordance gating alone.

日本語の概要は準備中です。原文の説明を表示しています。

islamu-ngo/Event82026年10月8日 更新

blazor-bff-patterns

無料

Load for Blazor BFF server work involving YARP proxy routes, cookie sessions, access-token forwarding/refresh, downstream API calls, BFF handlers, or browser-to-API auth failures; not for client component rendering or API JWT validation alone.

日本語の概要は準備中です。原文の説明を表示しています。

islamu-ngo/Event82026年10月8日 更新

blazor-css-isolation

無料

Load when editing Blazor `.razor.css`, scoped selectors, `::deep`, BEM class names, RTL/logical CSS properties, or styling nested MudBlazor components; not for global design tokens or non-Blazor CSS.

日本語の概要は準備中です。原文の説明を表示しています。

islamu-ngo/Event82026年10月8日 更新

islamu-ngo のスキルをすべて見る

このスキルの問題を報告する