الـ skill: html-presentation
العرض ده ملف HTML واحد
إزاي الـ skill بتاعتي لعمل العروض مع Claude بتشتغل، والعرض ده نفسه هو التجربة الحية. المس كل حاجة.
هشام أبو العلامشروع شخصيأكتوبر 2026
متقاس من الملف نفسه
ده العرض كله: 18 slide، و22 theme، و25 تركيبة خطوط، والمحرك. من غير صور ولا مكتبات.
الـ skill بتشتغل إزاي
من جملة عادية لعرض متراجع
اطلب
بقول المحاضرة عن إيه.
اختار
Claude بيختار الشكل.
اكتب
حتة لكل slide.
راجع
script بيلاقي المشاكل.
سلّم
باخد الملف.
متحسوب على الهوا
من غير framework. ومفيش حاجة تتسطّب.
المسرح: 1920 × 1080
الشباك بيتغير. المسرح لأ.
غيّر حجم الشباك وبص على السطر ده.
الـ layouts
27 layout، بالاسم
دوس على layout
title
الزراير اللي عليها إطار مستعملة في العرض ده.
جرّب: اكتب تحت
العنوان ده بيظبط نفسه.
حجم الخط: عادي.
الظهور بالـ click
الحاجات بتظهر click ورا click
fade
rise
scale
draw
count
list
- واحدة
- ورا
- واحدة
الـ Magic Move، الجزء الأول
ادّي شكلين نفس الاسم.
الـ Magic Move، الجزء التاني
المحرك بيعمل التزحلق.
الرسوم البيانية
الرسم البياني attribute واحد
غيّر رقم. والأعمدة تترسم تاني.
الـ themes
22 theme، لمسة لكل واحد
الأساسية
المكتبة (16)
الخطوط
25 تركيبة خطوط، نفس الكلام بصوت جديد
الأساسية
المكتبة
القلم
اضغط M وارسم على الـ slide دي.
شاشة المقدّم
اضغط P: شباك تاني، ليك إنت بس
المراجِع
المراجِع بيلاقي اللي بطّلت تشوفه
$ node check.mjs broken.html
FAIL broken.html: 4 slides, 4 issues (0.8s)
slide 3: img "missing.jpg" has no alt attribute
fix: add alt="what it shows" (alt="" if purely decorative)
slide 4: ul has 7 bullets (max 6)
fix: cut to 5 or split into two slides
$ node check.mjs fixed.html --themes
ok fixed.html [keynote-white]: 4 slides, 0 issues (0.6s)
ok fixed.html [studio]: 4 slides, 0 issues (2.6s)
... and 20 more themes, all ok
In English
One HTML file, works in any browser.
Nothing to install. Open the file and press F.
دورك
اضغط زرار.
skill شخصية بتاعتي، مش بتاعة Apple.ملف واحد. بيفتح في أي حتة. وبيتطبع PDF.present-in-html skill: hisham-abuella.github.io/present-in-html