The Doctor (MyClaw)
fd6c8c403e
Bulk import from openclaw/skills official Archive (⭐3,600+).
Quality filter: SKILL.md 800B-30KB with proper YAML frontmatter.
Coverage areas:
- Crypto / Web3 / DeFi / Trading bots
- Feishu / DingTalk / Enterprise WeChat
- Business systems (freelance ops, performance eng, legal docs)
- Document templates / PPT design / OCR
- Email / CRM / Customer service
- Financial analytics / Stock trading
- AI tools / Agent collaboration / Model management
Frontend Slides
A skill for creating stunning, animation-rich HTML presentations - from scratch or by converting PowerPoint files. For Sales & Presales Teams: Ideal for creating solution decks, client presentations, and bid proposals.
What This Does
Frontend Slides helps non-designers create beautiful web presentations without knowing CSS or JavaScript. It uses a "show, don't tell" approach: instead of asking you to describe your aesthetic preferences in words, it generates visual previews and lets you pick what you like.
Key Features
- Zero Dependencies - Single HTML files with inline CSS/JS. No npm, no build tools, no frameworks.
- Visual Style Discovery - Can't articulate design preferences? No problem. Pick from generated visual previews.
- PPT Conversion - Convert existing PowerPoint files to web, preserving all images and content.
- Anti-AI-Slop - Curated distinctive styles that avoid generic AI aesthetics (bye-bye, purple gradients on white).
- Production Quality - Accessible, responsive, well-commented code you can customize.
Installation
For OpenClaw / ClawHub Users
If you use OpenClaw or ClawHub:
- CLI (if skill is on ClawHub):
clawhub install frontend-slides - Manual: Copy this repo (or
SKILL.md,STYLE_PRESETS.md, and thereference/folder) into your OpenClaw workspace skills directory, e.g../skills/frontend-slides/Then reload or restart the runtime.
For Cursor Users
Place the skill in your project or user skills directory so the agent can load it:
- Project skill:
.cursor/skills/frontend-slides/(copy this repo'sSKILL.mdandSTYLE_PRESETS.mdthere) - User skill: see Cursor docs for user-level skills path
Then trigger by describing what you need, e.g.: "Create a solution deck with the frontend-slides skill" or "Make a presales presentation".
For Claude Code Users
Copy the skill files to your Claude Code skills directory:
# Create the skill directory
mkdir -p ~/.claude/skills/frontend-slides
# Copy the files (or download from this repo)
cp SKILL.md ~/.claude/skills/frontend-slides/
cp STYLE_PRESETS.md ~/.claude/skills/frontend-slides/
Then use it by typing /frontend-slides in Claude Code.
Manual Download
- Download
SKILL.mdandSTYLE_PRESETS.mdfrom this repo - Place them in
~/.claude/skills/frontend-slides/(Claude Code) or.cursor/skills/frontend-slides/(Cursor) - Restart the app
Usage
Create a New Presentation
/frontend-slides
> "I want to create a pitch deck for my AI startup"
The skill will:
- Ask about your content (slides, messages, images)
- Ask about the feeling you want (impressed? excited? calm?)
- Generate 3 visual style previews for you to compare
- Create the full presentation in your chosen style
- Open it in your browser
Convert a PowerPoint
/frontend-slides
> "Convert my presentation.pptx to a web slideshow"
The skill will:
- Extract all text, images, and notes from your PPT
- Show you the extracted content for confirmation
- Let you pick a visual style
- Generate an HTML presentation with all your original assets
Included Styles
Dark Themes
- Neon Cyber - Futuristic, techy, particle effects
- Midnight Executive - Premium, corporate, trustworthy
- Deep Space - Cinematic, inspiring, vast
- Terminal Green - Developer-focused, hacker aesthetic
Light Themes
- Paper & Ink - Editorial, literary, refined
- Swiss Modern - Clean, Bauhaus-inspired, geometric
- Soft Pastel - Friendly, playful, creative
- Warm Editorial - Magazine-style, photographic
Specialty
- Brutalist - Raw, bold, attention-grabbing
- Gradient Wave - Modern SaaS aesthetic
Output Example
Each presentation is a single, self-contained HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Fonts, CSS variables, all styles inline -->
</head>
<body>
<section class="slide title-slide">
<h1 class="reveal">Your Title</h1>
</section>
<section class="slide">
<h2 class="reveal">Slide Content</h2>
</section>
<!-- Navigation: Arrow keys, scroll, swipe, or click dots -->
<script>
// SlidePresentation controller, animations, interactions
</script>
</body>
</html>
Features included:
- Keyboard navigation (arrows, space)
- Touch/swipe support
- Mouse wheel scrolling
- Progress bar
- Navigation dots
- Scroll-triggered animations
- Responsive design
- Reduced motion support
Philosophy
This skill was born from the belief that:
-
You don't need to be a designer to make beautiful things. You just need to react to what you see.
-
Dependencies are debt. A single HTML file will work in 10 years. A React project from 2019? Good luck.
-
Generic is forgettable. Every presentation should feel custom-crafted, not template-generated.
-
Comments are kindness. Code should explain itself to future-you (or anyone else who opens it).
Files
| File | Purpose |
|---|---|
SKILL.md |
Main skill instructions |
STYLE_PRESETS.md |
Curated visual styles reference |
reference/ |
Viewport CSS, image processing, PPT extraction, HTML architecture, edit button, animation patterns |
Requirements
- Claude Code CLI
- For PPT conversion: Python with
python-pptxlibrary
Credits
Created by @zarazhangrui with Claude Code.
Inspired by the "Vibe Coding" philosophy - building beautiful things without being a traditional software engineer.
License
MIT - Use it, modify it, share it.