● مجتمع
zarazhangrui
⚡ فوري
frontend-slides
بواسطة zarazhangrui · zarazhangrui/frontend-slides
ولّد عروض شرائح ويب أصيلة مع Claude — شرائح HTML/CSS، انتقالات حقيقية، لا PowerPoint، قابلة للمشاركة عبر URL.
frontend-slides مهارة Claude Code تُنتج عروض شرائح كمواقع HTML/CSS أحادية الصفحة. كل شريحة قسم؛ الانتقالات CSS؛ مقتطفات الكود تُعرض بشكل صحيح؛ تستضيف على أي خادم ثابت. مناسبة للمحادثات التقنية والعروض التجريبية والعروض التقديمية حيث تتفوق حزمة المتصفح على ملف للتنزيل.
لماذا تستخدمه
الميزات الأساسية
- الشرائح HTML — قابلة لإدارة الإصدار والمقارنة
- انتقالات وحركات CSS (لا ملفات Keynote هشة)
- مقتطفات كود مع تمييز صياغي سليم
- متجاوب — يعمل من اللابتوب إلى البروجكتور إلى الهاتف
- تصدير إلى PDF كنسخة احتياطية
عرض مباشر
كيف يبدو في الممارسة
جاهز
حالات الاستخدام
استخدامات عملية: frontend-slides
متى تستخدمه: لديك مخطط و48 ساعة. لا تريد الصراع مع قوالب Keynote.
الخطوات
-
الهيكلة
استخدم frontend-slides. من /talks/outline.md، ولّد عرضًا في /talks/deck/. نمط HTML واحد لكل شريحة، CSS مشترك.✓ تم النسخ
→ مجلد يحتوي index.html + أصول الشرائح؛ يفتح في المتصفح
-
تلميع شرائح الكود
لشرائح الكود، استخدم أسلوب مستودعي الفعلي (انظر src/example.ts). أضف تمييزًا صياغيًا.✓ تم النسخ
→ الكود يُعرض بتمييز سليم وتنسيقك
-
نسخة PDF احتياطية
صدّر إلى PDF لسيناريو «البروجكتور لن يتصل».✓ تم النسخ
→ PDF محفوظ بجانب HTML
النتيجة: عرض يمكن التكرار عليه بـ git، استضافته على GitHub Pages، وتقديمه من متصفح.
المزالق
- Wi-Fi القاعة سيئ وعرضك يحتوي أصولًا بعيدة — ضمّن كل شيء؛ اختبر بلا اتصال قبل المحادثة
متى تستخدمه: تريد شرائح يمكنك فيها فعليًا التفاعل مع المنتج في منتصف العرض.
الخطوات
-
التخطيط
ولّد عرضًا تقديميًا من 10 شرائح. في الشريحة 4، ضمّن iframe للعرض التجريبي للمنتج. في الشريحة 7، ضمّن CodePen مباشرًا.✓ تم النسخ
→ العرض يحتوي iframes في الشرائح الصحيحة
-
تجربة التجاوب
أعد التصيير لبروجكتور 1024x768. هل ينكسر شيء؟✓ تم النسخ
→ إصلاحات نقاط التوقف مُطبَّقة
النتيجة: عرض لا يبدو عرضًا — يبدو المنتج نفسه.
المزالق
- CSP يحجب تضمين iframe — استضف العرض التجريبي تحت نطاق يسمح بالتأطير، أو استخدم تسجيلًا
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
إدارة إصدار العرض بجانب مستودعك
ضع الهيكل في /talks/2026-05-conf/ وأودعه.✓ تم النسخ
frontend-slides-skill +
githubنشر عبر GitHub Pages
ادفع العرض إلى فرع gh-pages وأرني عنوان URL.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- N/A
- الرموز لكل استدعاء
- يتناسب مع حجم العرض
- التكلفة المالية
- مجاني
- نصيحة
- ولّد الهيكل أولًا، ثم لمّع شريحةً بشريحة بدلًا من جولة واحدة ضخمة
الأمان
الصلاحيات والأسرار ونطاق الأثر
الحد الأدنى من الصلاحيات: filesystem-write
تخزين بيانات الاعتماد: لا شيء
نقل البيانات الخارجي: لا شيء؛ عرضك قد يستعين بأصول بعيدة
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
الانتقالات لا تعمل في Safari
تحقق من جدول توافق المتصفح في وثائق المهارة؛ الإعداد الافتراضي يستخدم خصائص مسبوقة
تمييز صياغة الكود مفقود
Prism/Shiki المحزوم يتطلب تحميل الأصول — تأكد من حل المسارات النسبية عند الاستضافة
تصدير PDF يُشوّه التخطيطات
استخدم Chrome غير المرئي للطباعة — الافتراضي في المهارة Puppeteer مع ضبط landscape
البدائل
frontend-slides مقابل البدائل
| البديل | متى تستخدمها | المقايضة |
|---|
| reveal.js / Slidev | تريد إطار عمل كاملًا وتُريح نفسك مع إعداده | مزايا أكثر؛ تعلم أكثر |
| Keynote / PowerPoint | البيئات المؤسسية تتطلب عروضًا قائمة على الملفات | ليس ويبًا أصيلًا؛ أصعب للمشاركة |