playbooks

home / skills / stuartf303 / sorcha / frontend-design

frontend-design skill

/.claude/skills/frontend-design

This skill helps you style Blazor MudBlazor components with responsive CSS isolation and material design patterns for scalable UIs.

npx playbooks add skill stuartf303/sorcha --skill frontend-design

Review the files below or copy the command above to add this skill to your agents.

Files (6)
SKILL.md
3.2 KB
---
name: frontend-design
description: |
  Styles Blazor WASM components with CSS and responsive design patterns using MudBlazor Material Design.
  Use when: Creating new components, styling existing components, implementing responsive layouts, adding animations/transitions, or working with the MudBlazor component library.
allowed-tools: Read, Edit, Write, Glob, Grep, Bash
---

# Frontend-design Skill

Sorcha uses **MudBlazor 8.15.0** for Material Design components with **CSS Isolation** as the primary styling approach. The design system follows Material Design 3 with custom extensions for blockchain/workflow visualization.

## Quick Start

### Styling a New Component

```razor
@* MyComponent.razor *@
<MudPaper Elevation="1" Class="pa-4 mb-3">
    <MudText Typo="Typo.h6" Class="mb-2">Component Title</MudText>
    <MudText Typo="Typo.body2" Color="Color.Secondary">
        Description text
    </MudText>
</MudPaper>
```

### Custom Component with CSS Isolation

```razor
@* MyCard.razor *@
<div class="custom-card @(IsSelected ? "selected" : "")">
    <div class="card-header">@Title</div>
    <div class="card-content">@ChildContent</div>
</div>

@code {
    [Parameter] public string Title { get; set; } = "";
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public bool IsSelected { get; set; }
}
```

```css
/* MyCard.razor.css */
.custom-card {
    background: white;
    border: 2px solid #1976d2;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: all 0.2s ease;
}

.custom-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    transform: translateY(-2px);
}

.custom-card.selected {
    border-color: #0d47a1;
    border-width: 3px;
}
```

## Key Concepts

| Concept | Usage | Example |
|---------|-------|---------|
| CSS Isolation | Component-scoped styles | `Component.razor.css` |
| MudBlazor Utility | Spacing, flex, alignment | `Class="d-flex pa-4 mb-3"` |
| Color System | Semantic colors | `Color.Primary`, `Color.Error` |
| Typography | Text hierarchy | `Typo.h6`, `Typo.body2` |
| Elevation | Shadow depth | `Elevation="1"` (0-24) |
| Breakpoint | Responsive | `Breakpoint.Sm` (641px) |

## Common Patterns

### Flex Layout with Gap

```razor
<div class="d-flex align-center gap-2 mb-3">
    <MudIcon Icon="@Icons.Material.Filled.Settings" />
    <MudText Typo="Typo.body1">Settings</MudText>
    <MudSpacer />
    <MudChip T="string" Size="Size.Small" Color="Color.Info">Active</MudChip>
</div>
```

### Panel with Header/Content Pattern

```razor
<MudPaper Elevation="1" Class="panel">
    <div class="panel-header">
        <MudText Typo="Typo.subtitle1">Panel Title</MudText>
    </div>
    <div class="panel-content">
        @* Content here *@
    </div>
</MudPaper>
```

## See Also

- [aesthetics](references/aesthetics.md) - Color system, typography, brand identity
- [components](references/components.md) - MudBlazor component patterns
- [layouts](references/layouts.md) - Page structure, responsive grids
- [motion](references/motion.md) - Transitions, hover effects
- [patterns](references/patterns.md) - DO/DON'T design decisions

## Related Skills

- See the **blazor** skill for component lifecycle and state management
- See the **signalr** skill for real-time UI updates

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.

FAQ

Which file should I edit to scope styles to a single component?

Add styles to ComponentName.razor.css; those rules will be scoped to that component only.

How do I control responsive behavior with MudBlazor?

Use MudBlazor breakpoints and utility classes, and apply media queries in the component CSS for precise adjustments.