بطّل تحارب الجاذبية

// الـ skill بيعلم الـ agent يكتب كود React بالشكل ده:

import { memo, useCallback, useMemo } from 'react';

// ✅ الـ agent بيستخدم memo صح — مش بيحطه على كل حاجة
const UserCard = memo(function UserCard({ user, onSelect }) {
  // ✅ بيستخدم useMemo للحسابات الغالية بس
  const initials = useMemo(() =>
    user.name.split(' ').map(n => n[0]).join(''),
    [user.name]
  );

  return (
    <button onClick={() => onSelect(user.id)}>
      <Avatar initials={initials} />
      <span>{user.name}</span>
    </button>
  );
});

// ✅ useCallback في الـ parent عشان الـ reference ما يتغيرش
function UserList({ users }) {
  const handleSelect = useCallback((id) => {
    router.push(`/users/${id}`);
  }, []);

  return users.map(u =>
    <UserCard key={u.id} user={u} onSelect={handleSelect} />
  );
}

// الـ skill ده بيعلم الـ agent App Router و Server Components

// ✅ Server Component — ده الـ default في Next.js 14+
async function UsersPage() {
  // ✅ بيعمل fetch على السيرفر — مفيش bundle عند الكلاينت
  const users = await fetch('https://api.example.com/users', {
    next: { revalidate: 3600 } // ISR — كل ساعة
  }).then(r => r.json());

  return (
    <main>
      <h1>Users</h1>
      {/* ✅ streaming مع Suspense */}
      <Suspense fallback={<Skeleton />}>
        <UserList users={users} />
      </Suspense>
    </main>
  );
}

// ✅ Client Component بس لما تحتاج interactivity
'use client';
function SearchBar() {
  const [query, setQuery] = useState('');
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

# تعريف وكيل مراجعة الكود
name: code-review
type: specialist
model: claude-opus-4.6

personality:
  tone: direct, thorough, zero-tolerance for bugs
  focus: logic errors, security, potential crashes
  ignore: style, formatting, trivial matters

tools:
  - grep   # بيدور في الكودبيس
  - view   # بيقرا الفايلات
  - powershell # بيشغل تيستات

skills:  # بيتحملوا أوتوماتيك من skills.sh
  - react-best-practices
  - systematic-debugging
  - e2e-testing-patterns

rules:
  - "ما تعلقش على الستايل أو الفورماتينج أبداً"
  - "بس surfac المشاكل اللي فعلاً مهمة"
  - "قدّم حلول مش شكاوي"

# فكرة ← مواصفات ← تنفيذ ← مراجعة
name: spec-driven-development
description: "من الفكرة للبرودكشن في خطوات واضحة"

steps:
  - agent: spec-writer
    input: ${user_idea}
    output: spec.md
    quality_gate:
      - check: "فيه user stories"
      - check: "فيه acceptance criteria"
      - check: "فيه edge cases"

  - agent: implementer
    input: spec.md
    output: implementation/
    skills:  # بيتحملوا من skills.sh
      - react-best-practices
      - vercel-react-best-practices
    quality_gate:
      - check: "كل التيستات بتعدي"
      - check: "الكود بيتبيلد من غير errors"

  - agent: reviewer
    input: [spec.md, implementation/]
    output: compliance-report.html
    quality_gate:
      - check: "نسبة الامتثال >= 90%"

on_failure:
  - notify: slack
  - rollback: true

# ضيف GitHub MCP server
$ antigravity mcp add github \
    --token $GITHUB_TOKEN \
    --repo "yourorg/yourrepo"

✓ GitHub MCP server configured

# دلوقتي الوكلاء يقدروا يتكلموا مع GitHub
$ antigravity invoke --agent code-review

[code-review] Reviewing PR #127...
[code-review] Found 2 issues in src/api/auth.ts
[code-review] Posting review to GitHub...
✓ Review posted: https://github.com/yourorg/yourrepo/pull/127

# سيرفرات MCP بتفضل — عرّفها مرة، استخدمها للأبد

# قواعد المشروع — بتتطبق على كل الوكلاء

## ستايل الكود
- Use async/await, never .then() chains
- TypeScript for all new code
- No console.log in production (use logger.info)
- Destructure props in function signatures

## المعمار
- API calls must go through apiClient wrapper
- React: Server Components by default, 'use client' only when needed
- State management: Zustand only, no Redux
- File naming: kebab-case for files, PascalCase for components

## الأمان
- Never concatenate user input into queries
- All API endpoints require auth by default
- Sanitize user input before rendering (XSS)
- Environment variables for secrets, never hardcode

## الاختبارات
- Every new feature requires tests
- Test files: ComponentName.test.tsx
- Mock external API calls in tests
- 80%+ coverage on new code

# القواعد دي بتفضل في كل جلسات الوكلاء
# الوكلاء بيمشوا عليها أوتوماتيك