frontend-design

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

مكونات أنماط Blazor WASM مع CSS وأنماط التصميم سريعة الاستجابة باستخدام MudBlazor Material Design. يُستخدم عندما: إنشاء مكونات جديدة، أو تصميم المكونات الموجودة، أو تنفيذ تخطيطات سريعة الاستجابة، أو إضافة رسوم متحركة/انتقالات، أو العمل مع مكتبة مكونات MudBlazor. المصدر: stuartf303/sorcha.

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/stuartf303/sorcha --skill frontend-design بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw