1# SKILL.md - תבנית Agent Skill
2
3## סקירה
4כישור זה עוזר לסוכני AI לכתוב קומפוננטות React על פי תקנים של Vercel.
5
6## מתי להשתמש
7- יצירת קומפוננטות React חדשות
8- רפקטורינג של קומפוננטות קיימות
9- אכיפת עקביות סגנון קוד
10- הגדרת כללי ESLint
11
12## דפוסי React
131. **מבנה קומפוננטות**
14   - השתמשו ב-functional components עם hooks
15   - העדיפו named exports על default exports
16   - שמרו על קומפוננטות קטנות (< 200 שורות)
17
182. **TypeScript**
19   - הגדירו טיפוסי props מפורשים
20   - השתמשו ב-`interface` ל-props, לא `type`
21   - הימנעו מטיפוסים `any`
22
233. **ביצועים**
24   - Memoize חישובים יקרים עם `useMemo`
25   - Memoize callbacks עם `useCallback`
26   - השתמשו ב-`React.memo` לקומפוננטות יקרות
27
28## דוגמאות
29
30### טוב: קומפוננטה נקיה
31```typescript
32interface ButtonProps {
33  label: string;
34  onClick: () => void;
35  variant?: 'primary' | 'secondary';
36}
37
38export function Button({ label, onClick, variant = 'primary' }: ButtonProps) {
39  return (
40    <button onClick={onClick} className={`btn btn-${variant}`}>
41      {label}
42    </button>
43  );
44}
45```
46
47### רע: להימנע
48```typescript
49// ❌ Default export
50export default function Button(props: any) {
51  return <button {...props} />;
52}
53```

1# כללי React Best Practices של Vercel
2
3## ארכיטקטורת קומפוננטות
4
5### Server vs Client Components
6- **ברירת מחדל: Server Components** ב-Next.js 16
7- השתמשו ב-"use client" רק כש:
8  - משתמשים ב-hooks (useState, useEffect)
9  - Event handlers (onClick, onChange)
10  - APIs של הדפדפן (window, localStorage)
11  - ספריות צד שלישי שדורשות client-side
12
13### ארגון קבצים
14```
15app/
16├── (routes)/
17│   ├── page.tsx          # Server component ברירת מחדל
18│   └── components/
19│       └── ClientButton.tsx  # "use client"
20├── components/
21│   ├── ui/               # קומפוננטות UI לשימוש חוזר
22│   └── features/         # קומפוננטות ספציפיות
23└── lib/
24    ├── utils.ts
25    └── api.ts
26```
27
28### שליפת נתונים
29```typescript
30// ✅ Server Component - שאילת DB ישירה
31async function UserProfile({ userId }: { userId: string }) {
32  const user = await db.user.findUnique({ where: { id: userId } });
33  
34  return (
35    <div>
36      <h1>{user.name}</h1>
37      <ClientCounter initialCount={user.postCount} />
38    </div>
39  );
40}
41
42// ✅ Client Component - UI אינטראקטיבי בלבד
43'use client';
44
45function ClientCounter({ initialCount }: { initialCount: number }) {
46  const [count, setCount] = useState(initialCount);
47  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
48}
49```
50
51## צ'קליסט לסוכן AI
52- [ ] קומפוננטה משתמשת ב-server component כברירת מחדל
53- [ ] "use client" רק כשצריך
54- [ ] ל-props יש טיפוסי TypeScript מפורשים
55- [ ] תמונות משתמשות ב-next/image
56- [ ] מחלקות Tailwind נכונות
57- [ ] אין סגנונות inline (חוץ מערכים דינמיים)
58- [ ] תכונות accessibility נוכחות (aria-*, role)