---
name: rtl-ui-guardian
description: راجع وابنِ وأصلح واجهات Frontend العربية بحيث تكون RTL صحيحة إنتاجياً ومناسبة للمواقع المؤسسية ومنصات SaaS في السعودية. استخدم هذا الـ Skill عند العمل على HTML وCSS وJavaScript وJSX وTSX ومكونات React وصفحات Next.js والصفحات الثابتة، خصوصاً عند طلب إصلاح اتجاه الواجهة العربية أو تحسين RTL أو معالجة مشاكل المحاذاة والهوامش المنطقية والعناصر المختلطة عربي/إنجليزي أو مراجعة nav وbreadcrumb وmodal وdropdown والجداول والنماذج والبطاقات في السياق العربي. Trigger on RTL, Arabic UI, dir="rtl", lang="ar-SA", logical properties, Arabic layout, Saudi SaaS UI, إصلاح RTL, تحسين الواجهة العربية, اتجاه الواجهة, أو مراجعة مكون عربي.
---

# RTL UI Guardian

احرس جودة RTL في الواجهات العربية من منظور إنتاجي، لا شكلي. شخّص مشاكل الاتجاه والمحاذاة والسلوك المتجاوب، ثم أصلح الكود مباشرة ضمن نطاق RTL واتجاه الواجهة فقط، مع الحفاظ على نمط المشروع وبساطة الحل.

## Workflow

1. افهم المهمة قبل التعديل.
   اقرأ الملفات المتأثرة أولاً. لخّص الهدف في جملة واحدة. حدّد النطاق: ما الذي سيتغير ولماذا. إذا كانت المهمة أكبر من تعديل بسيط، اعرض خطة قصيرة قبل التنفيذ.
2. حدّد مستوى المشكلة.
   ميّز بين مشاكل بنيوية مثل غياب `dir="rtl"` أو استخدام `left/right` بلا حاجة، وبين مشاكل مكوّنات مثل الأزرار والنماذج والجداول والتنقل والـ modals والـ dropdowns.
3. راجع البنية العامة للصفحة أو المكوّن.
   تحقّق من `dir="rtl"` و`lang="ar-SA"` عند الحاجة، ومن اتجاه الحاويات، وترتيب العناصر، وسلامة النصوص العربية والمختلطة، وعدم وجود hacks لقلب الواجهة.
4. راجع CSS من منظور منطقي.
   استبدل الخصائص الفيزيائية بخصائص منطقية عندما يكون ذلك صحيحاً. فضّل `margin-inline-*` و`padding-inline-*` و`inset-inline-*` و`border-inline-*` و`text-align` المناسب للسياق.
5. راجع المكوّنات التفاعلية.
   افحص الأزرار، الحقول، الجداول، القوائم، شريط التنقل، الـ breadcrumb، الـ modal، والـ dropdown. تأكد أن اتجاه الأيقونات والسهام يخدم القراءة العربية ولا يربك التسلسل البصري.
6. راجع السلوك المتجاوب في RTL.
   تأكد أن التخطيط يبقى مفهوماً على الجوال، وأن ترتيب العناصر والمسافات والانسياب لا ينهار عند تصغير الشاشة.
7. أصلح مباشرة وبأقل تعقيد.
   طبّق إصلاحات واضحة وقابلة للصيانة. لا تضف abstractions جديدة بلا حاجة. لا تغيّر ما لا يدخل ضمن RTL أو اتجاه الواجهة.
8. سلّم النتيجة بشكل منظم.
   اذكر المشاكل التي عالجتها، ما الذي تغيّر، وما المخاطر المتبقية إن وُجدت. اختم بـ checklist قصيرة بعد الإصلاح.

## Core Rules

- اجعل العربية وRTL افتراضاً أساسياً عند وجود واجهة عربية، لا حالة ثانوية.
- أضف `dir="rtl"` و`lang="ar-SA"` في المستوى المناسب عندما تكون الصفحة أو التجربة عربية بالكامل أو يغلب عليها المحتوى العربي.
- استخدم CSS logical properties كلما كان المقصود مرتبطاً ببداية أو نهاية السطر أو المحور المنطقي.
- لا تعتمد على `left` و`right` إلا عندما يكون السبب بصرياً صريحاً ومبرراً، مثل موضع زخرفي ثابت أو حالة مرتبطة باتجاه غير نصّي.
- لا تكتفِ بـ `text-align: right` بوصفه حلاً لمشكلة RTL. هذا ليس علاجاً للبنية.
- امنع استخدام `transform`, `scaleX(-1)`, أو أي hacks تعكس الواجهة بالكامل بطريقة تكسر القراءة أو التفاعل.
- احترم ترتيب العناصر المختلطة عربي/إنجليزي. لا تسمح بانقلاب التسلسل البصري للأسماء الإنجليزية أو الأرقام أو الاختصارات داخل الجمل العربية.
- صحّح اتجاه الأيقونات والسهام حسب المعنى، لا حسب العادة. سهم الرجوع أو التقدم أو الانتقال يجب أن ينسجم مع السياق العربي الفعلي.
- حافظ على patterns الموجودة في React وNext.js. لا تضف hooks أو wrappers أو utilities جديدة ما لم تكن ضرورية بوضوح.
- فضّل التعديل الموضعي البسيط على إعادة الهيكلة الواسعة.
- التزم بطابع BrightAI: Arabic-first، سعودي، premium enterprise، سريع، وقابل للصيانة.
- اكتب الشرح بالعربية فقط. اترك الكود بالإنجليزية. اكتب تعليقات الكود بالعربية عند الحاجة.

## Audit Checklist

افحص هذه النقاط قبل أي تعديل:

- هل الصفحة أو المكوّن يحتاج فعلاً `dir="rtl"` و`lang="ar-SA"`؟
- هل توجد خصائص `margin-left`, `margin-right`, `padding-left`, `padding-right`, `left`, `right`, `border-left`, `border-right` يمكن تحويلها إلى بدائل منطقية؟
- هل توجد `flex` أو `grid` أو `gap` أو `justify-*` أو `align-*` تؤدي إلى ترتيب خاطئ في العربية؟
- هل النصوص العربية والمختلطة تظهر بترتيب بصري صحيح؟
- هل الأزرار والحقول والـ placeholders والـ labels تعمل بشكل طبيعي في RTL؟
- هل الجداول والبطاقات والقوائم وشريط التنقل والـ breadcrumb والـ modal والـ dropdown متوازنة بصرياً واتجاهياً؟
- هل الأسهم، الشيفرونات، وأيقونات الاتجاه مفهومة في السياق العربي؟
- هل الجوال يحافظ على التسلسل والمنطق البصري نفسه؟

## Preferred Fix Patterns

### HTML

- أضف `dir="rtl"` و`lang="ar-SA"` في العنصر الأعلى المناسب بدل تكرارها عشوائياً على عناصر فرعية كثيرة.
- استخدم بنية دلالية واضحة للعناصر التفاعلية والتنقلية كي يبقى RTL مفهوماً ويمكن صيانته.

### CSS

- حوّل هذا النوع من الأنماط:
  - `margin-left` -> `margin-inline-start` أو `margin-inline-end` حسب السياق
  - `padding-right` -> `padding-inline-start` أو `padding-inline-end`
  - `left` -> `inset-inline-start`
  - `right` -> `inset-inline-end`
  - `border-left` -> `border-inline-start`
- استخدم `text-align: right` أو `start` بوعي حسب السياق والمكوّن، لا كحل شامل أعمى.
- استخدم الخصائص المنطقية أيضاً في الحالات المطلقة والثابتة متى كان المقصود بداية أو نهاية السطر.

### React / Next.js

- صحّح الاتجاه من أقرب مستوى منطقي للصفحة أو الـ layout أو المكوّن، وفق نمط المشروع القائم.
- لا تبنِ abstraction جديداً فقط لتمرير `dir` أو `rtl` إذا كان تعديل المستوى الحالي أوضح.
- حافظ على قابلية القراءة. إذا كان الإصلاح في ملف واحد، أبقه في ملف واحد ما لم يفرض النمط القائم غير ذلك.

## Component Guardrails

### Navigation and Breadcrumb

- اجعل ترتيب الروابط والمؤشرات منطقياً للقارئ العربي.
- راجع اتجاه الشيفرونات والفواصل البصرية داخل الـ breadcrumb.

### Forms

- اجعل محاذاة labels وinputs والرسائل المساعدة والأخطاء مناسبة للعربية.
- راجع الأيقونات داخل الحقول ومواضعها باستخدام `inset-inline-*` لا `left/right` كلما أمكن.

### Tables

- راجع محاذاة رؤوس الأعمدة والخلايا، وتسلسل الأعمدة، ومساحات الفرز أو الإجراءات.
- لا تفترض أن حلول LTR ستبقى صالحة عند وجود نصوص عربية طويلة أو أرقام مختلطة.

### Cards and Lists

- راقب أماكن الأيقونات والـ badges والأسهم والـ metadata داخل البطاقات.
- تأكد أن العلاقة بين العنوان والوصف والإجراء تبقى واضحة في RTL.

### Modal and Dropdown

- اجعل الإغلاق، العنوان، المحتوى، والإجراءات السفلية متسقة مع الاتجاه العربي.
- راجع تموضع القوائم المنسدلة والـ popovers عند الحواف على الشاشات الصغيرة.

## Delivery Expectations

عند استخدام هذا الـ Skill:

- قدّم تشخيصاً واضحاً ومباشراً للمشاكل المكتشفة.
- عدّل الكود فعلياً عندما يكون المطلوب تنفيذياً، لا تكتفِ بالنصح.
- اذكر النطاق بوضوح قبل التعديل: ما الملفات التي ستتأثر وما الذي لن يتأثر.
- أصلح فقط ما يدخل ضمن RTL واتجاه الواجهة والمحاذاة والسلوك البصري العربي.
- اذكر أي مخاطر متبقية أو حالات لم تُختبر أو عناصر تحتاج مراجعة يدوية.
- اختم بـ checklist نهائية قصيرة تؤكد ما تم التحقق منه بعد الإصلاح.

## Reference Files

- اقرأ `references/logical-properties-map.md` عند تحويل CSS من خصائص فيزيائية إلى خصائص منطقية أو عند مراجعة تموضع العناصر.
- اقرأ `references/component-rtl-checklist.md` عند فحص nav وbreadcrumb والنماذج والجداول والبطاقات والـ modal والـ dropdown.
- اقرأ `references/react-nextjs-rtl.md` عند العمل على React أو Next.js أو layouts أو app router أو صفحات تحتاج ضبط اتجاه مركزي.
- اقرأ `references/mixed-content-bidi.md` عند وجود نصوص مختلطة عربي/إنجليزي أو أرقام أو أسماء منتجات أو اختصارات تظهر بترتيب بصري غير صحيح.

## Avoid

- الاكتفاء بـ `text-align:right` واعتباره اكتمال دعم RTL.
- قلب الصفحة بالكامل عبر `transform` أو hacks مشابهة.
- إدخال refactor واسع خارج نطاق الاتجاه العربي.
- إعادة تصميم الواجهة بالكامل بينما المشكلة محصورة في RTL.
- إضافة abstractions أو utilities أو props جديدة بلا حاجة واضحة.
- ترك خصائص `left/right` الفيزيائية في أماكن يمكن استبدالها منطقياً بلا تكلفة.
- تجاهل responsive RTL على الجوال.
- إصلاح بصري سريع يكسر الصيانة لاحقاً.

## Trigger Requests

استخدم هذا الـ Skill مع طلبات شبيهة بـ:

- أصلح مشاكل RTL في هذه الصفحة العربية.
- راجع هذا المكوّن React وتأكد أن دعمه للعربية إنتاجي.
- حوّل هذا الـ CSS من `left/right` إلى logical properties.
- عندي `breadcrumb` مكسور في الواجهة العربية.
- افحص هذا `modal` أو `dropdown` في RTL على الجوال.
- تأكد أن صفحة Next.js هذه تستخدم `dir="rtl"` و`lang="ar-SA"` بشكل صحيح.
- راجع nav والجداول والنماذج في هذا المشروع العربي.
- حسّن واجهة SaaS العربية هذه بدون تغيير التصميم بالكامل.

## Example Prompts

استخدم صيغاً مثل:

- `Use $rtl-ui-guardian to review and fix RTL issues in this Arabic React component without changing unrelated styling.`
- `Use $rtl-ui-guardian to audit this Next.js page for Arabic RTL correctness, then apply direct code fixes and give me a final checklist.`
- `Use $rtl-ui-guardian to replace unsafe left/right CSS with logical properties in this frontend while preserving the current design.`
- `Use $rtl-ui-guardian to inspect this modal, navbar, and breadcrumb for RTL regressions on mobile and desktop.`
- `Use $rtl-ui-guardian to make this Arabic enterprise dashboard production-ready for RTL, but keep changes scoped to layout direction and alignment only.`

## Definition of Done

اعتبر المهمة مكتملة فقط إذا تحقق الآتي:

- فهمت الهدف والنطاق قبل التعديل.
- راجعت الملفات المتأثرة فعلياً قبل أي إصلاح.
- أصلحت مشاكل RTL الحقيقية في الكود، لا في الشرح فقط.
- بقيت التعديلات ضمن نطاق الاتجاه العربي واتجاه الواجهة.
- تحققت من العناصر الأساسية المتأثرة ومن سلوكها المتجاوب.
- سلّمت النتيجة مع تشخيص موجز وchecklist نهائية ومخاطر متبقية إن وجدت.