انتقل إلى المحتوى

💎 مهارة تايتفكتور ستايلر TidyFactor Styler v1.1.0

حزمة هندسة الواجهات، وطبقة القرارات السياقية (CDL)، والتصميم الإنتاجي داخل المشاريع القائمة

المهارة الرسمية المعتمدة لتصميم وهندسة الواجهات الإنتاجية عبر كافة أطر العمل الحديثة ضمن منظومة TidyFactor.

npm version License: Apache-2.0 RTL Ready Anti-Slop Certified Architect Score

✨ موقع الوكالة • ⚡ سجل الأوامر الـ 13 • 🛠️ مسارات العمل الـ 8 • 🌐 أطر العمل المدعومة • 🇸🇦 هندسة الـ RTL • 📖 English Version

[!NOTE] TidyFactor Styler هي مهارة ذكاء اصطناعي (AI Agent Skill) ومحرك تصميم إنتاجي للوكلاء الأذكياء (Google Antigravity, Claude Code, Cursor, Codex, Windsurf) والمطورين، مصممة للعمل مباشرة داخل مشاريع الكود الحقيقية والقائمة (Next.js / React, PHP, WordPress, HTML/CSS). على عكس أدوات النماذج الأولية المعزولة، لا تخترع هذه المهارة معمارية خاصة بها، بل تلتزم بالكامل بأنماط المشروع، وتمنع تضارب الكلاسات والانحراف البصري (Zero Style Drift).

🌟 لماذا TidyFactor Styler؟ القيمة المضافة

graph TD
    Intent{"ماذا تريد أن تبني؟"}
    Intent -->|"نموذج أولي تفاعلي مستقل من الصفر"| D["🎨 tidyfactor-design<br/>(بروتوتايب HTML مستقل بدون أدوات بناء)"]
    Intent -->|"هيكل مشروع جديد كلياً"| S["🏗️ مسارات معمارية الأنظمة<br/>(tidyfactor-php-micro وغيرها)"]
    Intent -->|"تطوير وتصميم واجهات داخل مشروع قائم"| ST["💎 tidyfactor-styler<br/>(مكونات وأقسام وصفحات إنتاجية حقيقية)"]
لمطوري الواجهات (Frontend) لفرق التطوير والوكالات الرقمية لوكلاء الذكاء الاصطناعي (AI Agents)
الانسجام دون منافسة: تتبنى كلاسات Tailwind وإعدادات المشروع الحالية ولا تنشئ طبقة CSS موازية أو متضاربة. مرونة شاملة لكل الـ Stacks: الانتقال بسلاسة بين Next.js, PHP, WordPress بدون الحاجة لتوجيه يدوي معقد. توجيه موفر لسياق الذاكرة: ملف SKILL.md خفيف جداً (~350 Tokens) يمنع حشو الذاكرة ويستدعي الملفات عند الحاجة فقط.
طبقة القرارات السياقية (CDL): إيقاف التنفيذ التلقائي وسؤال المطور بدقة قبل التوليد عند وجود خيارات معمارية مؤثرة غير محسومة. عربية و RTL أصلية: تحويل فوري للخصائص المنطقية (ms-*, pe-*, start-*) ومعايرة دقيقة لحجم خطوط Cairo و Tajawal. نقد قبلي سباعي المحاور (7-Axis): تقييم P, H, E, S, R, V, و D لمنع التوليد العشوائي وضمان مطابقة الـ Brief.
مصفوفة الحالات الثمانية (8-States): ضمان بناء كافة حالات التفاعل (Default, Hover, Active, Focus, Disabled, Loading, Empty, Error). مصدر الحقيقة للهوية (SSOT): قراءة brand.json وربطه المباشر بمتغيرات CSS Tokens داخل إعدادات المشروع. قوائم فحص صارمة: كل مسار عمل ينتهي بقائمة تحقق إجرائية محددة للتأكد من اكتمال العمل قبل تسليمه.

⚡ سجل أوامر التصميم الـ 13 (Command Registry)

تعتمد المهارة على جدول توجيه دقيق يضم 13 أمراً مخصصاً ينقلك فوراً للهدف المطلوب:

الأمر الغرض ونية الاستخدام ما يتم تحميله في الذاكرة الناتج والقيمة العملية
brief "تثبيت الـ Design Brief للمشروع" workflows/brief.md + memory/decision-points.md توليد كاش .tidyfactor/design-brief.md لتنفيذ الأوامر التالية بسلاسة وبدون أسئلة مكررة.
component "صمم / أعد تصميم هذا المكون" workflows/component-create.md أو component-redesign.md + component-anatomy.md + decision-points.md + مكدس التقنية مكون إنتاجي تفاعلي بكافة حالاته الثمانية ومتغيرات CVA.
section "صمم / نسق هذا القسم" workflows/section-create.md أو section-redesign.md + layout-archetypes.md + nav-footer-catalog.md + decision-points.md قسم متناسق بتباعدات إيقاعية واستجابة شاشات مثالية.
page "ابنِ صفحة إنتاجية جديدة" workflows/page-create.md + layout-archetypes.md + nav-footer-catalog.md + decision-points.md + مكدس التقنية صفحة متكاملة مبنية وفق اتفاقيات وبنية مسارات المشروع.
redesign "أعد تصميم هذه الصفحة القائمة" workflows/page-redesign.md + layout-archetypes.md + nav-footer-catalog.md + quality-bar.md + decision-points.md تجديد بصري وتفاعلي شامل بدون كسر أي وظيفة أو مسار بيانات.
layout "اختر الهيكل الإنشائي للصفحة" memory/layout-archetypes.md + مكدس التقنية اختيار 1 من 8 هياكل إنشائية كبرى (editorial, interface, spatial, إلخ).
nav-footer "اختر قالب الهيدر والفوتر" memory/nav-footer-catalog.md + typography-arabic.md + rtl-css-engineering.md اختيار قوالب N1–N9 للهيدر و Ft1–Ft8 للفوتر مع دعم RTL كامل.
typography "ضبط وتنسيق منظومة الخطوط" memory/typography-arabic.md تطبيق 7 مسارات تناغم للخطوط العربية واللاتينية (Cairo, Tajawal, El Messiri, Inter).
palette "استخراج لوحة الألوان وفحص التباين" memory/brand-tokens.md + memory/asset-tooling.md توليد درجات ألوان متوافقة مع معايير إمكانية الوصول WCAG 2.1 AA.
assets "تحسين وضغط الصور والأصول" memory/asset-tooling.md + memory/quality-bar.md فحص أبعاد الصور، ضغط الأصول، وتفريغ الخلفيات عبر أدوات بايثون مدمجة.
rtl "فحص وتصحيح الاتجاهات والـ RTL" workflows/rtl-audit-fix.md + memory/rtl-css-engineering.md استبدال الكلاسات المطلقة بخصائص منطقية وتصحيح انعكاس الأيقونات.
motion "إضافة وضبط الحركات والمؤثرات" memory/motion-principles.md هندسة مؤثرات متناسقة باستخدام Framer Motion أو Alpine مع مراعاة A11y.
styles "تحديد الاتجاه أو النمط البصري" memory/design-styles.md توجيه الهوية البصرية لنمط محدد (Modern SaaS, Editorial, Swiss, إلخ).

🛠️ مسارات العمل الإنتاجية الـ 8 (Production Workflows)

كل مهمة تصميمية تتبع مساراً صارماً من خطوة الصفر حتى الفحص النهائي:

  1. brief.md: حوار الاستكشاف التفاعلي \(\rightarrow\) حسم نقاط القرار \(\rightarrow\) كتابة وتخزين كاش الـ Brief في .tidyfactor/design-brief.md.
  2. component-create.md: قراءة التصميم وحسم الـ CDL \(\rightarrow\) تحديد المتغيرات والحالات \(\rightarrow\) التنفيذ البرمجي \(\rightarrow\) النقد السباعي \(\rightarrow\) الفحص.
  3. component-redesign.md: فحص الوضع الحالي \(\rightarrow\) تحديد الهدف والأسلوب \(\rightarrow\) إعادة البناء بنطاق معزول \(\rightarrow\) التحقق من عدم حدوث Regression.
  4. section-create.md: موائمة الهيكل العام \(\rightarrow\) ضبط إيقاع التباعد \(\rightarrow\) توزيع المكونات \(\rightarrow\) إتقان الاستجابة للموبايل.
  5. section-redesign.md: عزل نطاق القسم \(\rightarrow\) ترقية التسلسل الهرمي \(\rightarrow\) تجديد العنصر البصري الجاذب \(\rightarrow\) فحص الشاشات.
  6. page-create.md: اختيار نمط الصفحة \(\rightarrow\) ربط الهيدر والفوتر \(\rightarrow\) تجميع الأقسام \(\rightarrow\) حقن وسوم الـ SEO والميتاداتا.
  7. page-redesign.md: توحيد الهوية البصرية \(\rightarrow\) تحسين مسار التحويل \(\rightarrow\) ضبط تناغم الخطوط \(\rightarrow\) تدقيق ميزانية الأداء.
  8. rtl-audit-fix.md: إزالة كلاسات الاتجاهات الثابتة \(\rightarrow\) التحويل للخصائص المنطقية \(\rightarrow\) تصحيح اتجاه الأيقونات \(\rightarrow\) موازنة الخطوط.

🧠 طبقة القرارات السياقية (Contextual Decision Layer — CDL v1.0)

عندما تكون القرارات التصميمية غامضة أو متعددة، تتدخل طبقة القرارات السياقية (decision-points.md) لحسمها قبل توليد الكود:

  • صفر ازدواجية لمصادر الحقيقة: تشير الطبقة إلى الملفات المرجعية المعتمدة (design-styles.md، typography-arabic.md، إلخ) دون تكرار خياراتها.
  • عقد الاستدعاء المباشر: الأوامر المباشرة (/styles, /typography, /layout) تعرض الخيارات كاملة للمطور دائماً دون تخطي.
  • الحفاظ الصامت في الـ Redesign: في مسارات التعديل القائمة، يتم الحفاظ تلقائياً على النمط والخط والـ layout الحالي لمنع الـ Regression.
  • تجميع أحادي بحد أقصى 3 أسئلة: تجميع نقاط القرار الغامضة في جولة واحدة وفق أولوية حتمية (D1 > D3 > D2 > D4 > D5).

🛡️ معايير مكافحة التصميم المبتذل (Anti-Slop) والنقد السباعي

لمنع مخرجات الذكاء الاصطناعي الرديئة والمكررة، يخضع كل كود لنظام التقييم الذاتي القبلي على 7 محاور:

/* Pre-emit critique: P5 H5 E5 S5 R5 V5 D5 */
P (Purpose):            هل المكون يحل الهدف الوظيفي الحقيقي المطلوب؟ (1-5)
H (Hierarchy):          هل هناك تسلسل هرمي بصري واضح وعنصر جاذب بارز؟ (1-5)
E (Execution):          هل تم بناء الحالات التفاعلية الثمانية للمكون بالكامل؟ (1-5)
S (Stack Native):       هل الكود يلتزم بأنماط وتسميات وإعدادات ستاك المشروع؟ (1-5)
R (RTL Ready):          هل جميع الهوامش والتباعدات والأيقونات محايدة الاتجاه؟ (1-5)
V (Visual Soul):        هل يتجنب الكود التدرجات البنفسجية الرخيصة والأنماط المبتذلة؟ (1-5)
D (Decision Alignment): هل المخرج البرمجي يلتزم بالكامل بما تم اعتماده في الـ Brief؟ (1-5)
المجموع الإجمالي: يجب ألا يقل عن 30/35 قبل إصدار الكود.

[Pre-Emit Self-Critique]
P (Purpose):       هل يحل هذا المكون الهدف الوظيفي الحقيقي المطلوب؟ (1-5)
H (Hierarchy):     هل يوجد تسلسل هرمي بصري واضح وعنصر جاذب رئيسي؟ (1-5)
E (Execution):     هل تم بناء كافة حالات التفاعل الثمانية بدقة؟ (1-5)
S (Stack Native):  هل يطابق الكود تسميات ومكتبات المشروع الحالي تماماً؟ (1-5)
R (RTL Ready):     هل التباعدات والأيقونات محايدة للاتجاه وصحيحة عربياً؟ (1-5)
V (Visual Soul):   هل يخلو التصميم من التدرجات البنفسجية الرخيصة والأنماط المبتذلة؟ (1-5)
المجموع الإجمالي: يجب أن يحقق 25/30 كحد أدنى قبل كتابة وتصدير الكود.

🚀 التثبيت والاستخدام

1. عبر أداة NPX مباشرة:

# تثبيت مهارة tidyfactor-styler في مجلد مشروعك الحالي
npx @tidyfactor/cli-styler add-skill

2. النسخ المباشر لمجلد مهارات الوكيل الذكي:

انسخ مجلد tidyfactor-styler إلى مجلد مهارات بيئة العمل الخاصة بك: - Google Antigravity: .agents/skills/tidyfactor-styler/ - Claude Code: .claude-skill/skills/tidyfactor-styler/ - Cursor / Windsurf / Codex: .agents/skills/tidyfactor-styler/

🏛️ منهجية TidyFactor وحوكمة الامتثال (8/8 Pass)

حققت مهارة tidyfactor-styler نسبة امتثال 100% (8/8 علامات) وفق معايير TidyFactor Skill Architect:

  1. ✅ انضباط التوجيه (Dispatcher Discipline): ملف SKILL.md يعمل كموجّه مسارات فقط بدون حشو.
  2. ✅ مسار واحد لكل نتيجة (One Workflow = One Outcome): 7 مسارات عمل محددة تنتهي بقوائم فحص.
  3. ✅ ذاكرة تشغيلية نقية (Operational Memory): نصوص تقنية وقواعد خالصة خالية من الإنشاء السردي.
  4. ✅ انعدام الهياكل الفارغة (No Empty Structures): لا توجد مجلدات وهمية أو فارغة.
  5. ✅ عزل الفلسفة عن الكود (Philosophy Isolation): فصل المعايير التشغيلية عن الخطابات الترويجية.
  6. ✅ نمو مدفوع بالمحفزات (Trigger-Justified Growth): إضافة الملفات بناءً على محفزات وظيفية دقيقة.
  7. ✅ حاجز مكافحة الابتذال (Anti-Slop Quality Bar): فحص ذاتي إلزامي عبر 6 محاور و 16 قاعدة جودة.
  8. ✅ تطابق البيئات المتعددة (Cross-Platform Parity): توافق كامل بين Antigravity و Claude و Cursor و Codex.

👨‍💻 معلومات المطور والجهة المطورة

📜 الترخيص وحوكمة المعايير

المهارة منشورة تحت رخصة MIT. جميع الحقوق محفوظة © 2026 Alwkala / منظومة TidyFactor.

🏛️ معمارية منظومة TidyFactor

منظومة TidyFactor هي بيئة معمارية برمجية مفتوحة وحزم مهارات لوكلاء الذكاء الاصطناعي قائمة على الفصل التام للمسؤوليات عبر دورة حياة المنتجات:

منظمة TidyFactor الرسمية (github.com/TidyFactor)
│
├── مهارات الحوكمة والجودة (Governance)
│   └── Skill-Architect ← الحوكمة والمنهجية      (محرك حوكمة وبناء وهندسة المهارات المعتمدة)
│
├── مهارات التصميم (Design Skills)
│   ├── Cinematic       ← التجربة البصرية المبهرة / Experience (صفحات هبوط سينمائية تفاعلية)
│   ├── Design          ← النماذج الأولية السريعة / Prototype  (محرك تصميم الواجهات التفاعلي)
│   └── Styler          ← التصميم الإنتاجي / Production        (مهندس تصميم الواجهات وضبط RTL)
│
├── مهارات التوثيق والمعرفة (Documentation)
│   └── Doc             ← التوثيق والأدلة المعتمدة / Docsify    (محرك بناء وتوليد التوثيق الشامل)
│
├── مهارات التطوير البرمجي (Development Skills)
│   ├── Next            ← منصات الساس متعددة المستأجرين / Multi-Tenant (Next.js 16 + Postgres RLS)
│   ├── HTML            ← المواقع الثابتة وسيو المحتوى / Static & SEO   (هياكل خفيفة وسريعة)
│   ├── HTMX            ← الواجهات التفاعلية الخفيفة / Hypermedia        (تفاعلات بدون جافاسكريبت معقدة)
│   ├── JS              ← تطبيقات الصفحة الواحدة بدون أطر / Vanilla SPA  (نماذج تفاعلية بـ ES Modules)
│   └── PHP             ← المنظومات المخدمية الحديثة / Server-Rendered  (مكونات حديثة وتطبيقات PHP 8)
│
└── مهارات النمو والتسويق (Growth Skills)
    └── Marketing       ← استراتيجيات النمو والمبيعات / Growth & SEO    (تسويق الاستجابة المباشرة)

💎 ثلاثي الواجهات الأمامية والتجربة (Frontend Triad)

                TidyFactor
                    │
          ┌─────────┼─────────┐
          │         │         │
      Cinematic   Design    Styler
          │         │         │
       Experience Prototype Production
          │         │         │
       "Wow"      "Build"   "Ship"

📦 مصفوفة التكامل الشامل للمجتمع (المهارات الـ 11 الرسمية)

المسار البرمجي الفئة مستودع GitHub مهارة الوكيل حزمة NPM
Skill-Architect الحوكمة TidyFactor/Skill-Architect tidyfactor-skill-architect @tidyfactor/skill-architect
Cinematic التصميم TidyFactor/Cinematic tidyfactor-cinematic @tidyfactor/cinematic
Design التصميم TidyFactor/Design tidyfactor-design @tidyfactor/design
Styler التصميم TidyFactor/Styler tidyfactor-styler @tidyfactor/styler
Doc التوثيق TidyFactor/Doc tidyfactor-doc @tidyfactor/doc
Next التطوير TidyFactor/Next tidyfactor-next @tidyfactor/next
HTML التطوير TidyFactor/HTML tidyfactor-html @tidyfactor/html
HTMX التطوير TidyFactor/HTMX tidyfactor-htmx @tidyfactor/htmx
JS التطوير TidyFactor/JS tidyfactor-js @tidyfactor/js
PHP التطوير TidyFactor/PHP tidyfactor-php @tidyfactor/php
Marketing النمو TidyFactor/Marketing tidyfactor-marketing @tidyfactor/marketing

👨‍💻 المنظمة والتواصل والدعم

📜 الترخيص والمجتمع

مرخصة تحت رخصة Apache License 2.0. حقوق النشر محفوظة © 2026 لصالح منظومة TidyFactor والوكالة الرقمية Alwkala.