SI skill'lar, saytlar va ilovalar katalogiKutubxonam+ Taklif qilishTaklif

Frontend Slides skill

Claude Code skill: noldan yoki PowerPoint faylidan bitta HTML faylda chiroyli taqdimot yaratadi. Dizayn bilmasdan vizual previewdan uslub tanlaysiz.

DizaynClaude CodeCodexGemini CLIKimi CodeOpenCodeMITJavaScript★ 32 168
GitHub'da ochish ↗

Tezkor o'rnatish

npx skills add https://github.com/zarazhangrui/frontend-slides

Terminalda ishga tushiring. npx uchun Node.js kerak. Boshqa usullar quyidagi qo'llanmada.

Frontend Slides nima

Frontend Slides — taqdimotlarni brauzerda ishlaydigan HTML ko'rinishida yaratadigan skill. U noldan taqdimot qurishi yoki mavjud PowerPoint faylini veb-slaydga aylantirishi mumkin. CSS yoki JavaScript bilmaydigan, dizayner bo'lmagan foydalanuvchilarga mo'ljallangan. Litsenziya: MIT.

Asosiy g'oya — "ko'rsat, aytma": uslubni so'z bilan tasvirlash o'rniga, tayyor vizual previewlardan o'zingizga yoqqanini tanlaysiz. Natija — bitta HTML fayl, ichida CSS/JS bor, npm yoki build vositalari kerak emas.

O'rnatish

Usul Buyruq Natija
Claude Code plugin (1-xabar) /plugin marketplace add https://github.com/zarazhangrui/frontend-slides Marketplace manbasi qo'shiladi
Claude Code plugin (2-xabar) /plugin install frontend-slides@frontend-slides Plugin o'rnatiladi, /frontend-slides:frontend-slides ishlaydi
Qo'lda (klon) git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides Mustaqil skill, /frontend-slides ishlaydi
Boshqa agentlar Agentga repo havolasini yuboring Agent SKILL.md dan boshlab kerakli fayllarni o'qiydi

Eslatmalar:

  • Plugin buyruqlarini ikkita alohida xabar qilib yuboring, bitta xabarga qo'shmang.
  • To'liq HTTPS URL ishlating. Qisqa zarazhangrui/frontend-slides shakli SSH orqali urinib, xato berishi mumkin.
  • Qo'lda o'rnatishda SKILL.md, STYLE_PRESETS.md, viewport-base.css, html-template.md, animation-patterns.md, bold-template-pack papkasi va scripts/ ichidagi fayllar ~/.claude/skills/frontend-slides/ ga ko'chiriladi.
  • Codex, Kimi Code, OpenCode, Gemini CLI kabi agentlarga fayl tizimiga kirish imkoni kerak.

Ish jarayoni

Yangi taqdimot:

  1. Skill kontentingiz haqida so'raydi (slaydlar, xabarlar, rasmlar).
  2. Brifdan kayfiyatni aniqlab, 3 ta vizual style preview yaratadi.
  3. Siz vizual yo'nalishni tanlaysiz.
  4. To'liq taqdimot shu uslubda yaratiladi.
  5. Natija brauzerda ochiladi.

PowerPoint konvertatsiyasi:

  1. Skill PPT'dan barcha matn, rasm va izohlarni ajratib oladi.
  2. Ajratilgan kontentni tasdiqlash uchun ko'rsatadi.
  3. Siz uslub tanlaysiz.
  4. Asl materiallar bilan HTML taqdimot hosil bo'ladi.

Amaliy misol

  1. Claude Code'da /frontend-slides:frontend-slides ni yozing (qo'lda o'rnatgan bo'lsangiz — /frontend-slides).
  2. Maqsadni ayting: "I want to create a pitch deck for my AI startup".
  3. Skill taqdimot asosan o'qish uchunmi yoki nutq uchunmi, deb so'raydi. Nutq uchun — slaydda 1–3 band, o'qish uchun — 4–8 band yoki 4–6 karta.
  4. 3 ta previewdan birini tanlang: bittasi STYLE_PRESETS.md dan xavfsiz preset, kamida bittasi bold shablon, bittasi "wildcard".
  5. Tayyor HTML faylni brauzerda oching.

PPT uchun: "Convert my presentation.pptx to a web slideshow".

Tayyor uslublar

  • Qorong'i: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical.
  • Yorug': Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial.
  • Maxsus: Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink.
  • Bold Template Pack: beautiful-html-templates dan 34 ta ixtiyoriy dizayn tizimi (masalan, Neo-Grid Bold, Editorial Tri-Tone, Creative Mode, Broadside, Signal, Vellum).

Cheklovlar va maslahatlar

  • Har bir slayd qat'iy 16:9 (1920×1080) sahnada quriladi va butun ekranga bir xil masshtablanadi. Telefonda ham kontent qayta joylashtirilmaydi, faqat letterbox/pillarbox bo'lishi mumkin.
  • Slaydda skroll, overflow va ustma-ust panellar bo'lmaydi. Kontent ko'p bo'lsa, skill uni qo'shimcha slaydlarga bo'ladi.
  • Har bir taqdimotga viewport-base.css to'liq qo'shiladi, prefers-reduced-motion qo'llab-quvvatlanadi.
  • Skill Inter, Roboto, Arial kabi odatiy shriftlardan va oq fondagi binafsha gradientlardan qochadi.
  • Mavjud HTML taqdimotni yaxshilash rejimi ham bor. Kontent qo'shgandan keyin sahna 16:9 qolganini va matn sig'ganini tekshiring.
  • Bold shablonning to'liq design.md fayli faqat siz shablonni tanlaganingizdan keyin yuklanadi.
  • Boshqa agentlarda /frontend-slides:frontend-slides buyrug'i odatda ishlamaydi. Agentdan skillni ishlatishni so'rang va repo yoki SKILL.md ga yo'naltiring.
  • Repoda scripts/extract-pptx.py, scripts/deploy.sh, scripts/export-pdf.sh fayllari bor.

Manba

github.com/zarazhangrui/frontend-slides

Video qo'llanma: YouTube