Presentation builder
Skill RanNahmany/mamad-challenge-skills/skills/presentation-builder
Transform scripts into Apple-inspired HTML presentations with animations, color psychology, and lead magnet CTAs. Triggers on requests to create presentations, build slides, or generate HTML decks from scripts.From its SKILL.md
npx -y skills add RanNahmany/mamad-challenge-skills --skill presentation-builderAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 7 stars7 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
4.5 KB, as published. Nobody here has run it
Presentation Builder Skill
Trigger Conditions
Activate when the user:
- Asks to create/build/make a presentation or slides
- References a script file with a style request ("in the style of...")
- Wants an HTML presentation for YouTube, speaking, or video
Companion Files (Read These)
This skill has three supporting files in the same directory — read them before building:
styles-catalog.md— Visual DNA of every style reference (colors, fonts, background, card patterns). Use this instead of reading external style reference files.boilerplate.md— The complete HTML scaffold with all required CSS, animation JS, navigation, and layout. Always start from this.script-examples.md— Script-to-slide transformation examples, the narrative formula, and CTA templates.
Workflow
1. Read Before Building
- Read the script fully — identify the narrative arc and emotional journey
- If a style reference is named, check
styles-catalog.mdfor its visual DNA (do NOT read the external file unless the style isn't in the catalog) - If mood is ambiguous, ask ONE question: "Should this feel urgent/dark, exciting/light, or educational/clean?"
2. Map the Presentation
- Apply The Ran Nahmany Formula to the narrative arc (see
script-examples.md) - Plan slide count: target 15-20, max 35 for complex topics
- Identify which slides need sequential animations vs. immediate reveal
3. Build from Boilerplate
- Start from the template in
boilerplate.md - Apply the style DNA from
styles-catalog.md - Transform script content using rules in
script-examples.md - ALWAYS end with a Lead Magnet CTA slide
4. Save
- Save to:
Finished Presentations/[topic]-[style].html - Single self-contained file, no external dependencies
Core Rules (Non-Negotiable)
Color Psychology
| Color | Meaning | Use For |
|---|---|---|
Red #ef4444 | Problem / Old Way / Expensive | Before state, pain points, .badge-danger |
Green #22c55e | Solution / New Way / Benefit | After state, wins, .badge-success |
Cyan #22d3ee | Technology / Innovation / You | AI refs, CTA, .badge-primary, .glow-text |
Amber #f59e0b | Caution / Transition | Warnings, .badge-warning |
Typography Limits (NEVER exceed)
| Element | Max Size | Weight |
|---|---|---|
h1 | 60px (clamp(36px, 5vw, 60px)) | 900 |
h2 | 24px (clamp(18px, 2.2vw, 24px)) | 600 |
.big | 28px (clamp(20px, 2.8vw, 28px)) | 700 |
.huge | 72px (clamp(42px, 6vw, 72px)) | 900 |
Slide Content Rules
- One new concept per slide
- Mic-drop moments get their own slide
- Same-category list items → one slide
- Distinct ideas → separate slides
- Max 12 elements per slide (prefer 4-6)
- Comparisons: always left=red/problem, right=green/solution
Animation Rules
- All animatable elements start
opacity: 0 - Only
.animate-inclass reveals them (never CSS auto-delays on.visible) - Non-animated slides: show all content immediately via
initializeSlideElements() - Nested elements (badges inside cards) animate separately: parent first, children after
- Space / Right Arrow = next step or next slide
- Left Arrow = previous slide (replay all animations)
Forbidden
::afterpseudo-elements for duplicate text- Font sizes above listed maximums
- Slide padding exceeding 100px vertical
- Content without flexbox centering
.slide.visible .badge:not(.animate-in)CSS patterns- Multiple CTAs on the final slide
- Auto-playing content without user trigger
Pre-Delivery Checklist
- Narrative arc: hook → problem → opportunity → proof → urgency → CTA
- Final slide is a Lead Magnet CTA (specific benefits, single action)
- Color psychology applied consistently
- Typography within size limits
- All grids/panels have
margin: auto - Animated elements start
opacity: 0 - Non-animated slides show content immediately
- Nested animation order correct (parent → children)
- No content cut off at any viewport size
- Mobile responsive breakpoints present
- Short viewport breakpoints (
max-height: 700px) present - Navigation dots don't overlap content