שילוב כוחות: Cursor + Claude Code

עד עכשיו עבדתם עם Claude Code בחלון טרמינל רגיל. זה עובד, אבל יש בעיה אחת: אתם לא רואים מה קורה בקבצים. Claude מספר לכם "יצרתי את הקובץ", "שיניתי שלוש שורות", ואתם צריכים להאמין לו או לפתוח כל קובץ בנפרד.

בפרק הזה נוסיף לתמונה את Cursor, עורך קוד שמציג את כל הפרויקט מול העיניים. Claude ממשיך לעבוד בטרמינל, ואתם רואים כל שינוי ברגע שהוא קורה.

הרעיון: עיניים וידיים

בלי עיניים, הידיים עובדות בחושך: אתם צריכים לסמוך על התיאור של Claude. בלי ידיים, העיניים רק מסתכלות: כל שינוי גדול נשאר עליכם. ביחד מקבלים את הטוב משני העולמות: Claude עושה את העבודה הכבדה, ואתם רואים ושולטים בכל שלב.

שלב 1: מתקינים את Cursor ופותחים פרויקט

1. הורידו את Cursor מ-cursor.com והתקינו כמו כל תוכנה. יש גרסאות ל-Windows, ל-Mac ול-Linux.
2. בפתיחה הראשונה Cursor ישאל כמה שאלות הגדרה. אפשר להשאיר את ברירות המחדל.
3. פתחו תיקיית פרויקט: בתפריט העליון בחרו File → Open Folder..., ובחרו למשל את התיקייה my-project מפרק 3.

ככה נראה החלון של Cursor. לא צריך לזכור הכול, רק את ארבעת האזורים:

שלב 2: פותחים טרמינל בתוך Cursor ומפעילים את Claude

פותחים את הטרמינל המובנה

ב-Cursor יש טרמינל מובנה, בדיוק כמו החלון שהשתמשתם בו עד עכשיו, רק בתוך העורך. יש שלוש דרכים לפתוח אותו:

מפעילים את Claude

הטרמינל נפתח כבר בתוך תיקיית הפרויקט, אז אין צורך ב-cd. פשוט מקלידים:

claude

אם הפעלתם את claude בטרמינל רגיל מחוץ ל-Cursor, או שלא בטוחים שהחיבור עובד, הריצו בתוך Claude Code את הפקודה הזאת. היא מראה לאיזה עורך Claude מחובר, ומאפשרת להתחבר:

/ide

מסדרים את המסך: עורך מצד אחד, Claude מהצד השני

כברירת מחדל הטרמינל נפתח למטה, וזה צפוף. הסידור הכי נוח הוא זה לצד זה: קוד מצד אחד, Claude מהצד השני.

1. פתחו את לוח הפקודות של Cursor: Ctrl + Shift + P (ב-Mac: Cmd + Shift + P).
2. הקלידו Terminal in Editor Area ובחרו באפשרות שיוצרת טרמינל באזור העריכה, בצד (to the Side).
3. בטרמינל החדש הפעילו claude.

עכשיו הטרמינל מתנהג כמו עוד לשונית באזור העריכה, ואפשר לגרור אותו לאיזה צד שנוח לכם.

שלב 3: צופים בשינויים בזמן אמת

זה הרגע שבו העבודה המשולבת מתחילה להשתלם.

רואים את הקבצים משתנים

כש-Claude יוצר או משנה קובץ, הוא מופיע מיד בעץ הקבצים, והתוכן שלו מתעדכן בעורך. אם הקובץ פתוח אצלכם בלשונית, תראו את השינוי קורה מול העיניים.

ליד מספרי השורות יופיעו פסים צבעוניים שמסמנים מה השתנה מאז השמירה האחרונה ב-Git:

לחיצה על הפס מציגה בדיוק מה היה שם קודם.

בודקים שינוי לפני שמאשרים

אם אתם במצב manual, כל עריכה של Claude מחכה לאישור שלכם. בזכות החיבור ל-Cursor, השינוי המוצע נפתח בחלון השוואה (Diff): הגרסה הנוכחית בצד אחד והגרסה המוצעת בצד השני, עם הדגשה של כל מה שמשתנה. ככה נראה שינוי כזה כשמציגים אותו כטקסט:

   <h1>יום הולדת שמח, סבתא!</h1>
-  <p>מאחלים לך בריאות ואושר</p>
+  <p>מאחלים לך בריאות, אושר והמון נחת מהנכדים</p>
+  <button id="confetti-btn">🎉 לחגוג!</button>

שורות עם - נמחקות, ושורות עם + נוספות. קראו, ואז אשרו או סרבו בטרמינל, בדיוק כמו בפרק 3.

סקירה של כל השינויים אחרי משימה (Source Control)

אחרי שClaude סיים משימה גדולה, כדאי לעבור על כל מה שהשתנה, במקום אחד:

1. לחצו על אייקון Source Control בסרגל הפעילות (נראה כמו ענף עם עיגולים), או Ctrl + Shift + G (ב-Mac: Cmd + Shift + G).
2. תופיע רשימה של כל הקבצים שהשתנו. האות שליד כל קובץ מסמנת מה קרה לו: M שונה, U חדש, D נמחק.
3. לחצו על קובץ, ותיפתח השוואה צד-לצד: מצד אחד הגרסה השמורה האחרונה, מהצד השני הגרסה הנוכחית.

מצביעים במקום לתאר: סימון בעורך

זה אחד היתרונות הכי חזקים של העבודה המשולבת. במקום להסביר ל-Claude איפה משהו נמצא, פשוט סמנו אותו בעורך עם העכבר, ואז כתבו לו בטרמינל. Claude מקבל את השורות שסימנתם יחד עם ההודעה, ובטרמינל תופיע שורה כמו ⧉ Selected 6 lines from index.html.

וכך גם עם שגיאות. Claude רואה את השגיאות שמופיעות בחלון Problems של Cursor (Ctrl + Shift + M, ב-Mac: Cmd + Shift + M):

שלב 4: עורכים בעצמכם בלי להתנגש עם Claude

אחד היתרונות של Cursor הוא שאפשר לשנות דברים קטנים בעצמכם: לתקן מילה, לשנות צבע או מספר. זה מהיר יותר מלבקש מ-Claude. אבל כששניים עובדים על אותם קבצים, צריך כמה כללי תנועה.

איך נוצרת התנגשות?

דמיינו שניים שכותבים על אותו דף בו זמנית. ב-Cursor זה קורה בשני מצבים:

1. שינוי שלא נשמר. שיניתם משהו בעורך ולא שמרתם (Ctrl + S). השינוי קיים רק בעורך, לא בקובץ עצמו, ולכן Claude לא רואה אותו. אם Claude ישנה את אותו קובץ, יהיו שתי גרסאות שונות.
2. עריכה באותו רגע. אתם מקלידים בקובץ בדיוק כשClaude עורך אותו.

כשזה קורה, Cursor יציג בזמן השמירה הודעה בנוסח "The content of the file is newer" (תוכן הקובץ חדש יותר). בחרו Compare כדי לראות את שתי הגרסאות זו מול זו, ולא Overwrite, שדורס את השינויים של Claude.

שבעה כללי תנועה

1. שומרים לפני ששולחים. לפני כל בקשה ל-Claude, Ctrl + S (ב-Mac: Cmd + S). או, עוד יותר טוב, הפעילו שמירה אוטומטית (ראו בהמשך).
2. לא נוגעים בקובץ שClaude עורך עכשיו. Claude עובד על index.html? חכו שיסיים, או לחצו Esc כדי לעצור אותו לפני שאתם נכנסים.
3. מחלקים טריטוריה. בזמן שClaude עובד על הלוגיקה ב-script.js, אתם יכולים לשנות טקסטים ב-index.html. קבצים שונים = אפס התנגשויות.
4. מספרים ל-Claude מה שיניתם. שיניתם משהו בעצמכם? ציינו את זה בבקשה הבאה, כדי שלא "יתקן" לכם את השינוי בחזרה.
5. שומרים נקודת ביטחון לפני משימה גדולה. "תשמור את המצב הנוכחי ב-git" לוקח שניות, ומאפשר לחזור אחורה אם משהו משתבש.
6. סוכן אחד בכל פעם. אל תפעילו את הסוכן המובנה של Cursor ואת Claude Code על אותם קבצים באותו זמן. בחרו אחד לכל משימה.
7. בספק? בודקים את Source Control. הוא מראה בדיוק מה השתנה ואיפה, לא משנה מי שינה.

הפעלת שמירה אוטומטית

הדרך הכי פשוטה להיפטר מבעיית השינויים שלא נשמרו: בתפריט העליון, File → Auto Save. כשיש V ליד האפשרות, כל שינוי נשמר לבד אחרי שנייה.

למי שמעדיף להגדיר דרך קובץ ההגדרות (לוח הפקודות → Preferences: Open User Settings (JSON)):

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

תרגיל מעשי: ספירה לאחור וקיר ברכות

נחזור לדף יום ההולדת של סבתא מפרק 3, ונוסיף לו שני פיצ'רים אינטראקטיביים: ספירה לאחור עד יום ההולדת, וקיר ברכות שבו כל אחד יכול להשאיר איחול. העבודה תתחלק: Claude בונה, ואתם רואים, מכוונים ומשנים פרטים בעצמכם.

חלק א': הכנה

1. פתחו את התיקייה my-project ב-Cursor (File → Open Folder...).
2. הפעילו שמירה אוטומטית (File → Auto Save).
3. פתחו טרמינל בצד (לוח הפקודות → Terminal in Editor Area) והפעילו claude.
4. עברו למצב manual עם Shift + Tab, כדי לראות כל שינוי לפני שהוא קורה.
5. פתחו את index.html בעורך, ופתחו את הקובץ גם בדפדפן (לחיצה כפולה עליו בתיקייה).
6. אם מותקן אצלכם Git, בקשו מ-Claude לשמור נקודת התחלה:

חלק ב': Claude בונה את הספירה לאחור

מה לעשות בזמן שClaude עובד:

• צפו בעץ הקבצים: script.js חדש יופיע.
• כשתופיע בקשת אישור לשינוי ב-index.html, קראו את ההשוואה. אמורה להיות תוספת של אזור לספירה ושל קישור ל-script.js.
• אשרו, ורעננו את הדפדפן. הספירה רצה?

חלק ג': הידיים שלכם

עכשיו תורכם. פתחו את script.js בעורך. בתחילת הקובץ תמצאו שורה שנראית בערך כך:

const BIRTHDAY = new Date("2026-12-25T00:00:00");

שנו בעצמכם את התאריך לתאריך יום הולדת אמיתי במשפחה (שנה-חודש-יום), שמרו, ורעננו את הדפדפן. הספירה השתנתה? מעולה: עשיתם שינוי קוד ראשון בעצמכם, בלי לבקש מאף אחד.

חלק ד': Claude בונה קיר ברכות, ואתם מכוונים עם סימון

אחרי שהקיר עובד, נשתמש בסימון:

1. ב-index.html, סמנו עם העכבר את הקוד של אזור קיר הברכות.
2. כתבו ל-Claude בטרמינל:

3. שימו לב לשורה ⧉ Selected ... lines from index.html בטרמינל. כך אתם יודעים שClaude קיבל את הסימון.

חלק ה': סקירה אחרונה

1. פתחו את Source Control (Ctrl + Shift + G) ועברו על כל קובץ ששונה. השתנו רק index.html, script.js ואולי קובץ עיצוב? מצוין.
2. רעננו את הדפדפן ובדקו הכול: ספירה, הוספת ברכה, ברכה עם שדה ריק, רענון (הברכות נשארו?).
3. שמרו נקודת ביטחון:

סיכום

• Cursor הוא העיניים, Claude Code הוא הידיים. Claude עושה את העבודה, ואתם רואים כל שינוי.
• טרמינל ב-Cursor: Ctrl + ` או View → Terminal, ואז claude. החיבור לעורך קורה אוטומטית, ומטרמינל חיצוני מתחברים עם /ide.
• סקירת שינויים: פסים צבעוניים ליד השורות, חלון השוואה לפני אישור, ו-Source Control אחרי משימה.
• סימון בעורך אומר ל-Claude בדיוק על מה מדובר, וחלון Problems מראה לו את השגיאות.
• בלי התנגשויות: שומרים (או מפעילים Auto Save), לא עורכים קובץ שClaude עובד עליו, ומספרים לו על שינויים ידניים.

בפרק הבא נשתמש בכל מה שלמדנו עד עכשיו ונבנה פרויקט שלם מאפס: אתר מתכונים משפחתי עם Next.js.

בדקו את עצמכם