الفصل الرابع · Chapter 4 · Coding

Build real software with an AI pair
ابنِ برمجيات حقيقية مع شريك ذكي ما بيتعب

Claude Code مش إكمال تلقائي — هو وكيل بيقرا الكودبيس تبعك، بيخطط التعديلات، بيعدّل الملفات، بيشغّل اختباراتك، وبيكرر لحد ما الأمور تزبط فعلاً. هالفصل هو الصنعة: الوركفلو اللي بيطلّع نتايج ممتازة بثبات، أنماط البرومبت اللي بتفرّق المحترف عن السايح، والعدّة اللي بتخلي الوكيل يحس كأنه زميل فريق مش أداة.

Claude Code isn't autocomplete — it's an agent that reads, plans, edits, tests, and iterates until things actually work.

الطريقة · The method

The workflow that works الوركفلو اللي بيشتغل فعلاً

كل جلسة قوية مع Claude Code بتمشي على نفس الشكل. تخطّى خطوة وبتنزل الجودة؛ التزم بالخمسة وبيشتغل الوكيل مثل مهندس خبير لسا منضم لفريقك — وقرا كل ملف من أول يوم.

01

Give context — CLAUDE.md first · اعطِ السياق أولاً

شغّل /init بمشروعك وكلود رح يولّدلك CLAUDE.md — ذاكرة المشروع اللي الوكيل بيشوفها بأول كل جلسة: الـstack تبعك، أوامر البناء، الاصطلاحات، والفخاخ. خليه قصير وصادق: كل سطر فيه بيوفّر عليك تكرار نفس الحكي بمية برومبت جاي. ولما كلود يعمل شي بتصحّحه مرتين، حط التصحيح في CLAUDE.md وبيبطّل يصير.

02

Plan before code — Shift+Tab · خطط قبل الكود

لأي شغلة مش تافهة، اضغط Shift+Tab عشان تدخل بوضع التخطيط. كلود بيستكشف الكودبيس، بيقرا الملفات المعنية، وبيقترح خطة — بدون ما يلمس إشي — لحد ما توافق عليها. تصحيح خطة بيكلفك جملة وحدة؛ تصحيح خمس ملفات متعدلة غلط بيكلفك عصرية كاملة. وضع التخطيط أرخص رافعة جودة بإيدك.

03

Small, verifiable iterations · خطوات صغيرة قابلة للتحقق

مهمة وحدة، جلسة وحدة، diff واحد بتقدر تراجعه. «ضيف تحقق لنموذج التسجيل» بتغلب «حسّن نظام المصادقة» كل مرة — الأولى بتقدر تفحصها؛ الثانية مجرد إحساس. الأهداف الكبيرة منيحة، بس قصّها لخطوات لكل وحدة منها اختبار نجاح/فشل واضح. الخطوات الصغيرة كمان بتخلي السياق مركّز — وهاد بيخلي الوكيل حاد.

04

Let it run the code itself · خليه يشغّل الكود بنفسه

لا تنسخ وتلصق الكود بنفسك بين كلود ومشروعك وترجع تخبّره النتيجة — هيك إنت بتصير أبطأ جزء باللوب. Claude Code بيقدر يشغّل البناء، ينفّذ الاختبارات، يقلّع سيرفر التطوير، ويقرا الأخطاء مباشرة. اطلب منه يتحقق من شغله: «شغّل الاختبارات وصلّح أي فشل» بتحوّل مولّد كود لمهندس بيسكّر اللوب تبعه لحاله.

05

Review diffs like a senior engineer · راجع كمهندس خبير

اقرا كل diff قبل ما تعمل commit — مش عشان تلقط أخطاء إملائية (الاختبارات بتعمل هاد)، بل عشان تلقط الاتجاه: هل هاد التصميم اللي بدك تعيش معه؟ اسأل «ليش اخترت هالأسلوب؟» لما شي يبين غريب. كلود بيشرح منطقه — يا الشرح بيقنعك، يا السؤال بيصلّح الكود. الفصل الخامس بيحوّل عادة المراجعة هاي لنظام كامل.

💡
الجهد بيفرق هون. Claude Code افتراضياً على جهد xhigh — النقطة الذهبية للبرمجة والشغل الوكيلي. لريفاكتور معقّد خليه يفكّر على max ؛ ولإعادة تسمية متغير، low بتكفي وتزيد. شوف الفصل الثالث.
الصنعة · The craft

Prompting patterns that separate great from mediocre أنماط البرومبت اللي بتفرق الممتاز عن العادي

الموديل نفسه للجميع. الفرق بين «واو» و«ماشي الحال» تقريباً دايماً بالبرومبت — والنمط بتتعلمه بخمس دقايق.

Do · اعمل Prompts that work · برومبتات بتشتغل

  • حدد الهدف، والقيود، وشكل «الخلاص» — الثلاثة، كل مرة
  • أشّر عالملفات: «منطق الـretry في src/api/client.ts» بتغلب «كود الشبكة»
  • الصق مخرجات الخطأ حرفياً — الـstack trace كامل، مش تلخيصك إله
  • مهمة وحدة كل مرة، ولكل وحدة خط نهاية قابل للتحقق
  • سمّي اللي ما لازم يتغير: «لا تلمس الـpublic API»

Don't · بلاش Prompts that waste tokens · برومبتات بتحرق توكنز

  • «حسّنه» / «نضّف الكود» — أحسن كيف؟ وأنضف على مقياس مين؟
  • ترمي 5 مهمات برسالة وحدة — الوكيل بيتشتت، إنت ما بتقدر تراجع، والكل بيخسر
  • تحجب الـstack trace وتوصف الخطأ من الذاكرة
  • «مش شغال» بدون خطوات إعادة إنتاج ولا متوقع-مقابل-فعلي
  • تعيد سرد تاريخ المشروع كله و CLAUDE.md أصلاً حامله عنك

Pattern 1 — the bug-fix prompt · برومبت تصليح الخلل

العرض، خطوات إعادة الإنتاج، الخطأ حرفياً، المنطقة المشتبه فيها، وتعريف «الخلاص». هيك كلود بيوفّر عشرين دقيقة تخمين وبيروح دغري عالتشخيص. ولاحظ: مبرمج عربي بيكتب برومبته مخلوط عربي وإنجليزي بكل راحة — كلود بيفهم الاثنين.

برومبت · prompt — bug fix
في مشكلة بالـ checkout: بيرجع 500 لما السلة فيها منتج عليه خصم.

Repro: add any item, apply code SAVE10, click "Pay now".
Expected: order confirmation. Actual: 500 error.

Server log:
  TypeError: Cannot read properties of undefined (reading 'amount')
      at applyDiscount (src/checkout/pricing.ts:47)
      at calculateTotal (src/checkout/pricing.ts:21)

غالباً السبب refactor الكوبونات الأسبوع الماضي في src/checkout/.
دوّر على الـ root cause وصلّحه، وضيف regression test بيفشل
بدون الإصلاح. Done = كل الاختبارات خضرا.

Pattern 2 — the feature prompt · برومبت الميزة الجديدة

الهدف، القيود، ومعايير القبول. لاحظ إنه ما في كيف — إنت موظّف الوكيل عشان الكيف. معايير القبول هي العقد بيناتكم.

برومبت · prompt — feature
بدي أضيف CSV export لصفحة المعاملات (src/pages/transactions/).

Constraints:
- استعمل نفس الـ filter state الموجود — صدّر بالضبط اللي ظاهر عالشاشة
- Stream the download; never hold more than 1,000 rows in memory
- بدون dependencies جديدة

Acceptance criteria:
1. زر "Export CSV" بيظهر جنب فلتر التاريخ
2. Columns: date, description, category, amount (ISO dates, 2-decimal amounts)
3. تصدير 50,000 صف بيخلص بدون ما تجمد الواجهة
4. Unit test بيغطي منطق الـ row formatting

خطط أولاً — ورّيني الخطة قبل ما تعدّل أي شي.

Pattern 3 — the refactor prompt · برومبت إعادة الهيكلة

الريفاكتور هو المكان اللي «لا تغيّر السلوك» لازم تنقال فيه بصوت عالي — وهو المكان اللي مجموعة الاختبارات الموجودة بتصير فيه عقد الأمان تبعك.

برومبت · prompt — refactor
ملف src/utils/dates.ts صار 600 سطر وخالط formatting
وparsing وtimezone math ببعض. قسّمه لثلاث موديولات مركزة
تحت src/utils/dates/.

Rules:
- Zero behavior changes — هاي إعادة هيكلة صافية بس
- خلّي كل export موجود شغال عبر index.ts barrel،
  حتى ولا ملف ثاني يضطر يغيّر الـ imports تبعه
- شغّل الـ test suite قبل وبعد؛ لازم النتيجتين يطلعوا متطابقتين

ورّيني الـ file layout المقترح قبل ما تبلش تنقل كود.
العدّة · The toolkit

Claude Code power tools عدّة كلود كود الثقيلة

ثماني ميزات بتحوّل وكيل شاطر لوكيل مفصّل عليك. رح تتعرف عليهم طبيعياً مع كبر مشاريعك — بس معرفتك إنهم موجودين هي نص الميزة.

📝

CLAUDE.md · ذاكرة المشروع

ذاكرة المشروع اللي الوكيل بيقراها كل جلسة — الـstack ، الأوامر، الاصطلاحات، والألغام. ولّدها بـ /init ، وبعدين اعتني فيها كأنها توثيق — لأنها فعلاً هيك.

🗺️

Plan Mode · وضع التخطيط

Shift+Tab — كلود بيستكشف وبيقترح قبل ما يعدّل. إنت بتوافق، بتظبّط، أو بتعيد التوجيه. قراءة-فقط لحد ما تقول انطلق.

Slash Commands · أوامر السلاش

تحكمات جاهزة: /help بيعرضلك كل شي، /model بيبدّل الموديلات، /init بيكتب CLAUDE.md ، و /code-review بيراجع تعديلاتك.

📚

Skills · مهارات جاهزة

كتيّبات مهام قابلة لإعادة الاستخدام — تشيك ليست نشر، طقوس إصدار، معيار المراجعة تبع فريقك — مغلّفة عشان كلود يحمّلها ويمشي عليها عند الطلب.

🔌

MCP Servers · بوابات للعالم

بروتوكول الـModel Context Protocol بيوصّل كلود بالعالم الخارجي: قواعد بيانات، متصفحات، APIs ، أدوات تصميم. الوكيل بيبطّل يخمّن عن أنظمة بيقدر يسألها مباشرة.

🤝

Subagents · وكلاء فرعيون

مساعدين بالتوازي للشغلات الكبيرة — وكيل واحد بيطلق خمس وكلاء فرعيين يفتّشوا كودبيس ضخمة أو يبحثوا خيارات بنفس الوقت، وبعدين بيدمج اللي لقوه.

🪝

Hooks · خطافات الأحداث

شغّل سكربتاتك على أحداث الوكيل — فورمات تلقائي بعد كل تعديل ملف، lint قبل كل commit ، إشعار لما مهمة طويلة تخلص. حتمية وين ما بدك إياها.

🛡️

Permission Modes · أوضاع الصلاحيات

إنت بتقرر شو الوكيل بيلمس: أي أوامر بتمشي بحرية، أي بتستأذن أول، وأي ممنوعة نهائياً. الاستقلالية مفتاح مدرّج مش زر — وإنت الماسكه.

شوفها بتصير · Watch it happen

A real session, end to end جلسة حقيقية، من أولها لآخرها

هيك بيبين اللوب الكامل عالواقع — سياق، خطة، تعديل، تحقق، commit. خمس دقايق وقت فعلي، و commit واحد قابل للمراجعة بالآخر.

جلسة · Claude Code session
# افتح مشروعك في Claude Code — من التطبيق أو المحرر أو المتصفح

╭─ Claude Code · claude-opus-5 · effort: xhigh ─╮
│  ~/projects/notesapp · CLAUDE.md loaded       │
╰───────────────────────────────────────────────╯

> Add dark mode to the settings screen. Follow the theme
  tokens in src/theme.ts, persist the choice, and respect
  the system preference on first launch. Plan first.

⏸ plan mode — reading before proposing…
● Read src/theme.ts, src/screens/Settings.tsx, src/store/prefs.ts
● Grep "useColorScheme" → 0 results — system preference not wired yet

Plan:
  1. Extend theme.ts — add dark palette next to existing tokens
  2. New ThemeProvider with system / light / dark modes
  3. Settings.tsx — three-way toggle, persisted via prefs store
  4. Default to system preference when no saved choice exists
  5. Run test suite + typecheck to verify

> Approved — go.

● Edit src/theme.ts          +42 lines  (dark token palette)
● Write src/ThemeProvider.tsx +68 lines
● Edit src/screens/Settings.tsx +31 −4  (appearance section)
● Edit src/store/prefs.ts    +9 lines   (themeMode: persisted)

 Run tests
  ✕ 1 failed — Settings renders appearance toggle (snapshot stale)
● Snapshot is outdated, not wrong — updating and re-running
 Re-run tests
  ✓ 34 passed, 0 failed
 npx tsc --noEmit
  ✓ no type errors

Done. Dark mode ships behind a three-way toggle
(System / Light / Dark), persisted in prefs, defaulting
to the OS setting. 4 files changed, all checks green.

> Commit it.

 git add -A && git commit -m "Add dark mode with system-preference default"
  [main 3f8a21c] 4 files changed, 150 insertions(+), 4 deletions(-)
💡
لاحظ شو عمل البني آدم: كتب جملتين، وافق على خطة، وقال «اعمل كوميت». ولاحظ شو ظل بإيده — الهدف، والقيود، والقرار الأخير. هالتقسيم للشغل هو اللعبة كلها.
النموذج الذهني · The mental model

Working with an agent: the mindset الشغل مع وكيل: العقلية الصح

المهندسين اللي عم يطلّعوا نتايج خرافية من كلود مش عم يكتبوا برومبتات أقوى — عم يفكروا بالشراكة بطريقة مختلفة.

🏛️

You are the architect · إنت المهندس المعماري

التوجيه والمراجعة صاروا شغلتك؛ الكتابة صارت اختيارية. إنت بتختار شو ينبنى، أي تنازلات مقبولة، وأي سقف جودة لازم الشغل يوصله. الوكيل بينفّذ ببراعة جوّا الإطار اللي بترسمه — فأغلب قوتك برسم إطار أحسن.

🔭

Context is everything · السياق هو كل شي

الوكيل بيعرف بس اللي بيشوفه: الـCLAUDE.md تبعك، الملفات اللي بيقراها، واللي بتحكيله إياه. ما بيعرف عن الاجتماع اللي قررتوا فيه ضد الـmicroservices ، ولا إنه موديول الدفع هش. لما النتيجة تخيّب، اسأل أول شي: «شو السياق اللي كان ناقصه؟» — هالسؤال بيصلّح جلسات أكثر من أي برومبت ذكي.

🔍

Trust, but verify · ثق، بس تحقق

كلود واثق وغالباً صح — وهاد بالضبط اللي بيخلي الغلطة النادرة خطيرة إذا مش منتبه. لا تقبل «خلصت» بدون دليل: اختبارات ناجحة، مخرجات معروضة، و diff مقروء. الفصل الجاي بيبني هالعادة بنظام تحقق كامل، من الـTDD للمراجعة متعددة الوكلاء.

🔁

Iterate fast · كرّر بسرعة

نتيجة معقولة بدقيقتين مع ثلاث تحسينات سريعة بتغلب عشرين دقيقة بصياغة أول برومبت مثالي. اللوب رخيص — استعمله. «منيح، هلق عالج الحالة الفاضية» رسالة مهنية مية بالمية. الزخم بيتراكم؛ والكمالية بتعطّل.

Practice exercise · تمرين عملي

Your first real session · أول جلسة حقيقية إلك

افتح مشروع حقيقي — أي شي بتشتغل عليه فعلاً — وشغّل claude ، وبعدين /init عشان يولّد الـCLAUDE.md تبعه. اقرا شو كتب كلود عن مشروعك وصلّح أي شي طلع غلط. بعدين اطلب تحسين صغير واحد بمعايير خلاص واضحة، مثلاً:

برومبتك · your prompt
ضيف input validation لنموذج التواصل: الإيميل لازم يكون
عنوان صالح، والرسالة بين 10–2000 حرف. اعرض inline errors،
وعطّل زر الـ submit لحد ما كل شي يصير valid.
Done = الاختبارات الموجودة كلها بتمر، وبتورّيني الفورم
عم يرفض "abc" كإيميل.

استعمل وضع التخطيط، وافق على الخطة، واقرا الـdiff قبل الـcommit. هاد كل الوركفلو — وهيك بتكون عملت باحتراف الشي اللي أغلب الناس عمرهم ما بيتعلموه أصلاً.