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 マテリアル デザインを使用して、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 で使用できるようになります

原文を見る