Vibe Index
🎯

frontend-design

🎯Skill

from stuartf303/sorcha

VibeIndex|
What it does

Styles Blazor WASM components using MudBlazor Material Design, implementing responsive layouts with CSS isolation and custom design patterns.

πŸ“¦

Part of

stuartf303/sorcha(22 items)

frontend-design

Installation

git cloneClone repository
git clone https://github.com/StuartF303/Sorcha.git
πŸ“– Extracted from docs: stuartf303/sorcha
Need more details? View full documentation on GitHub β†’
3Installs
-
AddedFeb 4, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

|

Overview

# 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 @

Component Title

Description text

```

Custom Component with CSS Isolation

```razor

@ MyCard.razor @

@Title

@ChildContent

@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

Settings

Active

```

Panel with Header/Content Pattern

```razor

Panel Title

@ Content here @

```

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

More from this repository10

🎯
xunit🎯Skill

xunit skill from stuartf303/sorcha

🎯
dotnet🎯Skill

Configures .NET 10 projects with C# 13 features, service defaults, dependency injection, and modern development patterns.

🎯
nbitcoin🎯Skill

nbitcoin skill from stuartf303/sorcha

🎯
cryptography🎯Skill

Generates cryptographic keys, signs/verifies data, and manages HD wallets using multi-algorithm support across ED25519, P-256, and RSA-4096.

🎯
docker🎯Skill

Manages Docker containerization and docker-compose orchestration for building, running, and configuring multi-service container environments.

🎯
minimal-apis🎯Skill

minimal-apis skill from stuartf303/sorcha

🎯
entity-framework🎯Skill

entity-framework skill from stuartf303/sorcha

🎯
yarp🎯Skill

yarp skill from stuartf303/sorcha

🎯
redis🎯Skill

Implements Redis caching, session management, and distributed coordination for Sorcha, enabling efficient token tracking, rate limiting, and shared state across services.

🎯
fluent-assertions🎯Skill

fluent-assertions skill from stuartf303/sorcha