frontend-design

SKILL.md

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.

| 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) |

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. Source: stuartf303/sorcha.

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/stuartf303/sorcha --skill frontend-design Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor

View raw