Frontend Slides is a sophisticated AI agent skill for creating zero-dependency, animation-rich HTML presentations that run entirely in the browser.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install frontend-presentations
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 frontend-presentations 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 Frontend Slides?
Frontend Slides is a specialized tool within the Openclaw Skills ecosystem designed to eliminate generic AI design. It enables developers and presenters to generate high-end, viewport-perfect HTML slides using single-file architectures. By focusing on distinctive typography, cohesive color themes, and CSS-driven motion, it ensures every presentation feels custom-crafted rather than mass-produced.
The skill prioritizes a show, don't tell philosophy, allowing users to discover their aesthetic through visual previews. Whether starting from a blank slate or converting existing legacy PowerPoint files, Frontend Slides maintains strict technical standards, such as non-negotiable viewport fitting and responsive fluid typography, to ensure presentations look flawless on any screen size.
Frontend Slides Use Cases
- Building high-stakes pitch decks with unique, non-generic visual aesthetics.
- Converting static PPTX files into interactive, web-based presentations.
- Creating zero-dependency conference talk slides that work offline in any browser.
- Developing internal teaching tutorials with built-in browser-based text editing.
- Enhancing existing HTML presentations with modern CSS animations and responsive layouts.
How Frontend Slides Works
- Detect Mode: The agent identifies if the task is a new creation, a PPTX conversion, or an enhancement of an existing HTML file.
- Content Discovery: A centralized diagnostic gathers the purpose, length, and content readiness while evaluating any provided image assets.
- Style Discovery: The agent generates three distinct visual previews based on the desired mood (e.g., Confident, Energized, Focused) to allow user selection.
- Generation: Using mandatory viewport-base CSS and professional animation patterns, the agent compiles a single-file HTML output.
- Deployment & Delivery: The final presentation is opened in the browser with instructions for navigation and optional inline editing features.
Frontend Slides Setup
To use the conversion features of this Openclaw Skills asset, ensure you have the necessary Python environment:
# Install the PPTX extraction dependency
pip install python-pptx
# The skill uses internal scripts for conversion
python scripts/extract-pptx.py <input.pptx> <output_dir>
Frontend Slides Data Schema & Taxonomy
Frontend Slides organizes data to ensure portability and high performance. The architecture follows these specifications:
| Component | Format | Specification |
|---|---|---|
| Output File | HTML5 | Single self-contained file with inline CSS/JS |
| Styling | CSS3 | Responsive clamp() units and viewport-base.css logic |
| Animations | CSS/JS | Staggered reveals and micro-interactions via animation-patterns.md |
| Images | Base64/Local | Automatic max-height constraints: min(50vh, 400px) |
| Metadata | HTML Comments | Speaker notes and structure metadata stored within the source |
Frontend Slides Advanced Features
- Power-User Inline Editing: Enable a browser-based edit mode with localStorage persistence and file export capabilities.
- Viewport-Fitting Invariants: Automatic content splitting and overflow prevention to ensure slides never require scrolling.
- Multi-Modal Image Evaluation: Intelligent analysis of user-provided images to co-design slide outlines based on visual cues.
- Style Presets: Access to 12 curated visual presets like Neon Cyber, Swiss Modern, and Dark Botanical.
- Legacy Conversion: Automated extraction of text, images, and speaker notes from PowerPoint files into clean web code.
SKILL.md
Loading
Related Openclaw Skills
git-standup
A powerful automation tool for Openclaw Skills that analyzes Git history to generate structured daily and weekly work reports.
Daily News Skill
A sophisticated news retrieval skill that enables AI agents to fetch, filter, and summarize daily news reports and high-heat articles via API.
Auto Doc AI
Automatically generate high-quality Google Style Python docstrings using AST parsing and LLM intelligence.
Professional Chinese Writing Assistant
A professional Chinese writing assistant specialized in article rewriting, style imitation, and multi-platform copy optimization.
Creator Deal Ops
A specialized skill for managing creator brand deal operations from initial inbound brief to final payment tracking.
Know Your AI
A specialized CLI for running red-team evaluations, detecting jailbreak vulnerabilities, and reviewing security scores for AI products.
Featured*
