Frontend Slides
Zero-dependency, animation-rich HTML presentations in one self-contained file, with a viewport-fit hard gate.
- What
- Zero-dependency, animation-rich HTML presentations in one self-contained file, with a viewport-fit hard gate.
- Cost
- Free
- Needs
- Use "frontend-slides" with an AI agent that has file tools (Read, Write), such as Claude Code.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor: a presentation skill that produces zero-dependency, animation-rich HTML decks running entirely in the browser from a single self-contained file. The workflow detects the mode (new presentation, PPT/PPTX conversion via python-pptx, or enhancement of existing HTML slides), discovers content with minimum questions, then discovers style through visual exploration: it generates 3 single-slide previews and asks which to keep or what to mix, instead of abstract style questionnaires. The signature discipline is a hard viewport-fit gate: every slide must fit one viewport with no internal scrolling, type and spacing scale with clamp(), content that does not fit gets split, never shrunk below readable sizes. Output includes keyboard, wheel, and touch navigation, reveal-on-enter animations, reduced-motion support, semantic structure, and content density limits per slide type. Distinctive design is mandatory: generic purple-gradient template-looking decks are an explicit anti-pattern. By @affaan-m, listed here with credit to its creator (visual approach inspired by zarazhangrui, credited in the repo). From the affaan-m/ECC repository (MIT). Honest caveats: PPT conversion needs python-pptx installed; browser automation helps verify no slide overflows but is optional; one HTML file means no PowerPoint-native editing afterward. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseCommunity-built. Skill Harbor doesn't audit code — review the source before installing.
Use "frontend-slides" with an AI agent that has file tools (Read, Write), such as Claude Code. Prerequisites: a browser to preview the deck. For PPT/PPTX conversion: Python 3 with `pip install python-pptx`. No API key, no paid service. 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/frontend-slides/SKILL.md and copy the full SKILL.md text, plus STYLE_PRESETS.md, html-template.md, animation-patterns.md, and viewport-base.css from the same folder. 2. Paste them into a chat with your agent and add: "Build a [pitch/talk/workshop] deck about [topic]. Length: [short/medium/long]. Content: [paste your notes or draft]." 3. When it shows the 3 single-slide style previews, pick one or say what to mix. It will then build the full deck and validate viewport fit. Tip: for conversion, say "Convert this PPTX: [file]" and confirm python-pptx is available first. Open the resulting HTML file in a browser to check animations and navigation yourself. Safety: a skill is plain-text instructions; it runs nothing by itself. Never paste secrets or API keys into it, and review anything the agent proposes before it acts.
Saved to your recent installs. Find it anytime on /connect.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.