סקיל-על ליצירת הדרכה מלאה על כלי דיגיטלי — מצגת הדרכה, רילס, אינפוגרפיקה. הפעל תמיד כשמבקשים "מצגת הדרכה", "הדרכה על כלי", "בנה מצגת על...", "training".
סקיל-על שמתאם יצירת הדרכה מלאה על כלי דיגיטלי.
/ai-expert)/extract-frames — חילוץ פריימים מפתח מ-MP4/image-process — חצים, הדגשות, זום, GIFחובה: קרא את .claude/skills/training/template.html והשתמש בו כבסיס.
--tool, --tool-light, --tool-dark לצבעי הכליdocs/marketing/ai-tools.html{TOOL_NAME}, {HOOK_LINE} וכו') בתוכן אמיתי| # | סוג שקף | class | חובה? |
|---|---|---|---|
| 1 | כותרת — לוגו SVG + brand-word + hook + badge + 4 topics | title-slide | חובה |
| 2 | מה זה? — 3 כרטיסים + צילום מסך + tip-box מחיר | slide-inner + grid-3 | חובה |
| 3 | איך מתחילים — 3 step-cards + צילום מסך | slide-inner + step-card | חובה |
| 4 | מפריד — "איך עובדים" | divider-slide | חובה |
| 5-8 | איך עובדים — שקף לכל שלב + צילומי מסך + copy-prompts | slide-inner | חובה (4-6 שקפים) |
| 9 | מפריד — "יתרונות ומגבלות" | divider-slide | חובה |
| 10 | יתרונות + מגבלות — שקף אחד, שתי עמודות (ירוק/ענבר) | slide-inner + grid 2 cols | חובה |
| 11 | השוואה — כלי מול Canva/מתחרה, compare-cols + highlights | slide-inner + compare-cols | חובה |
| 12 | מפריד — "Claude Code + {כלי}" | divider-slide | חובה |
| 13 | חיבור CC — flow-container, CC בצד שמאל + כלי בצד ימין | slide-inner + flow-container | חובה |
| 14 | תרחישים מהחיים — 3 תרחישים שכולם מזדהים איתם (ראה פירוט למטה) | slide-inner + scenario-cards | חובה |
| 15 | דוגמאות תוצרים — 2-3 תוצרים אמיתיים שנוצרו עם הכלי (ראה פירוט למטה) | slide-inner + product-gallery | חובה |
| 16 | טיפים — 3-5 טיפים מעשיים לשימוש חכם בכלי (ראה פירוט למטה) | slide-inner + tips-grid | חובה |
| 17 | שאלות ותשובות — 4-6 שאלות נפוצות באקורדיון (ראה פירוט למטה) | slide-inner + faq-accordion | חובה |
| 18 | תרגול — משימה מעשית שהמשתתפים עושים עכשיו (ראה פירוט למטה) | slide-inner + practice-block | חובה |
| 19 | אינפוגרפיקת סיכום — strip קומפקטי של השלבים, לא שקף שלם (ראה פירוט למטה) | slide-inner | חובה |
| 20 | מפריד — "סיכום" | divider-slide | חובה |
| 21 | סיכום — 3 כרטיסים + tip ירוק | slide-inner + grid-3 | חובה |
| 22 | CTA — 2 שלבים + אתגר 5 דק' + WhatsApp + Facebook Learni + mail | slide-inner | חובה |
סה"כ: 21-25 שקפים (תלוי בכמות שקפי "איך עובדים")
שפה:
פרומפטים:
direction:rtl; font-size:12px; border-top:1px dashedmin-width:44px; min-height:44px (touch target)navigator.clipboard.writeText(text).catch(() => {})שקף תרחישים מהחיים (שקף 14 — חובה!):
מה זה: 3 כרטיסי תרחיש שמראים מה הכלי פותר, לא איך ללחוץ על כפתורים. תרחישים שכולם מזדהים איתם — לא רק מורים.
כלל מפתח: כל תרחיש חייב להיות רלוונטי לקהל רחב — חינוך, ניהול, יזמות, שיווק, שימוש אישי. חשוב על בעיות שכולם מתמודדים איתם: ארגון קבצים, חיסכון זמן, בירוקרטיה, יצירת תוכן, אוטומציה של משימות חוזרות.
פורמט — 3 כרטיסי scenario:
scenario-cards (grid 3 עמודות)var(--tool-light)דוגמאות לתרחישים טובים (לא רק חינוך!):
המטרה: כל אחד בקהל אומר "גם לי יש את הבעיה הזו!" — ולא "זה רק למורים"
שקף דוגמאות תוצרים (שקף 15 — חובה!):
מה זה: 2-3 תוצרים אמיתיים שנוצרו עם הכלי, עם צילום מסך ותיאור קצר.
תהליך:
פורמט — קרוסלה + lightbox:
product-carousel (קרוסלה עם חצי ניווט ימינה/שמאלה)min-width:44px; min-height:44px (touch target)המטרה: המשתתף רואה תוצר מוגמר ואומר "אני רוצה את זה"
שקף טיפים (שקף 16 — חובה!):
מה זה: 3-5 טיפים מעשיים שהופכים את המשתמש ממתחיל למישהו שיודע להשתמש בכלי בצורה חכמה. שילוב של שלושה סוגים:
סוגי טיפים (לשלב!):
פורמט — tips-grid:
tips-gridvar(--tool-light) עם גבול שמאלי var(--tool)דוגמאות לטיפים טובים:
המטרה: המשתתף יוצא עם ידע פנימי שלא היה מגלה לבד
שקף שאלות ותשובות (שקף 17 — חובה!):
מה זה: 4-6 שאלות שאנשים באמת שואלים (או לא מעזים לשאול) על הכלי, באקורדיון שנפתח בלחיצה.
פורמט — faq-accordion:
faq-accordionmin-height: 44px על כל שאלהשאלות שחוזרות בכל כלי (לבחור 4-6 רלוונטיות):
כלל: להתאים את השאלות לכלי הספציפי. לא להעתיק את אותן 6 שאלות בכל מצגת — לחשוב מה באמת ישאלו על הכלי הזה.
המטרה: לפרק חסמים לפני התרגול — אחרי שהתשובות ברורות, קל יותר לנסות
שקף תרגול (שקף 18 — חובה!):
מה זה: משימה מעשית שהמשתתפים עושים עכשיו, במהלך ההדרכה. לא "לכו הביתה ותנסו" — אלא "פתחו את הכלי ותעשו את זה ב-5 דקות".
פורמט — practice-block:
practice-blockדוגמאות למשימות:
המטרה: המשתתף לא רק צופה — הוא עושה. זה מה שהופך הדרכה לזכירה
שקף אינפוגרפיקת סיכום (שקף 18 — חובה!):
שינוי מהותי: האינפוגרפיקה כבר לא שקף שלם של שלבים טכניים יבשים. היא strip קומפקטי שמסכם את התהליך בתוך שקף הסיכום.
פורמט — h-flow מצומצם:
h-flow (ה-CSS כבר ב-template.html)h-flow-step) בשורה אחת, חץ SVG שמאלה (RTL) ביניהןh-flow-num (מספר בעיגול) + h-flow-icon (SVG) + h-flow-title + h-flow-desch-flow-step result (גבול ירוק, תוצר מוגמר)גופנים — חובה, אל תחליף!
Playpen Sans Hebrew (כתב יד)Assistant (גוף רגיל), שפה פשוטה — כאילו מסבירים לחברחץ בכיוון RTL (שמאלה):
<div class="h-flow-arrow">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--tool)" stroke-width="2">
<line x1="19" y1="12" x2="5" y2="12"/>
<polyline points="12 5 5 12 12 19"/>
</svg>
</div>
רפרנס: _drafts/infographic-summary-test.html — דוגמה לפומלי (לעדכן לפורמט החדש)
Claude Code section:
שקף CTA — קישורים חובה:
https://chat.whatsapp.com/HhAL8L2I2jCH1CW1Iehr4Jhttps://www.facebook.com/profile.php?id=61576498498498[email protected]<a href target="_blank">, לא טקסט בלבדPlaypen Sans Hebrew (כותרות/כתב יד) + Assistant (גוף/תוכן). לא Heebo, לא Karantina.font-size:1.3em, צבע var(--tool), בלי underline::after--text-muted: #5A6B7D (לא #6B7D8F). אסור שכבות rgba שקופות על טקסט muted — לוודא WCAG AAmin-width:44px; min-height:44pxכל מצגת חייבת שני breakpoints:
/* טאבלט */
@media (max-width: 768px) {
.grid-3, .grid-2 { grid-template-columns: 1fr; }
.compare-cols { flex-direction: column; }
.h-flow { flex-direction: column; align-items: center; }
.slide-inner { padding: 22px 18px; }
}
/* מובייל */
@media (max-width: 480px) {
.slide { padding: 16px 12px 70px; }
.slide-inner { padding: 16px 12px; }
h2 { font-size: clamp(1.2rem, 5vw, 1.6rem); }
.step-card, .g-card { padding: 14px; }
.scenario-cards { grid-template-columns: 1fr; }
.tips-grid { grid-template-columns: 1fr; }
.product-carousel { max-width: 100vw; }
body { font-size: 15px; }
}
כללים:
clamp(), גוף לא מתחת ל-14px1fr ב-480pxdocs/training/{tool-name}/
├── presentation.html ← הקובץ הראשי (שם אחיד!)
└── screenshots/ ← צילומי מסך (אם יש)
pomelli, stitch, claude-codepresentation.html (לא index.html, לא intro.html)| סקיל | תוצר | חובה? |
|---|---|---|
/create-reels | סרטון רילס 60 שניות | חובה |
/infographic | אינפוגרפיקה | אופציונלי |
/practice-sim | סימולציית תרגול | אופציונלי |
/publish)docs/training/{tool-name}/אחרי שהמצגת מוכנה ואושרה, הצג למייטל רשימת רעיונות לתוכן שנגזר מהמצגת — מוכן להיכנס לדשבורד התוכן.
פורמט — טבלת הצעות:
| # | רשת | סוג תוכן | רעיון | מבוסס על שקף |
|---|---|---|---|---|
| 1 | פוסט ערך | ... | תרחישים / טיפים | |
| 2 | קרוסלה | ... | דוגמאות תוצרים | |
| 3 | רילס | ... | לפני/אחרי עם הכלי | |
| 4 | פוסט מקצועי | ... | השוואה / יתרונות | |
| 5 | הודעה לקבוצה | ... | טיפ + קישור למצגת |
כללים:
כלל עליון: לפני שמציגים את המצגת למייטל, חובה להריץ סוכן QA שבודק שהכל תקין. לא להגיד "המצגת מוכנה" בלי שהבדיקה עברה.
שלח סוכן (Agent tool) שבודק את כל הסעיפים הבאים ומחזיר דוח. רק אחרי שהדוח תקין — הצג את המצגת.
טכני:
dir="rtl" + lang="he" קיימים--tool / --tool-light / --tool-dark מוגדרים נכוןמובייל (חובה!):
@media (max-width: 768px) — טאבלט@media (max-width: 480px) — מובייל1fr ב-480pxclamp() — לא גודל קבועmin-width:44px; min-height:44pxתמונות:
תוכן:
אם נמצאו בעיות: תקן אותן לפני שמציג למייטל. אם הבעיה דורשת החלטה — שאל.
docs/training/{tool-name}/
├── presentation.html ← מצגת ראשית
├── screenshots/ ← צילומי מסך (אם יש)
├── reel-9x16.mp4 ← רילס (אם נוצר)
├── infographic.html ← אינפוגרפיקה (אופציונלי)
└── practice.html ← סימולציה (אופציונלי)
כשמשהו לא ברור — תסתכל על אלה:
docs/training/pomelli/presentation.html — הכי עדכנית ומלוטשת (20 שקפים)docs/training/stitch/presentation.html — BA slider, flow chart, copy promptsdocs/training/claude-code/intro.html — קרוסלה + lightbox, v-flow, יתרונות כגרידמורים, מדריכים, רכזי טכנולוגיה. שפה מקצועית-נגישה.