본문으로 건너뛰기
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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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월 21일 업데이트

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월 21일 업데이트

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월 21일 업데이트

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월 21일 업데이트

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월 21일 업데이트

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월 21일 업데이트

islamu-ngo의 스킬 모두 보기

이 스킬의 문제 신고