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 中使用

查看原文