npx claudepluginhub yonatangross/orchestkit --plugin orkThis skill is limited to using the following tools:
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
Generates zero-dependency, animation-rich HTML presentations from scratch or by converting PPT/PPTX files. Ensures exact viewport fit for browser-based slide decks with distinctive designs.
Generates zero-dependency, animation-rich HTML presentations from scratch, PPT/PPTX conversions, or existing slides. For talks, pitches, workshops via visual style exploration.
Generates zero-dependency HTML slide presentations with inline CSS/JS and animations. Use for new decks from scratch, PPT/PPTX conversions, or enhancing existing HTML presentations.
Share bugs, ideas, or general feedback.
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
Based on zarazhangrui/frontend-slides, restructured for OrchestKit.
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 |
Before designing, understand the content. Use AskUserQuestion:
Question 1: Purpose
Question 2: Slide Count
Question 3: Content Readiness
If user has content, ask them to share it. If topic only, help structure an outline.
This is the "show, don't tell" phase.
Ask how the user wants to choose their style:
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 |
If "Show me options", ask via AskUserQuestion:
Question: Vibe
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 |
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.
Show user the 3 options and ask via AskUserQuestion:
Generate the full presentation based on content (Phase 1) and style (Phase 2).
presentation.html # Self-contained presentation
assets/ # Images if any (PPT conversion)
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>
Every slide MUST fit exactly in the viewport. Load: Read("${CLAUDE_SKILL_DIR}/rules/viewport-fitting.md")
Quick checklist:
.slide has height: 100vh; height: 100dvh; overflow: hidden;clamp(min, preferred, max)clamp() or viewport units${CLAUDE_SKILL_DIR}/rules/content-density.md)Also see responsive-patterns skill for advanced clamp()/container query patterns.
.visible class on scroll for CSS animations<section>, <nav>, <main>)@media (prefers-reduced-motion: reduce)#6366f1 (generic indigo), purple gradients on white.claude-design/slide-previews/ if it existsopen [filename].htmlYour 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
| 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 |
| 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 |
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 demosLoad 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 |
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 |