frontend-design_skill

Overview

This skill styles Blazor WebAssembly components using MudBlazor 8.15.0 and CSS Isolation, following Material Design 3 with custom extensions for blockchain and workflow visualization. It provides practical patterns for component scaffolding, responsive layouts, elevation, typography, and motion. The focus is on maintainable, component-scoped CSS and MudBlazor utility classes to keep UI consistent and accessible.

How this skill works

Use component .razor files alongside Component.razor.css for CSS Isolation so styles are scoped to each component. Combine MudBlazor components (MudPaper, MudText, MudIcon, MudChip) and utility classes (d-flex, pa-4, gap-2) to compose layouts, then refine visuals with CSS transitions, hover states, and breakpoint-driven adjustments. Leverage MudBlazor semantic colors, typography tokens, and elevation levels to maintain design consistency.

When to use it

• Creating a new UI component that must follow Material Design 3 and app brand styles.
• Styling or restyling existing Blazor WASM components while avoiding global CSS leakage.
• Implementing responsive layouts and breakpoint-specific behavior in pages and components.
• Adding subtle animations, hover effects, and transitions for interaction feedback.
• Integrating MudBlazor components into blockchain/workflow visualizations that need clear hierarchy.

Best practices

• Prefer CSS Isolation (Component.razor.css) to keep styles scoped and avoid selector conflicts.
• Use MudBlazor utility classes for spacing, alignment, and small layout tweaks instead of custom CSS.
• Map visual states to semantic colors (Color.Primary, Color.Error) and use Typo tokens for text hierarchy.
• Keep transitions short (e.g., 0.2s) and GPU-friendly (transform, opacity) to maintain smooth performance.
• Use elevation (Elevation 0–24) to indicate depth and hierarchy rather than heavy borders or images.

Example use cases

• Build a selectable card component with isolated styles and hover lift using .selected class.
• Compose a header bar with icons, spacer, and status chip using d-flex, align-center, and gap utilities.
• Create a responsive panel that switches layout at Breakpoint.Sm (≈641px) using MudBlazor breakpoints.
• Add entry/exit transitions for list items to emphasize blockchain workflow steps.
• Style form controls and validation messages using semantic Color tokens and Typo styles.