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

使用 MudBlazor Material Design 通過 CSS 和響應式設計模式設置 Blazor WASM 組件的樣式。 使用場合：創建新組件、設計現有組件的樣式、實現響應式佈局、添加動畫/過渡或使用 MudBlazor 組件庫。 來源：stuartf303/sorcha。

開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/stuartf303/sorcha --skill frontend-design 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用

查看原文