ReddRadar
Agent skill
presentation-builder
Creates zero-dependency, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web slides, or create a slide deck for a talk, pitch, or tutorial. Generates single self-contained HTML files with inline CSS/JS.
Install this agent skill to your Project
npx add-skill https://github.com/yonatangross/orchestkit/tree/main/plugins/ork/skills/presentation-builder
Metadata
Additional technical details for this skill
- category
- document-asset-creation
SKILL.md
Presentation Builder
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
Based on zarazhangrui/frontend-slides, restructured for OrchestKit.
Core Philosophy
- Zero Dependencies -- Single HTML files with inline CSS/JS. No npm, no build tools.
- Show, Don't Tell -- Generate visual previews, not abstract choices. People discover preferences by seeing.
- Distinctive Design -- Avoid generic "AI slop" aesthetics. Every presentation should feel custom-crafted.
- Production Quality -- Well-commented, accessible, performant code.
- Viewport Fitting -- Every slide MUST fit exactly within the viewport. No scrolling within slides, ever.
Phase 0: Detect Mode
Determine what the user wants:
| Mode | Trigger | Next Phase |
|---|---|---|
| A: New Presentation | Create slides from scratch | Phase 1 |
| B: PPT Conversion | Has a .ppt/.pptx file | Load Read("${CLAUDE_SKILL_DIR}/references/pptx-conversion.md") then Phase 2 |
| C: Enhancement | Has existing HTML presentation | Read file, understand structure, enhance |
Phase 1: Content Discovery
Before designing, understand the content. Use AskUserQuestion:
Question 1: Purpose
- Header: "Purpose"
- Options: "Pitch deck", "Teaching/Tutorial", "Conference talk", "Internal presentation"
Question 2: Slide Count
- Header: "Length"
- Options: "Short (5-10)", "Medium (10-20)", "Long (20+)"
Question 3: Content Readiness
- Header: "Content"
- Options: "I have all content ready", "I have rough notes", "I have a topic only"
If user has content, ask them to share it. If topic only, help structure an outline.
Phase 2: Style Discovery
This is the "show, don't tell" phase.
Step 2.0: Style Path Selection
Ask how the user wants to choose their style:
- "Show me options" -- Generate 3 previews based on mood (recommended)
- "I know what I want" -- Pick from preset list directly
Available Presets (load Read("${CLAUDE_SKILL_DIR}/references/style-presets.md") for full details):
| Preset | Vibe | Best For |
|---|---|---|
| Bold Signal | Confident, high-impact | Pitch decks, keynotes |
| Electric Studio | Clean, professional | Agency presentations |
| Creative Voltage | Energetic, retro-modern | Creative pitches |
| Dark Botanical | Elegant, sophisticated | Premium brands |
| Notebook Tabs | Editorial, organized | Reports, reviews |
| Pastel Geometry | Friendly, approachable | Product overviews |
| Split Pastel | Playful, modern | Creative agencies |
| Vintage Editorial | Witty, personality-driven | Personal brands |
| Neon Cyber | Futuristic, techy | Tech startups |
| Terminal Green | Developer-focused | Dev tools, APIs |
| Swiss Modern | Minimal, precise | Corporate, data |
| Paper & Ink | Literary, thoughtful | Storytelling |
Step 2.1: Mood Selection (Guided Discovery)
If "Show me options", ask via AskUserQuestion:
Question: Vibe
- "What feeling should the audience have?"
- Options (multiSelect: true, pick up to 2):
- "Impressed/Confident" -- Professional, trustworthy
- "Excited/Energized" -- Innovative, bold
- "Calm/Focused" -- Clear, easy to follow
- "Inspired/Moved" -- Emotional, memorable
Mood-to-Style Mapping:
| Mood | Suggested Styles |
|---|---|
| Impressed/Confident | Bold Signal, Electric Studio, Dark Botanical |
| Excited/Energized | Creative Voltage, Neon Cyber, Split Pastel |
| Calm/Focused | Notebook Tabs, Paper & Ink, Swiss Modern |
| Inspired/Moved | Dark Botanical, Vintage Editorial, Pastel Geometry |
Step 2.2: Generate Style Previews
Generate 3 distinct mini HTML files in .claude-design/slide-previews/:
.claude-design/slide-previews/
├── style-a.html # ~50-100 lines, single title slide
├── style-b.html
└── style-c.html
Each preview: self-contained, inline CSS/JS, animated title slide showing typography, colors, and motion style.
Step 2.3: Present Previews
Show user the 3 options and ask via AskUserQuestion:
- "Which style preview do you prefer?"
- Options: Style A, Style B, Style C, "Mix elements"
Phase 3: Generate Presentation
Generate the full presentation based on content (Phase 1) and style (Phase 2).
File Output
presentation.html # Self-contained presentation
assets/ # Images if any (PPT conversion)
HTML Architecture
Every presentation follows this structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentation Title</title>
<!-- Fonts from Fontshare or Google Fonts -->
<style>
/* Theme variables in :root */
/* Base styles + viewport fitting (see rules/viewport-fitting.md) */
/* Slide container styles */
/* Animations */
/* Responsive breakpoints */
</style>
</head>
<body>
<div class="progress-bar"></div>
<nav class="nav-dots"><!-- JS generated --></nav>
<section class="slide title-slide">...</section>
<section class="slide">...</section>
<!-- More slides -->
<script>
/* SlidePresentation class with navigation */
</script>
</body>
</html>
Critical: Viewport Fitting
Every slide MUST fit exactly in the viewport. Load: Read("${CLAUDE_SKILL_DIR}/rules/viewport-fitting.md")
Quick checklist:
- Every
.slidehasheight: 100vh; height: 100dvh; overflow: hidden; - All font sizes use
clamp(min, preferred, max) - All spacing uses
clamp()or viewport units - Content respects density limits (load
${CLAUDE_SKILL_DIR}/rules/content-density.md) - Breakpoints exist for heights: 700px, 600px, 500px
- When content doesn't fit: split into multiple slides, never scroll
Also see responsive-patterns skill for advanced clamp()/container query patterns.
Required JavaScript Features
- SlidePresentation Class -- Keyboard (arrows, space), touch/swipe, mouse wheel, progress bar, nav dots
- Intersection Observer -- Add
.visibleclass on scroll for CSS animations - Optional enhancements (style-dependent): Custom cursor, particle backgrounds, parallax, 3D tilt, magnetic buttons
Code Quality
- Every CSS/JS section has clear comments explaining what, why, and how to modify
- Semantic HTML (
<section>,<nav>,<main>) - Keyboard navigation works
- ARIA labels where needed
- Reduced motion support:
@media (prefers-reduced-motion: reduce)
Anti-Patterns (DO NOT USE)
- Fonts: Inter, Roboto, Arial, system fonts as display
- Colors:
#6366f1(generic indigo), purple gradients on white - Layouts: Everything centered, generic hero sections, identical card grids
- Decorations: Realistic illustrations, gratuitous glassmorphism
Phase 4: Delivery
- Clean up
.claude-design/slide-previews/if it exists - Open the presentation:
open [filename].html - Provide summary:
Your presentation is ready!
File: [filename].html
Style: [Style Name]
Slides: [count]
Navigation:
- Arrow keys or Space to navigate
- Scroll/swipe also works
- Click dots on the right to jump
To customize:
- Colors: :root CSS variables at top
- Fonts: Change the font link
- Animations: Modify .reveal class timings
Style Reference: Effect-to-Feeling Mapping
| Feeling | Animation Style | Visual Approach |
|---|---|---|
| Dramatic/Cinematic | Slow fade-ins (1-1.5s), large scale transitions | Dark BG, spotlight effects, parallax |
| Techy/Futuristic | Neon glow, glitch/scramble text | Particle systems, grid patterns, monospace accents |
| Playful/Friendly | Bouncy easing, floating animations | Pastel/bright colors, rounded corners |
| Professional/Corporate | Subtle fast animations (200-300ms) | Clean sans-serif, navy/slate, data viz focus |
| Calm/Minimal | Very slow subtle motion | High whitespace, muted palette, serif typography |
| Editorial/Magazine | Strong typography hierarchy | Pull quotes, grid-breaking layouts, B&W + accent |
Troubleshooting
| Issue | Solution |
|---|---|
| Fonts not loading | Check Fontshare/Google Fonts URL, verify font names match CSS |
| Animations not triggering | Verify Intersection Observer is running, check .visible class |
| Scroll snap not working | Ensure scroll-snap-type on html, scroll-snap-align on slides |
| Mobile issues | Disable heavy effects at 768px, test touch events, reduce particles |
| Performance | Use will-change sparingly, prefer transform/opacity animations |
Related Skills
ork:responsive-patterns-- Advanced clamp(), container queries, responsive breakpointsork:accessibility-- WCAG 2.2 compliance, keyboard navigation, ARIA patternsork:ui-components-- shadcn/ui and Radix component patternsork:demo-producer-- Terminal recording and video demos
Rules
Load on demand with Read("${CLAUDE_SKILL_DIR}/rules/<file>"):
| File | Content |
|---|---|
viewport-fitting.md |
Mandatory CSS for viewport-locked slides |
content-density.md |
Maximum content per slide type |
References
Load on demand with Read("${CLAUDE_SKILL_DIR}/references/<file>"):
| File | Content |
|---|---|
style-presets.md |
12 curated visual themes with CSS variables |
pptx-conversion.md |
PowerPoint extraction and conversion workflow |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
yonatangross/orchestkit
expect
Diff-aware AI browser testing — analyzes git changes, generates targeted test plans, and executes them via agent-browser. Reads git diff to determine what changed, maps changes to affected pages via route map, generates a test plan scoped to the diff, and runs it with pass/fail reporting. Use when testing UI changes, verifying PRs before merge, running regression checks on changed components, or validating that recent code changes don't break the user-facing experience.
yonatangross/orchestkit
github-operations
GitHub CLI operations for issues, PRs, milestones, and Projects v2. Covers gh commands, REST API patterns, and automation scripts. Use when managing GitHub issues, PRs, milestones, or Projects with gh.
yonatangross/orchestkit
chain-patterns
Chain patterns for CC 2.1.71 pipelines — MCP detection, handoff files, checkpoint-resume, worktree agents, CronCreate monitoring. Use when building multi-phase pipeline skills. Loaded via skills: field by pipeline skills (fix-issue, implement, brainstorm, verify). Not user-invocable.
yonatangross/orchestkit
storybook-mcp-integration
Storybook MCP server integration for component-aware AI development. Covers 6 tools across 3 toolsets (dev, docs, testing): component discovery via list-all-documentation/get-documentation, story previews via preview-stories, and automated testing via run-story-tests. Use when generating components that should reuse existing Storybook components, running component tests via MCP, or previewing stories in chat.
yonatangross/orchestkit
component-search
Search 21st.dev component registry for production-ready React components. Finds components by natural language description, filters by framework and style system, returns ranked results with install instructions. Use when looking for UI components, finding alternatives to existing components, or sourcing design system building blocks.
yonatangross/orchestkit
ai-ui-generation
AI-assisted UI generation patterns for json-render, v0, Bolt, and Cursor workflows. Covers prompt engineering for component generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality assurance. Use when generating UI components with AI tools, rendering multi-surface MCP visual output, reviewing AI-generated code, or integrating AI output into design systems.
Didn't find tool you were looking for?