[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-zarazhangrui-frontend-slides":3},{"slug":4,"name":5,"summary":6,"owner":7,"repo":8,"repo_url":9,"avatar_url":10,"stars":11,"views":12,"language":13,"license":14,"ai_tools":15,"topics":21,"published_at":32,"updated_at":33,"category":34,"category_slug":35,"description":36,"github_synced_at":37,"install":38,"guide_html":41,"toc":42},"zarazhangrui-frontend-slides","Frontend Slides skill","Claude Code skill: noldan yoki PowerPoint faylidan bitta HTML faylda chiroyli taqdimot yaratadi. Dizayn bilmasdan vizual previewdan uslub tanlaysiz.","zarazhangrui","frontend-slides","https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F153693696?v=4",32168,0,"JavaScript","MIT",[16,17,18,19,20],"Claude Code","Codex","Gemini CLI","Kimi Code","OpenCode",[22,23,24,25,26,27,28,29,30,31],"ai-slides","anthropic","claude","claude-code","claude-skill","generative-ui","html","presentation","slides","vibe-coding","2026-11-10T16:16:59.000000Z","2026-11-10T16:17:39.000000Z","Dizayn","dizayn","Create beautiful slides on the web using a coding agent's frontend skills","2026-11-10T16:17:14.000000Z",{"repo_url":9,"skills":39,"custom":40},[8],null,"\u003Ch2 id=\"frontend-slides-nima\">Frontend Slides nima\u003C\u002Fh2>\n\u003Cp>Frontend Slides — taqdimotlarni brauzerda ishlaydigan HTML ko&#039;rinishida yaratadigan skill. U noldan taqdimot qurishi yoki mavjud PowerPoint faylini veb-slaydga aylantirishi mumkin. CSS yoki JavaScript bilmaydigan, dizayner bo&#039;lmagan foydalanuvchilarga mo&#039;ljallangan. Litsenziya: MIT.\u003C\u002Fp>\n\u003Cp>Asosiy g&#039;oya — &#34;ko&#039;rsat, aytma&#34;: uslubni so&#039;z bilan tasvirlash o&#039;rniga, tayyor vizual previewlardan o&#039;zingizga yoqqanini tanlaysiz. Natija — bitta HTML fayl, ichida CSS\u002FJS bor, npm yoki build vositalari kerak emas.\u003C\u002Fp>\n\u003Ch2 id=\"ornatish\">O&#039;rnatish\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Usul\u003C\u002Fth>\n\u003Cth>Buyruq\u003C\u002Fth>\n\u003Cth>Natija\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>Claude Code plugin (1-xabar)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u002Fplugin marketplace add https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Marketplace manbasi qo&#039;shiladi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Claude Code plugin (2-xabar)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>\u002Fplugin install frontend-slides&#64;frontend-slides\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Plugin o&#039;rnatiladi, \u003Ccode>\u002Ffrontend-slides:frontend-slides\u003C\u002Fcode> ishlaydi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Qo&#039;lda (klon)\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>git clone https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides.git ~\u002F.claude\u002Fskills\u002Ffrontend-slides\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Mustaqil skill, \u003Ccode>\u002Ffrontend-slides\u003C\u002Fcode> ishlaydi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Boshqa agentlar\u003C\u002Ftd>\n\u003Ctd>Agentga repo havolasini yuboring\u003C\u002Ftd>\n\u003Ctd>Agent \u003Ccode>SKILL.md\u003C\u002Fcode> dan boshlab kerakli fayllarni o&#039;qiydi\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>Eslatmalar:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Plugin buyruqlarini ikkita alohida xabar qilib yuboring, bitta xabarga qo&#039;shmang.\u003C\u002Fli>\n\u003Cli>To&#039;liq HTTPS URL ishlating. Qisqa \u003Ccode>zarazhangrui\u002Ffrontend-slides\u003C\u002Fcode> shakli SSH orqali urinib, xato berishi mumkin.\u003C\u002Fli>\n\u003Cli>Qo&#039;lda o&#039;rnatishda \u003Ccode>SKILL.md\u003C\u002Fcode>, \u003Ccode>STYLE_PRESETS.md\u003C\u002Fcode>, \u003Ccode>viewport-base.css\u003C\u002Fcode>, \u003Ccode>html-template.md\u003C\u002Fcode>, \u003Ccode>animation-patterns.md\u003C\u002Fcode>, \u003Ccode>bold-template-pack\u003C\u002Fcode> papkasi va \u003Ccode>scripts\u002F\u003C\u002Fcode> ichidagi fayllar \u003Ccode>~\u002F.claude\u002Fskills\u002Ffrontend-slides\u002F\u003C\u002Fcode> ga ko&#039;chiriladi.\u003C\u002Fli>\n\u003Cli>Codex, Kimi Code, OpenCode, Gemini CLI kabi agentlarga fayl tizimiga kirish imkoni kerak.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"ish-jarayoni\">Ish jarayoni\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>Yangi taqdimot:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Col>\n\u003Cli>Skill kontentingiz haqida so&#039;raydi (slaydlar, xabarlar, rasmlar).\u003C\u002Fli>\n\u003Cli>Brifdan kayfiyatni aniqlab, 3 ta vizual style preview yaratadi.\u003C\u002Fli>\n\u003Cli>Siz vizual yo&#039;nalishni tanlaysiz.\u003C\u002Fli>\n\u003Cli>To&#039;liq taqdimot shu uslubda yaratiladi.\u003C\u002Fli>\n\u003Cli>Natija brauzerda ochiladi.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cstrong>PowerPoint konvertatsiyasi:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Col>\n\u003Cli>Skill PPT&#039;dan barcha matn, rasm va izohlarni ajratib oladi.\u003C\u002Fli>\n\u003Cli>Ajratilgan kontentni tasdiqlash uchun ko&#039;rsatadi.\u003C\u002Fli>\n\u003Cli>Siz uslub tanlaysiz.\u003C\u002Fli>\n\u003Cli>Asl materiallar bilan HTML taqdimot hosil bo&#039;ladi.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2 id=\"amaliy-misol\">Amaliy misol\u003C\u002Fh2>\n\u003Col>\n\u003Cli>Claude Code&#039;da \u003Ccode>\u002Ffrontend-slides:frontend-slides\u003C\u002Fcode> ni yozing (qo&#039;lda o&#039;rnatgan bo&#039;lsangiz — \u003Ccode>\u002Ffrontend-slides\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>Maqsadni ayting: &#34;I want to create a pitch deck for my AI startup&#34;.\u003C\u002Fli>\n\u003Cli>Skill taqdimot asosan o&#039;qish uchunmi yoki nutq uchunmi, deb so&#039;raydi. Nutq uchun — slaydda 1–3 band, o&#039;qish uchun — 4–8 band yoki 4–6 karta.\u003C\u002Fli>\n\u003Cli>3 ta previewdan birini tanlang: bittasi \u003Ccode>STYLE_PRESETS.md\u003C\u002Fcode> dan xavfsiz preset, kamida bittasi bold shablon, bittasi &#34;wildcard&#34;.\u003C\u002Fli>\n\u003Cli>Tayyor HTML faylni brauzerda oching.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>PPT uchun: &#34;Convert my presentation.pptx to a web slideshow&#34;.\u003C\u002Fp>\n\u003Ch2 id=\"tayyor-uslublar\">Tayyor uslublar\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Qorong&#039;i:\u003C\u002Fstrong> Bold Signal, Electric Studio, Creative Voltage, Dark Botanical.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Yorug&#039;:\u003C\u002Fstrong> Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Maxsus:\u003C\u002Fstrong> Neon Cyber, Terminal Green, Swiss Modern, Paper &amp; Ink.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Bold Template Pack:\u003C\u002Fstrong> \u003Ccode>beautiful-html-templates\u003C\u002Fcode> dan 34 ta ixtiyoriy dizayn tizimi (masalan, Neo-Grid Bold, Editorial Tri-Tone, Creative Mode, Broadside, Signal, Vellum).\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"cheklovlar-va-maslahatlar\">Cheklovlar va maslahatlar\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Har bir slayd qat&#039;iy 16:9 (1920×1080) sahnada quriladi va butun ekranga bir xil masshtablanadi. Telefonda ham kontent qayta joylashtirilmaydi, faqat letterbox\u002Fpillarbox bo&#039;lishi mumkin.\u003C\u002Fli>\n\u003Cli>Slaydda skroll, overflow va ustma-ust panellar bo&#039;lmaydi. Kontent ko&#039;p bo&#039;lsa, skill uni qo&#039;shimcha slaydlarga bo&#039;ladi.\u003C\u002Fli>\n\u003Cli>Har bir taqdimotga \u003Ccode>viewport-base.css\u003C\u002Fcode> to&#039;liq qo&#039;shiladi, \u003Ccode>prefers-reduced-motion\u003C\u002Fcode> qo&#039;llab-quvvatlanadi.\u003C\u002Fli>\n\u003Cli>Skill Inter, Roboto, Arial kabi odatiy shriftlardan va oq fondagi binafsha gradientlardan qochadi.\u003C\u002Fli>\n\u003Cli>Mavjud HTML taqdimotni yaxshilash rejimi ham bor. Kontent qo&#039;shgandan keyin sahna 16:9 qolganini va matn sig&#039;ganini tekshiring.\u003C\u002Fli>\n\u003Cli>Bold shablonning to&#039;liq \u003Ccode>design.md\u003C\u002Fcode> fayli faqat siz shablonni tanlaganingizdan keyin yuklanadi.\u003C\u002Fli>\n\u003Cli>Boshqa agentlarda \u003Ccode>\u002Ffrontend-slides:frontend-slides\u003C\u002Fcode> buyrug&#039;i odatda ishlamaydi. Agentdan skillni ishlatishni so&#039;rang va repo yoki \u003Ccode>SKILL.md\u003C\u002Fcode> ga yo&#039;naltiring.\u003C\u002Fli>\n\u003Cli>Repoda \u003Ccode>scripts\u002Fextract-pptx.py\u003C\u002Fcode>, \u003Ccode>scripts\u002Fdeploy.sh\u003C\u002Fcode>, \u003Ccode>scripts\u002Fexport-pdf.sh\u003C\u002Fcode> fayllari bor.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"manba\">Manba\u003C\u002Fh2>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fzarazhangrui\u002Ffrontend-slides\" rel=\"noopener nofollow ugc\" target=\"_blank\">github.com\u002Fzarazhangrui\u002Ffrontend-slides\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>Video qo&#039;llanma: \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v&#61;372Iksaz8b0\" rel=\"noopener nofollow ugc\" target=\"_blank\">YouTube\u003C\u002Fa>\u003C\u002Fp>\n",[43,46,49,52,55,58,61],{"id":44,"title":45},"frontend-slides-nima","Frontend Slides nima",{"id":47,"title":48},"ornatish","O'rnatish",{"id":50,"title":51},"ish-jarayoni","Ish jarayoni",{"id":53,"title":54},"amaliy-misol","Amaliy misol",{"id":56,"title":57},"tayyor-uslublar","Tayyor uslublar",{"id":59,"title":60},"cheklovlar-va-maslahatlar","Cheklovlar va maslahatlar",{"id":62,"title":63},"manba","Manba"]