Claude CLI: الدليل الشامل

# تثبيت الأداة عالمياً
npm install -g @anthropic-ai/claude-cli

# تهيئة الأداة
claude init

# تثبيت الأداة
pip install anthropic-cli

# تهيئة الأداة
claude config setup

# اسأل Claude سؤالاً مباشراً
claude ask "كيف أثبت JWT authentication في Express.js؟"

# الحصول على شرح لمفهوم برمجي
claude ask "ما الفرق بين map و filter في JavaScript؟"

# تحليل ملف واحد
claude analyze src/components/Button.tsx

# تحليل ملفات متعددة
claude analyze src/api/*.ts

# الحصول على شرح للكود
claude explain lib/utils.js

# إنشاء مكون React جديد
claude generate "أنشئ مكون React لتسجيل الدخول مع نموذج"

# إنشاء نقطة نهاية API
claude generate "أنشئ REST API endpoint للحصول على المستخدمين"

# بدء محادثة تفاعلية
claude chat

# بدء محادثة مع سياق ملفات محدد
claude chat --files src/api/users.ts src/lib/db.ts

# بدء محادثة في مجلد معين
claude chat --directory ./src

# فهرسة المشروع بالكامل
claude scan .

# فهرسة مجلد محدد
claude scan src/

# طرح أسئلة بعد الفهرسة
claude ask "أين يقع منطق المصادقة في هذا المشروع؟"
claude ask "ما هي المكتبات المستخدمة في هذا المشروع؟"

# بعد فهرسة المشروع
claude scan .

# اسأل عن البنية
claude ask "اشرح لي بنية هذا المشروع"

# اطلب اقتراحات للتحسين
claude ask "ما هي الملفات التي تحتاج إلى إعادة هيكلة؟"

# تحويل JavaScript إلى TypeScript
claude refactor src/legacy.js --to typescript

# إعادة هيكلة مكون React
claude refactor components/OldButton.tsx --use-hooks

# تحسين الكود
claude refactor src/utils/api.js --optimize

# قبل: ملف JavaScript عادي
# src/utils/math.js
export function add(a, b) {
  return a + b;
}

# بعد إعادة الهيكلة
claude refactor src/utils/math.js --to typescript

# ينتج: ملف TypeScript مع أنواع
# src/utils/math.ts
export function add(a: number, b: number): number {
  return a + b;
}

# تصحيح خطأ محدد
claude debug --error "TypeError: Cannot read property 'id' of undefined"

# تصحيح ملف مع traces
claude debug src/app.js --trace

# تصحيح مع شرح مفصل
claude debug --explain "ReferenceError: user is not defined"

# لديك خطأ في السجل
Error: Cannot POST /api/users

# اطلب من Claude المساعدة
claude debug --error "Cannot POST /api/users" --files src/routes.js

# Claude سيقوم بـ:
# 1. فحص ملفاتك
# 2. تحديد السبب المحتمل
# 3. اقتراح الحلول
# 4. إنشاء الاختبارات

# محادثة مع ملفات محددة كسياق
claude chat --files src/api/*.ts src/lib/database.ts

# محادثة مع مجلد كامل
claude chat --directory ./src/components

# محادثة مع git diff
claude chat --git-diff

# راجع تغييراتك الأخيرة
claude chat --git-diff

# يمكنك السؤال:
> "ما هي التغييرات التي قدمتها؟"
> "هل هناك أي مشاكل محتملة؟"
> "كيف يمكنني تحسين هذا الكود؟"

# .claude-rules
project:
  name: "تطبيق Next.js 14"
  type: "fullstack"

preferences:
  - "استخدم App Router"
  - "فضل مكونات السيرفر"
  - "استخدم Tailwind CSS"
  - "اتبع Airbnb Style Guide"

typescript:
  strict_mode: true
  path_alias: "@/*"

testing:
  framework: "jest"
  coverage_target: 80

ai:
  model: "claude-3-5-sonnet-20241022"
  temperature: 0.2
  max_tokens: 4000

# Claude سيقرأ القواعد تلقائياً
claude generate "أضف مكوناً جديداً لصفحة تسجيل الدخول"

# سينشئ Claude الكود وفقاً لقواعد مشروعك:
# - TypeScript مع strict mode
# - App Router pattern
# - Tailwind classes
# - Airbnb style

# تعيين النموذج الافتراضي
claude config set model claude-3-5-sonnet-20241022

# الخيارات المتاحة:
# - claude-3-5-sonnet (متوازن - موصى به)
# - claude-3-opus (الأقوى - أبطأ)
# - claude-3-haiku (الأسرع - أبسط)

# التحقق من النموذج الحالي
claude config get model

# ملف .env أو .bashrc أو .zshrc
export ANTHROPIC_API_KEY="your-api-key-here"
export CLAUDE_MODEL="claude-3-5-sonnet-20241022"
export CLAUDE_MAX_TOKENS=4000
export CLAUDE_TEMPERATURE=0.2

# بدء محادثة حول إطار جديد
claude chat

> "أنا جديد في Next.js 14. اشرح لي App Router مع أمثلة"

# Claude سيقوم بـ:
# 1. شرح المفهوم
# 2. إعطاء أمثلة عملية
# 3. إنشاء ملفات تجريبية
# 4. الإجابة على أسئلتك المتابعة

# مراجعة ملف محدد
claude review src/utils/validation.ts

# الحصول على اقتراحات للتحسين
> "ما هي المشاكل المحتملة؟"
> "كيف يمكنني تحسين الأداء؟"
> "هل هناك أي ثغرات أمنية؟"

claude review src/api/auth.ts --security

# Claude سيركز على:
# - حقن SQL
# - XSS attacks
# - CSRF protection
# - password hashing
# - JWT security

# إنشاء JSDoc لمكون
claude document src/components/Button.tsx

# إنشاء README للمشروع
claude document . --format readme

# إنشاء API docs
claude document src/api/ --format api

/**
 * Button Component - زر تفاعلي قابل للتخصيص
 *
 * @param {Object} props - خصائص المكون
 * @param {string} props.variant - نوع الزر (primary | secondary | danger)
 * @param {boolean} props.disabled - حالة التعطيل
 * @param {Function} props.onClick - معالج النقر
 * @returns {JSX.Element} مكون الزر
 *
 * @example
 * <Button variant="primary" onClick={handleSubmit}>
 *   إرسال
 * </Button>
 */
export function Button({ variant, disabled, onClick }) {
  // ...
}

# تحويل Class Components إلى Hooks
claude refactor src/components/ --to-hooks

# تحويل JavaScript إلى TypeScript
claude refactor src/ --to-typescript

# إضافة Error Boundaries
claude refactor src/ --add-error-boundaries

# قبل: JavaScript
// src/utils/api.js
export async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

# بعد التحويل
claude refactor src/utils/api.js --to typescript

# النتيجة: TypeScript
// src/utils/api.ts
interface User {
  id: number;
  name: string;
  email: string;
}

export async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) {
    throw new Error(`Failed to fetch user: ${res.statusText}`);
  }
  return res.json();
}

# إنشاء اختبارات لمكون
claude test src/components/Button.tsx

# إنشاء اختبارات لواجهة API
claude test src/api/users.ts --integration

# إنشاء اختبارات E2E
claude test src/ --e2e

// src/components/Button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from './Button';

describe('Button Component', () => {
  it('renders correctly with primary variant', () => {
    render(<Button variant="primary">Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Click me</Button>);
    fireEvent.click(screen.getByText('Click me'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('does not call onClick when disabled', () => {
    const handleClick = jest.fn();
    render(
      <Button onClick={handleClick} disabled>
        Click me
      </Button>
    );
    fireEvent.click(screen.getByText('Click me'));
    expect(handleClick).not.toHaveBeenCalled();
  });
});

# الحصول على مساعدة سريعة
claude --help

# مساعدة لأمر محدد
claude chat --help
claude generate --help

# الإبلاغ عن مشكلة
claude report --issue "وصف المشكلة"

# أوامر أساسية
claude ask "سؤالك"                    # طرح سؤال
claude analyze file.ts                 # تحليل ملف
claude generate "طلبك"                 # إنشاء كود
claude chat                            # محادثة تفاعلية

# إدارة المشروع
claude scan .                          # فهرسة المشروع
claude refactor file.js --to ts        # إعادة هيكلة
claude debug --error "خطأ"             # تصحيح الأخطاء
claude review file.ts                  # مراجعة الكود

# التكوين
claude init                            # التهيئة الأولية
claude config set model <model>        # اختيار النموذج
claude config get model                # عرض الإعدادات

# الاختبار والوثائق
claude test file.ts                    # إنشاء اختبارات
claude document file.ts                # إنشاء توثيق