إتقان وضع Composer

Composer هو ميزة Cursor المميزة—القدرة على تحرير ملفات متعددة في وقت واحد مع سياق قاعدة الكود الكامل. يعلمك هذا الدرس استخدامه بفعالية.

ما هو Composer؟

Composer هو واجهة تحرير متعددة الملفات تقوم بـ:

• فهم قاعدة الكود بالكامل
• إنشاء وتعديل وحذف الملفات
• الحفاظ على الاتساق عبر التغييرات
• عرض الفروقات قبل التطبيق

فتح Composer: ⌘I (macOS) أو Ctrl+I (Windows/Linux)

واجهة Composer

┌─────────────────────────────────────────────────────────────┐
│  Composer                                              [X]  │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────────┐    │
│  │ أدخل طلبك...                                        │    │
│  │                                                     │    │
│  │ @files  @docs  @web  @codebase                     │    │
│  └─────────────────────────────────────────────────────┘    │
├─────────────────────────────────────────────────────────────┤
│  السياق:                                                    │
│  ├── الملفات المفتوحة حالياً                               │
│  ├── الملفات المشار إليها بـ @                             │
│  └── قاعدة الكود المفهرسة (إذا مفعّلة)                      │
├─────────────────────────────────────────────────────────────┤
│  التغييرات:                                                 │
│  ├── src/api/users.ts [معدّل] ▼                            │
│  │   + import { validateEmail } from '../utils'            │
│  │   - // TODO: add validation                             │
│  ├── src/utils/validation.ts [ملف جديد] ▼                  │
│  │   + export function validateEmail(email: string)...     │
│  └── src/tests/validation.test.ts [ملف جديد] ▼             │
├─────────────────────────────────────────────────────────────┤
│  [قبول الكل]  [رفض الكل]  [قبول المحدد]                    │
└─────────────────────────────────────────────────────────────┘

نظام الإشارة @

استخدم إشارات @ لتوفير سياق دقيق:

@files - الإشارة لملفات محددة

@src/components/Button.tsx أنشئ متغير من هذا الزر للنماذج

@docs - الإشارة للتوثيق

@docs Next.js App Router كيف أنفذ middleware؟

@web - البحث في الويب

@web أحدث ميزات React 19 أضف أي hooks جديدة لمشروعنا

@codebase - البحث في كودك

@codebase authentication أين يُعالج تسجيل دخول المستخدم؟

مطالبات Composer الفعالة

النمط 1: تنفيذ ميزة

مطالبة ضعيفة:

أضف مصادقة المستخدم

مطالبة قوية:

أضف مصادقة مستخدم مبنية على JWT:
- أنشئ نقاط نهاية /api/auth/login و /api/auth/register
- خزّن جلسات المستخدم في cookies (httpOnly، secure)
- أضف middleware لحماية مسارات /dashboard
- استخدم bcrypt لتشفير كلمات المرور
- اتبع نمط معالجة الأخطاء الحالي في @src/lib/errors.ts

النمط 2: إعادة الهيكلة

مطالبة ضعيفة:

اجعل هذا الكود أفضل

مطالبة قوية:

أعد هيكلة @src/services/payment.ts:
- استخرج منطق Stripe في محول منفصل
- أنشئ واجهة PaymentProvider للبوابات المستقبلية
- أضف أنواع TypeScript مناسبة (بدون any)
- حافظ على التوافق العكسي مع المستدعين الحاليين
- أضف اختبارات وحدة تتبع أنماط @src/services/__tests__

سير العمل متعدد الملفات

إنشاء ميزة جديدة

مثال: إضافة نظام تعليقات

أنشئ ميزة تعليقات لمقالات المدونة:

1. قاعدة البيانات: أضف نموذج Comment إلى @prisma/schema.prisma
   - الحقول: id، content، authorId، postId، createdAt

2. مسارات API:
   - POST /api/posts/[postId]/comments (إنشاء)
   - GET /api/posts/[postId]/comments (قائمة)
   - DELETE /api/comments/[id] (حذف الخاص)

3. المكونات:
   - CommentList: عرض التعليقات مع التصفح
   - CommentForm: إنشاء تعليق جديد (للموثقين فقط)
   - CommentItem: تعليق واحد مع خيار الحذف

4. اتبع الأنماط الحالية في @src/features/posts

مراجعة التغييرات

قبل القبول، راجع دائماً:

قائمة المراجعة:
├── ✅ المنطق صحيح؟
├── ✅ يتبع أنماط المشروع؟
├── ✅ لا مشاكل أمنية؟
├── ✅ الأنواع معرّفة بشكل صحيح؟
├── ✅ معالجة الأخطاء مضمنة؟
└── ✅ لا تغييرات غير ضرورية؟

تقنيات متقدمة

التحسين التكراري

بعد التوليد الأول:

بداية جيدة، لكن:
- أضف التحقق من المدخلات لمسارات API
- استخدم React Query بدلاً من useState لجلب البيانات
- أضف حالات التحميل للمكونات

تكديس السياق

اذكر ملفات متعددة للمهام المعقدة:

@src/types/api.ts @src/lib/api-client.ts @src/hooks/useApi.ts
أضف نقطة نهاية جديدة لتفضيلات المستخدم تتبع هذه الأنماط

الأخطاء الشائعة لتجنبها

1. الكثير في وقت واحد

❌ "أعد هيكلة قاعدة الكود بالكامل إلى TypeScript" ✅ "حوّل @src/utils إلى TypeScript، بدءاً من helpers.js"

2. تعليمات غامضة

❌ "اجعلها أفضل" ✅ "حسّن الأداء بتخزين الحسابات المكلفة مؤقتاً"

3. سياق مفقود

❌ "أضف اختبارات" ✅ "أضف اختبارات لـ @src/lib/auth.ts تتبع أنماط @src/lib/tests/api.test.ts"

رؤية الإتقان: أفضل مستخدمي Composer يوفرون السياق مسبقاً بدلاً من التصحيح لاحقاً. اقضِ 30 ثانية في كتابة مطالبة مفصلة لتوفير 5 دقائق من التكرار.

في الدرس التالي، سنستكشف وضع الوكيل—قدرة البرمجة المستقلة في Cursor. :::