الفصل الخامس · Chapter 5 · 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 ويزيد. راجِع الفصل الرابع.

Reviewing a diff inside the app · مراجعة التعديلات داخل التطبيق

أوّل ما يعدّل كلود ملفاً تُفتح لوحة Diff على اليمين تلقائياً: قائمة الملفات، والتغييرات سطراً سطراً. ويمكنك الضغط على أي سطر لكتابة ملاحظة، ثم إرسالها جميعاً دفعةً واحدة بـCmd+Enter — تماماً كمراجعة pull request، لكن أسرع.

رسم توضيحي · illustration — Diff pane
Claude  ·  Code  —  +12 −1
src/theme.ts
src/Settings.tsx
src/store/prefs.ts
export const tokens = {   light: { bg: '#fff', fg: '#111' }, + dark:  { bg: '#0b0d12', fg: '#e8ecf4' }, + // respects the system preference on first launch − // TODO: dark mode later }
💬 اضغط على سطر لكتابة ملاحظة… Review code
1
قائمة الملفات التي تغيّرت. اضغط أي ملف لعرض تعديلاته.
2
الأخضر + إضافة، والأحمر − حذف. اقرأ الاتجاه لا الإملاء.
3
زرّ Review code في الأعلى يجعل كلود يراجع تعديلاته بنفسه قبل أن تراجعها أنت — والفصل السادس يبني على هذه العادة.
الصنعة · 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 · طلبات تُهدر التوكنز

  • «حسّنه» أو «نظّف الكود» — أفضل كيف؟ وأنظف بمقياس مَن؟
  • أن تُلقي بخمس مهامّ في رسالة واحدة — فيتشتّت الوكيل، ويتعذّر عليك المراجعة، ويخسر الطرفان
  • أن تحجب الـ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)

السبب على الأرجح إعادة هيكلة الكوبونات الأسبوع الماضي في 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(-)
💡
لاحظ ما فعله الإنسان: كتب جملتين، ووافق على خطّة، وقال «نفّذ الـcommit». ولاحظ ما بقي بيده: الهدف، والقيود، والقرار الأخير. هذا التقسيم للعمل هو جوهر المسألة كلّها.
النموذج الذهني · 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 Code، ثم اكتب /init ليولّد ملف CLAUDE.md الخاص به. اقرأ ما كتبه كلود عن مشروعك وصحّح ما جاء خطأً. ثم اطلب تحسيناً صغيراً واحداً بمعايير اكتمال واضحة، مثل:

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

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