مثال محلول: الـ5 خانات مع بعض

وقت ما تشوف الهيكل الكامل في prompt واحد. زميلة هاجر في فريق الهندسة طلبت منها تبص على زر دفع قبل ما يتشحن — عايزين فحص سريع للـ accessibility. هاجر ما بتكتبش كود، بس عارفة هيكل الـ prompt. ده اللي بعتته بالظبط.

الـ Prompt

Role: You are a senior frontend engineer reviewing a junior's code.
Task: Review the React component below for accessibility issues only.
Context: This will run on a public-facing checkout page; it must meet WCAG 2.1 AA.
Input:
```tsx
function CheckoutButton({ onPay }) {
  return <div onClick={onPay} style={{ background:'blue', color:'white', padding:8 }}>Pay</div>
}
```
Output: a numbered list of issues, each with the WCAG criterion and a 1-line fix. Max 5 items.

كل خانة متمليّة:

الخانة	متمليّة بـ
الدور	مهندس frontend سينيور بيراجع كود جونيور
المهمة	مراجعة لمشاكل الـ accessibility بس
الـ Context	صفحة checkout عامة، لازم تستوفي WCAG 2.1 AA
الـ Input	كومبوننت React الفعلي
الـ Output	قايمة مرقّمة، كل بند مع معيار WCAG وإصلاح من سطر واحد، 5 بنود حد أقصى

الـ Output الملتقَط

# Accessibility Issues

1. **WCAG 4.1.2 (Name, Role, Value)** - Not keyboard accessible; use `<button>` element instead of `<div>`

2. **WCAG 2.1.1 (Keyboard)** - Missing keyboard interaction; add `tabIndex={0}` and `onKeyDown` handler, or use semantic `<button>`

3. **WCAG 1.4.3 (Contrast Minimum)** - Blue background with white text may fail contrast ratio; verify 4.5:1 minimum or use darker blue

4. **WCAG 4.1.2 (Name, Role, Value)** - Missing `role="button"` attribute if keeping `<div>`; semantic `<button>` provides this automatically

5. **WCAG 2.5.5 (Target Size)** - 8px padding may create too small a touch target; ensure minimum 44×44px clickable area

**Recommended fix:**
```tsx
<button onClick={onPay} style={{ background:'#0000CC', color:'white', padding:'12px 24px' }}>Pay</button>

*لقطة من Claude Sonnet 4.5 (claude-sonnet-4-5) في 2026-04-27. الـ re-runs ممكن تختلف شوية.*

## ليه الـ output ده كويس

بص بقى على اللي رجع:

- **5 بنود، بالظبط زي ما اتطلب.** تعليمة `Max 5 items` اتحُرمت.
- **كل بند بيسمي معيار WCAG.** "WCAG 4.1.2"، "WCAG 1.4.3" — مواصفات الـ output طلبت ده والموديل سلّم.
- **كل بند ليه إصلاح من سطر واحد.** هاجر تقدر تسلّم القايمة دي لزميلتها المهندسة من غير ما تعيد كتابتها.
- **بونص: كتلة كود إصلاح مقترح.** الموديل راح أبعد شوية من المواصفات بشكل مفيد — ده شايع لما بتدي دور واضح.

## اللي هتخسره من غير كل خانة

تجربة فكرية سريعة. تخيل تشغّل نفس الـ prompt بشيلة خانة واحدة:

| الخانة الممحية | التدهور الأرجح |
|---|---|
| الدور | نبرة "ودودة عامة" "الكود ده ممكن يبقى أحسن"، من غير استشهادات WCAG. |
| المهمة ("مشاكل accessibility بس") | الموديل هيعلّق كمان على الأسلوب والتسمية والأداء — مفيد بس مش المطلوب. |
| الـ Context (WCAG 2.1 AA) | اقتراحات مبهمة "خلي ده accessible"، من غير معايير محددة. |
| الـ Input | الموديل هيخترع زر دفع عام عشان ينتقده. |
| مواصفات الـ Output | نص متصل طويل. صعب تمسحه. من غير قايمة مرقّمة. من غير حد 5 بنود. |

دي الفكرة كلها من الهيكل: كل خانة بتمليها بتشيل مصدر تخمين. مع الـ5 متمليين، الموديل ماعندوش اختيار عملي غير إنه يديك اللي عايزه.

*الوحدة الجاية: 10 أنماط prompt قابلة لإعادة الاستخدام — إمتى تختار أنهي واحد.*
:::