frontend-slides
ساخت slideهای وبی چشم‌گیر با انیمیشن‌های هدفمند و پیش‌نمایش قابل‌اعتماد
این skill برای ساخت presentation slideهای وبی با HTML/CSS و در صورت نیاز React طراحی شده است. روی چیدمان تمیز، انیمیشن‌های معنادار، و جلوه‌های بصری مناسب برای ورود و تعامل تمرکز می‌کند.
همچنین محتوای قابل‌نمایش را پیش از تهیه preview بررسی می‌کند تا metadata داخلی یا chrome نامرتبط وارد اسلاید نشود. پیش‌نمایش‌ها در مسیر .frontend-slides/slide-previews/ ذخیره می‌شوند.
چه چیزی می‌گیرید
- slideهای وبی با ساختار بصری منسجم و ارائه‌پسند
- انیمیشن‌های CSS-only برای HTML و استفاده از Motion در React هنگام دسترس‌پذیری
- تمرکز بر page loadهای تأثیرگذار با staggered reveals و animation-delay
- استفاده از deck chrome واقعی مانند عنوان، تاریخ، نام نویسنده و شماره صفحه
- پیش‌نمایش‌های ذخیره‌شده در `.frontend-slides/slide-previews/`
برای چه کاری خوب است
- ساخت pitch deck، ارائه محصول یا اسلایدهای معرفی برای نمایش در مرورگر
- تبدیل محتوای متنی موجود به یک تجربه ارائه‌ای مدرن و تعاملی
- پروژه‌هایی که به انیمیشن‌های ظریف و کنترل‌شده برای افزایش جذابیت نیاز دارند
برای چه کاری نیست
- ارائه‌های کاملاً متنی یا چاپی که به تعامل و انیمیشن نیاز ندارند
- پروژه‌هایی که به تولید فایل‌های native مانند PowerPoint به‌جای slideهای وبی نیاز دارند
دربارهٔ این اسکیل
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
...
- If the slide needs chrome, use real deck chrome only: the deck title, section title, date, author, company, page number, or a genuine content phrase from the user's material.
- Before opening previews, inspect the visible text and revise if any internal metadata appears.
Save previews to .frontend-slides/slide-previews/ (style-a.html,