Skip to content

docs(design): streamlined 3-column command table & dedicated technical commands guide #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alwkala merged 1 commit into from
Sep 5, 2026
Merged

docs(design): streamlined 3-column command table & dedicated technical commands guide #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 32 additions & 28 deletions README.ar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,34 +201,38 @@ graph LR

---

## ⚡ سجل الأوامر الـ 24 (24 Slash Commands Registry)

| المرحلة | الأمر (Command) | الهدف وقصد المستخدم | الذاكرة التشغيلية المحقونة | المخرج الأساسي |
|---|---|---|---|---|
| **1. الاستكشاف** | `/brief` | استكشاف السياق عبر بروتوكول DM-DA المزدوج | `workflows/brief.md` + `memory/decision-points.md` | `.tidyfactor/brief.md` |
| **1. الاستكشاف** | `/study` | استخراج الـ DNA البصري من موقع مرجعي أو صورة | `commands/study.md` + `memory/01-design-schools.md` | تقرير تحليلي للهوية البصرية |
| **2. التأسيس** | `/init` | بدء نظام تصميم ونموذج أولي جديد | `workflows/init-prototype.md` + `memory/architecture.md` | مجلد `design-system/` وملف `index.html` |
| **2. التأسيس** | `/brand` | إدارة رموز التصميم في ملف `brand.yaml` | `commands/brand.md` + `memory/11-brand-json-v2.md` | ملف `brand.yaml` المعتمد |
| **2. التأسيس** | `/typography` | توليد أزواج الخطوط العربية واللاتينية بدقة | `commands/typography.md` + `memory/12-typography-matrix.md` | رموز الخطوط وربط Google Fonts |
| **2. التأسيس** | `/school` | تحديد المدرسة البصرية (Minimal, Brutalist...) | `commands/school.md` + `memory/01-design-schools.md` | تثبيت المدرسة في `brand.yaml` |
| **2. التأسيس** | `/tokens` | توليد ومزامنة متغيرات CSS المشتركة | `commands/tokens.md` + `memory/02-design-tokens.md` | ملف `design-system/tokens.css` |
| **2. التأسيس** | `/palette` | استخراج لوحة الألوان وحساب تباين WCAG AAA | `commands/palette.md` + `scripts/extract_palette.py` | رموز الألوان للوضعين الفاتح والداكن |
| **2. التأسيس** | `/assets` | تحسين الصور والتحويل إلى WebP وإزالة الخلفيات | `commands/assets.md` + `scripts/optimize_images.py` | أصول بصرية خفيفة دون 150KB |
| **3. الهيكلية** | `/layout` | اختيار النموذج الهيكلي العام (L1 إلى L4) | `commands/layout.md` + `memory/13-layout-archetypes.md` | هيكل شبكي متجاوب ومدروس |
| **3. الهيكلية** | `/nav-footer` | ربط أشرطة التنقل والتذييل من الكتالوج | `commands/nav-footer.md` + `memory/14-nav-footer-catalog.md` | مكونات الهيدر والفوتر المتجاوبة |
| **3. الهيكلية** | `/page` | تجميع صفحة تسويقية أو محتوى كاملة | `workflows/init-prototype.md` + `memory/05-component-anatomy.md` | صفحة HTML نقية تقرأ الرموز العامة |
| **3. الهيكلية** | `/dashboard` | تجميع لوحة تحكم وتطبيقات كثيفة البيانات | `workflows/init-prototype.md` + `memory/05-component-anatomy.md` | بطاقات KPI، جداول، وشريط جانبي |
| **4. المكونات** | `/components` | بناء مكونات الواجهة وفق مصفوفات التشريح | `commands/components.md` + `memory/05-component-anatomy.md` | ملف `components.css` المنظم |
| **4. المكونات** | `/states` | إلزام المكونات بالحالات التفاعلية الـ 8 | `commands/states.md` + `memory/05-component-anatomy.md` | حالات (الخمول، التحويم، التركيز، التعطيل...) |
| **5. الحركة** | `/motion` | تطبيق منحنيات التسارع الفيزيائية والحركة | `commands/motion.md` + `memory/04-motion-principles.md` | ملف `motion.js` المعتمد على GSAP/CSS |
| **5. الحركة** | `/flow` | ربط التنقل والتفاعل بين صفحات النموذج الأولي | `commands/flow.md` + `memory/09-prototype-flow.md` | مسارات التنقل السلسة بالمتصفح |
| **5. الحركة** | `/i18n` | دعم العربية والمحاذاة التلقائية RTL | `commands/i18n.md` + `memory/08-arabic-bilingual.md` | واجهة ثنائية الاتجاه مع خطوط عربية دقيقة |
| **6. الجودة** | `/perf` | فحص ميزانية الأداء وأحجام الملفات | `commands/perf.md` + `memory/15-performance-budget.md` | تقرير التحقق من بقاء الصفحة دون 500KB |
| **6. الجودة** | `/audit` | التدقيق الهيكلي الميكانيكي وختم الجودة | `workflows/audit-prototype.md` + `memory/06-quality-bar.md` | ختم الجودة ذو المحاور الـ 7 (`P5 H5...`) |
| **6. الجودة** | `/clone` | استخراج نظام التصميم هندسياً من رابط خارجي | `workflows/clone-prototype.md` + `memory/03-narrative-conversion.md` | رموز ومكونات نظيفة معاد بناؤها |
| **6. الجودة** | `/retrofit` | توحيد الصفحات المشتتة تحت نظام تصميم مركزي | `workflows/retrofit-prototype.md` + `memory/07-consistency-contract.md` | إزالة التنسيقات الفردية وتوحيدها بالرموز |
| **7. التسليم** | `/handoff` | استخراج مواصفات التسليم البرمجي للمطورين | `commands/handoff.md` + `memory/11-brand-json-v2.md` | جداول المتغيرات وتوثيق التسليم |
| **7. التسليم** | `/deploy` | إطلاق خادم المعاينة المحلي والنشر الثابت | `commands/deploy.md` + `memory/06-quality-bar.md` | معاينة حية بدون خطوات بناء معقدة |
## ⚡ سجل الأوامر الـ 24 (24 Commands Registry)

> [!TIP]
> **الدليل التقني الكامل لآلية عمل الأوامر**:
> للاطلاع على التفاصيل الهندسية الكاملة، والذاكرة التشغيلية المحقونة، ومخرجات كل أمر بدقة، راجع [دليل الأوامر التقني (docs/COMMANDS.ar.md)](docs/COMMANDS.ar.md).

| الأمر (Command) | الهدف وقصد المستخدم (Purpose & User Intent) | المرحلة (Stage) |
|:---|:---|:---:|
| [`/brief`](docs/COMMANDS.ar.md#brief) | استكشاف سياق التصميم عبر بروتوكول DM-DA (الارتجال السريع أو المناظرة) | `الاستكشاف` |
| [`/study`](docs/COMMANDS.ar.md#study) | استخراج الـ DNA البصري والألوان من موقع مرجعي أو صورة ملهمة | `الاستكشاف` |
| [`/init`](docs/COMMANDS.ar.md#init) | تأسيس نظام التصميم ونموذج أولي برمجي أصيل بدون خطوات بناء معقدة | `التأسيس` |
| [`/brand`](docs/COMMANDS.ar.md#brand) | إنشاء وتدقيق وإدارة رموز التصميم في ملف `brand.yaml` المعتمد | `التأسيس` |
| [`/typography`](docs/COMMANDS.ar.md#typography) | توليد أزواج الخطوط العربية واللاتينية وفق الحالة النفسية بمقاييس نسبية | `التأسيس` |
| [`/school`](docs/COMMANDS.ar.md#school) | تثبيت المدرسة البصرية المعتمدة (Minimalist, Brutalist, Glass...) | `التأسيس` |
| [`/tokens`](docs/COMMANDS.ar.md#tokens) | توليد وتدقيق ومزامنة متغيرات CSS المركزية في `tokens.css` | `التأسيس` |
| [`/palette`](docs/COMMANDS.ar.md#palette) | استخراج لوحة الألوان وضمان نسب التباين وفق معيار WCAG 2.1 AAA | `التأسيس` |
| [`/assets`](docs/COMMANDS.ar.md#assets) | تحسين الصور والتحويل إلى WebP (<150KB) وتفريغ الخلفيات آلياً | `التأسيس` |
| [`/layout`](docs/COMMANDS.ar.md#layout) | اختيار الهيكل الشبكي العام للصفحة (L1 إلى L4) وبناء الحاويات | `الهيكلية` |
| [`/nav-footer`](docs/COMMANDS.ar.md#nav-footer) | ربط أشرطة التنقل الاحترافية (N1–N9) والتذييل المتجاوب (Ft1–Ft8) | `الهيكلية` |
| [`/page`](docs/COMMANDS.ar.md#page) | تجميع صفحة تسويقية أو محتوى كاملة تقرأ الرموز العامة فقط | `الهيكلية` |
| [`/dashboard`](docs/COMMANDS.ar.md#dashboard) | بناء لوحات تحكم وتطبيقات كثيفة البيانات ببطاقات KPI وجداول متقدمة | `الهيكلية` |
| [`/components`](docs/COMMANDS.ar.md#components) | هندسة عناصر الواجهة وفق معايير التشريح في `components.css` | `المكونات` |
| [`/states`](docs/COMMANDS.ar.md#states) | إلزام العناصر بالحالات التفاعلية الـ 8 (الخمول، التحويم، التركيز، التعطيل...) | `المكونات` |
| [`/motion`](docs/COMMANDS.ar.md#motion) | تطبيق منحنيات التسارع الفيزيائية وانتقالات GSAP وانسيابية الحركة | `الحركة` |
| [`/flow`](docs/COMMANDS.ar.md#flow) | ربط التفاعل والتنقل السلس بين صفحات وشاشات النموذج الأولي | `الحركة` |
| [`/i18n`](docs/COMMANDS.ar.md#i18n) | دعم العربية وانعكاس الاتجاه RTL السلس وضبط خصائص الخط العربي | `الحركة` |
| [`/perf`](docs/COMMANDS.ar.md#perf) | فحص ميزانية الأداء وضمان بقاء وزن الصفحة الإجمالي دون 500KB | `الجودة` |
| [`/audit`](docs/COMMANDS.ar.md#audit) | التدقيق الهيكلي الميكانيكي، وفحص الرداءة، وختم الجودة السباعي (`P5...`) | `الجودة` |
| [`/clone`](docs/COMMANDS.ar.md#clone) | استخراج نظام التصميم ومحاكاته برمجياً من رابط موقع خارجي | `الجودة` |
| [`/retrofit`](docs/COMMANDS.ar.md#retrofit) | إزالة التنسيقات الفردية وتوحيد الصفحات المشتتة تحت الرموز المشتركة | `الجودة` |
| [`/handoff`](docs/COMMANDS.ar.md#handoff) | تصدير مواصفات التسليم البرمجي وجداول متغيرات CSS للمطورين | `التسليم` |
| [`/deploy`](docs/COMMANDS.ar.md#deploy) | إطلاق خادم المعاينة المحلي والنشر الفوري على استضافة ثابتة | `التسليم` |

---

Expand Down
56 changes: 30 additions & 26 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,32 +203,36 @@ graph LR

## ⚡ The 24-Command Registry

| Lifecycle Stage | Slash Command | Purpose & User Intent | Injected Operational Memory | Primary Output |
|---|---|---|---|---|
| **1. Discovery** | `/brief` | Design context discovery & DM-DA protocol | `workflows/brief.md` + `memory/decision-points.md` | `.tidyfactor/brief.md` |
| **1. Discovery** | `/study` | Extract visual DNA from reference URL/image | `commands/study.md` + `memory/01-design-schools.md` | Structured visual DNA report |
| **2. Foundation** | `/init` | Scaffold new design system / prototype suite | `workflows/init-prototype.md` + `memory/architecture.md` | `design-system/` + semantic `index.html` |
| **2. Foundation** | `/brand` | Scaffold and manage `brand.yaml` design tokens | `commands/brand.md` + `memory/11-brand-json-v2.md` | Authoritative `brand.yaml` SSOT |
| **2. Foundation** | `/typography` | Mood-routed typography pairing (Latin + Arabic) | `commands/typography.md` + `memory/12-typography-matrix.md` | Font tokens + Google Fonts preconnect |
| **2. Foundation** | `/school` | Lock visual movement (Minimal, Brutalist, Glass...) | `commands/school.md` + `memory/01-design-schools.md` | Visual school declared in `brand.yaml` |
| **2. Foundation** | `/tokens` | Manage design tokens & CSS custom properties | `commands/tokens.md` + `memory/02-design-tokens.md` | Synchronized `tokens.css` |
| **2. Foundation** | `/palette` | Extract color palette with WCAG AAA verification | `commands/palette.md` + `scripts/extract_palette.py` | Light & dark mode contrast tokens |
| **2. Foundation** | `/assets` | Optimize images, convert to WebP, remove backgrounds | `commands/assets.md` + `scripts/optimize_images.py` | Sub-150KB WebP assets |
| **3. Architecture** | `/layout` | Select macrostructure archetype (L1–L4) | `commands/layout.md` + `memory/13-layout-archetypes.md` | Scaffolded grid layout shell |
| **3. Architecture** | `/nav-footer` | Wire navigation (N1–N9) & footer (Ft1–Ft8) | `commands/nav-footer.md` + `memory/14-nav-footer-catalog.md` | Production nav and footer components |
| **3. Architecture** | `/page` | Assemble content or marketing page | `workflows/init-prototype.md` + `memory/05-component-anatomy.md` | Markup-only `pages/<name>.html` |
| **3. Architecture** | `/dashboard` | Assemble data-dense admin or app dashboard | `workflows/init-prototype.md` + `memory/05-component-anatomy.md` | KPI card grids, sidebar rail & data tables |
| **4. Components** | `/components` | Scaffold UI components adhering to anatomy | `commands/components.md` + `memory/05-component-anatomy.md` | `components.css` component definitions |
| **4. Components** | `/states` | Enforce 8-state interactive wrappers | `commands/states.md` + `memory/05-component-anatomy.md` | Idle, hover, focus, active, disabled states |
| **5. Motion** | `/motion` | Physics-based easing & animation recipes | `commands/motion.md` + `memory/04-motion-principles.md` | `motion.js` with GSAP / CSS fallbacks |
| **5. Motion** | `/flow` | Wire client-side interactive prototype navigation | `commands/flow.md` + `memory/09-prototype-flow.md` | Single-page prototype transitions |
| **5. Motion** | `/i18n` | Arabic/RTL localization & bidirectional UI | `commands/i18n.md` + `memory/08-arabic-bilingual.md` | Mirrored layout + Arabic typography |
| **6. Quality** | `/perf` | Audit performance budget & page weight | `commands/perf.md` + `memory/15-performance-budget.md` | Sub-500KB total page weight report |
| **6. Quality** | `/audit` | Structural consistency audit & quality bar | `workflows/audit-prototype.md` + `memory/06-quality-bar.md` | 7-Axis Quality Stamp (`P5 H5 E5 S5 R5 V5 D5`) |
| **6. Quality** | `/clone` | Reverse-engineer design system from external URL | `workflows/clone-prototype.md` + `memory/03-narrative-conversion.md` | Clean reconstructed tokens |
| **6. Quality** | `/retrofit` | Unify drifted prototype under design system | `workflows/retrofit-prototype.md` + `memory/07-consistency-contract.md` | Inline styles eliminated & mapped to tokens |
| **7. Delivery** | `/handoff` | Export developer specs & CSS variable map | `commands/handoff.md` + `memory/11-brand-json-v2.md` | Developer handoff tables & documentation |
| **7. Delivery** | `/deploy` | Live local preview server & zero-build deploy | `commands/deploy.md` + `memory/06-quality-bar.md` | Static preview on local or hosting server |
> [!TIP]
> **Complete Technical Reference & Output Artifacts**:
> For full execution details, injected operational memory files, and deliverable artifacts for each command, see the dedicated [Technical Commands Reference (docs/COMMANDS.md)](docs/COMMANDS.md).

| Command | Purpose & User Intent | Stage |
|:---|:---|:---:|
| [`/brief`](docs/COMMANDS.md#brief) | Establish strategic design context via DM-DA protocol (Smart 3-Round or Debate) | `Discovery` |
| [`/study`](docs/COMMANDS.md#study) | Reverse-engineer visual DNA, colors, and rhythm from reference URL or image | `Discovery` |
| [`/init`](docs/COMMANDS.md#init) | Scaffold zero-build design system repository & semantic HTML foundation | `Foundation` |
| [`/brand`](docs/COMMANDS.md#brand) | Scaffold, audit, and manage `brand.yaml` design token SSOT | `Foundation` |
| [`/typography`](docs/COMMANDS.md#typography) | Mood-routed typography pairing (Latin + Arabic) with modular ratio scales | `Foundation` |
| [`/school`](docs/COMMANDS.md#school) | Lock visual movement (Minimalist, Brutalist, Glass, Editorial, Playful) | `Foundation` |
| [`/tokens`](docs/COMMANDS.md#tokens) | Generate, audit, and synchronize CSS custom properties in `tokens.css` | `Foundation` |
| [`/palette`](docs/COMMANDS.md#palette) | Extract color palette with computed WCAG 2.1 AAA contrast tokens | `Foundation` |
| [`/assets`](docs/COMMANDS.md#assets) | Optimize images, convert to WebP (<150KB), and remove backgrounds | `Foundation` |
| [`/layout`](docs/COMMANDS.md#layout) | Scaffold responsive macrostructure shell archetype (L1 to L4) | `Architecture` |
| [`/nav-footer`](docs/COMMANDS.md#nav-footer) | Wire production navigation shells (N1–N9) & footers (Ft1–Ft8) | `Architecture` |
| [`/page`](docs/COMMANDS.md#page) | Assemble token-disciplined marketing or content page (`pages/<name>.html`) | `Architecture` |
| [`/dashboard`](docs/COMMANDS.md#dashboard) | Assemble data-dense admin or app screen with KPI cards & data tables | `Architecture` |
| [`/components`](docs/COMMANDS.md#components) | Scaffold UI primitives with strict component anatomy in `components.css` | `Components` |
| [`/states`](docs/COMMANDS.md#states) | Enforce 8-state interactive wrappers (idle, hover, active, focus, disabled...) | `Components` |
| [`/motion`](docs/COMMANDS.md#motion) | Physics-based easing curves, scroll choreography & GSAP transitions | `Motion` |
| [`/flow`](docs/COMMANDS.md#flow) | Wire client-side interactive prototype transitions between screens | `Motion` |
| [`/i18n`](docs/COMMANDS.md#i18n) | Bi-directional RTL layout mirroring & tailored Arabic typography | `Motion` |
| [`/perf`](docs/COMMANDS.md#perf) | Audit asset performance budget (<500KB total page weight) | `Quality` |
| [`/audit`](docs/COMMANDS.md#audit) | Structural AST audit, anti-slop scan & 7-Axis Quality Stamp (`P5 H5 E5 S5 R5 V5 D5`) | `Quality` |
| [`/clone`](docs/COMMANDS.md#clone) | Reverse-engineer clean design tokens from external production URL | `Quality` |
| [`/retrofit`](docs/COMMANDS.md#retrofit) | Eradicate inline CSS styles and re-map drifted pages to shared tokens | `Quality` |
| [`/handoff`](docs/COMMANDS.md#handoff) | Export developer handoff specification & CSS variable mapping tables | `Delivery` |
| [`/deploy`](docs/COMMANDS.md#deploy) | Launch local zero-build preview server and static hosting deployment | `Delivery` |

---

Expand Down
Loading
Loading