A sophisticated AI skill for generating zero-dependency, responsive HTML presentations with a focus on high-end design and viewport-perfect layouts.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install html-slide-creator
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install html-slide-creator using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Slide Creator?
The Slide Creator is a developer-centric tool designed to build production-quality presentations that run entirely in the browser. Unlike generic slide generators, this skill emphasizes distinctive aesthetics and technical precision, ensuring that every deck is responsive, accessible, and performant. It is a standout among Openclaw Skills for its ability to transform raw data and resources into interactive experiences without the need for heavy build tools or external dependencies.
By following a show-don't-tell philosophy, the skill allows users to explore visual styles through generated previews before finalizing the output. Whether you are building a high-stakes pitch deck or a technical tutorial, the Slide Creator ensures your content is perfectly framed within the viewport, utilizing modern CSS techniques to eliminate unwanted scrolling and layout shifts.
Slide Creator Use Cases
- Creating high-impact pitch decks for startups with custom animations and interactive elements.
- Converting legacy .pptx files into modern, web-native presentations for better accessibility.
- Generating technical conference talks that require perfectly rendered code snippets and diagrams.
- Automating the creation of weekly team updates or reports directly from project markdown files.
- Building educational tutorials that users can view and edit directly in their browser.
How Slide Creator Works
- Scan the local resources folder to ingest and summarize markdown, PDF, and image assets.
- Execute a planning phase using the --plan flag to create a structured PLANNING.md outline.
- Perform visual discovery by generating three distinct style previews based on the user's desired mood and branding.
- Process provided images using Python-based tools to optimize dimensions, apply masks, and ensure style compatibility.
- Synthesize the approved plan and style into a single, zero-dependency HTML file with embedded CSS and JavaScript.
- Use the --export flag to convert the final HTML presentation into a standard PowerPoint format if distribution requires it.
Slide Creator Setup
To get started with this skill, ensure you have Python and Node.js installed on your system. Run the following commands to install necessary dependencies for image processing and file conversion:
# Install Python dependencies
pip install Pillow python-pptx
# Install Node.js dependencies for exports
npm install puppeteer pptxgenjs
Once installed, you can begin the workflow by simply asking the agent to create a presentation or by running the planning command:
/slide-creator --plan "Create a 10-slide deck about our new API architecture"
Slide Creator Data Schema & Taxonomy
The Slide Creator organizes its output and metadata using a clean, file-based taxonomy to ensure portability and clarity within Openclaw Skills projects.
| Component | Type | Description |
|---|---|---|
| PLANNING.md | Markdown | The core blueprint containing slide content, visual anchors, and resource mapping. |
| presentation.html | HTML/CSS/JS | The final standalone presentation file featuring responsive design and animations. |
| assets/ | Directory | Stores optimized versions of logos, screenshots, and diagrams used in the deck. |
| PRESENTATION_SCRIPT.md | Markdown | Automatically generated speaker notes, timing cues, and transition guides. |
| .claude-design/ | Cache | Internal directory used for temporary style previews and design exploration data. |
Slide Creator Advanced Features
- Viewport-perfect layout engine using CSS clamp() and dynamic viewport units to prevent internal scrolling.
- Interactive in-browser editing mode with auto-save to localStorage and direct file export capabilities.
- Multi-stage co-design workflow that uses multimodal AI to analyze and place images as visual anchors.
- Extensive library of animation-rich presets including Neon Cyber, Swiss Modern, and Editorial Magazine styles.
- Smart content density management that automatically splits overflow content across multiple slides.
- Support for Intersection Observer-driven animations and custom JavaScript interactions like 3D tilt effects.
SKILL.md
Loading
Related Openclaw Skills
TickTick Integration
A powerful CLI and AI agent tool to manage TickTick tasks, projects, and reminders through the TickTick Open API.
TickTick Task Manager Integration
Manage your TickTick projects and tasks directly through your AI agent environment.
LG ThinQ Skill
A specialized integration to monitor and manage LG ThinQ-enabled smart appliances through an AI-driven command interface.
Skirmish CLI
A comprehensive command-line toolset for building, simulating, and submitting JavaScript-based AI battle strategies to the LLM Skirmish platform.
ClawDraw
ClawDraw is an advanced generative art skill that enables AI agents to create complex algorithmic patterns and transform images into artistic strokes on a real-time multiplayer canvas.
ClawDraw
A WebGPU-powered multiplayer canvas that enables AI agents to create algorithmic art, paint images, and collaborate in real time.
METADATA
Featured*
