Import frontend-slides skill

.plugin/marketplace.json

@@ -153,6 +153,21 @@
                 "css"
             ]
         },
+        {
+            "name": "frontend-slides",
+            "source": "./frontend-slides",
+            "description": "Create stunning, 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, or create slides for a talk/pitch.",
+            "category": "design",
+            "keywords": [
+                "slides",
+                "presentation",
+                "ppt",
+                "pptx",
+                "html",
+                "css",
+                "animation"
+            ]
+        },
         {
             "name": "github",
             "source": "./github",

skills/frontend-slides/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Zara Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

skills/frontend-slides/README.md

@@ -0,0 +1,178 @@
+# Frontend Slides
+
+An [Agent Skills](https://agentskills.io/) skill for creating stunning, animation-rich HTML presentations — from scratch or by converting PowerPoint files.
+
+This skill is published in the OpenHands extensions registry and can be used by OpenHands (CLI/GUI/Cloud) and other AgentSkills-compatible runtimes.
+
+## 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
+
+### OpenHands (CLI / Local GUI)
+
+This skill uses the AgentSkills directory format. The **directory name must be `frontend-slides/`** and it must contain `SKILL.md` (plus the `references/` folder).
+
+- **Repository-level (recommended):** `.agents/skills/frontend-slides/`
+- **User-level:** `~/.agents/skills/frontend-slides/`
+
+```bash
+# Repository-level
+mkdir -p .agents/skills
+cp -R frontend-slides .agents/skills/frontend-slides
+
+# User-level
+mkdir -p ~/.agents/skills
+cp -R frontend-slides ~/.agents/skills/frontend-slides
+```
+
+### OpenHands Software Agent SDK
+
+- To auto-load skills from the public registry (https://github.com/OpenHands/extensions):
+
+```python
+from openhands.sdk import AgentContext
+
+agent_context = AgentContext(load_public_skills=True)
+```
+
+- To load this skill from a local directory (for example, `.agents/skills/`):
+
+```python
+from openhands.sdk import AgentContext
+from openhands.sdk.context.skills import load_skills_from_dir
+
+_, _, agent_skills = load_skills_from_dir(".agents/skills")
+agent_context = AgentContext(skills=list(agent_skills.values()))
+```
+
+References: https://docs.openhands.dev/overview/skills and https://docs.openhands.dev/sdk/guides/skill
+
+## Usage
+
+### Create a New Presentation
+
+```
+Create a pitch deck for my AI startup.
+
+Use the frontend-slides skill.
+```
+
+The skill will:
+1. Ask about your content (slides, messages, images)
+2. Ask about the feeling you want (impressed? excited? calm?)
+3. Generate 3 visual style previews for you to compare
+4. Create the full presentation in your chosen style
+5. Open it in your browser
+
+### Convert a PowerPoint
+
+```
+Convert my presentation.pptx to a web slideshow (HTML). Preserve text, images, and speaker notes.
+
+Use the frontend-slides skill.
+```
+
+The skill will:
+1. Extract all text, images, and notes from your PPT
+2. Show you the extracted content for confirmation
+3. Let you pick a visual style
+4. 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:
+
+```html
+<!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:
+
+1. **You don't need to be a designer to make beautiful things.** You just need to react to what you see.
+
+2. **Dependencies are debt.** A single HTML file will work in 10 years. A React project from 2019? Good luck.
+
+3. **Generic is forgettable.** Every presentation should feel custom-crafted, not template-generated.
+
+4. **Comments are kindness.** Code should explain itself to future-you (or anyone else who opens it).
+
+## Files
+
+| File | Purpose |
+|------|---------|
+| `SKILL.md` | Skill definition (AgentSkills format) |
+| `references/STYLE_PRESETS.md` | Reference file with curated visual styles |
+
+## Requirements
+
+- OpenHands (CLI/GUI/Cloud) or the OpenHands Software Agent SDK (AgentSkills-compatible runtime)
+- For PPT conversion: Python with `python-pptx` library
+
+## Credits
+
+Originally created by [@zarazhangrui](https://github.com/zarazhangrui).
+
+Inspired by the "Vibe Coding" philosophy — building beautiful things without being a traditional software engineer.
+
+## License
+
+MIT — Use it, modify it, share it.

skills/frontend-slides/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: frontend-slides
+description: Create stunning, 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, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
+license: MIT (see LICENSE.txt)
+compatibility: For PPT/PPTX conversion requires Python and the python-pptx package.
+---
+
+# Frontend Slides Skill
+
+Create **zero-dependency**, animation-rich HTML presentations that run entirely in the browser.
+
+## Non-negotiables
+
+- **Single-file output:** generate a self-contained `.html` with inline CSS/JS (no npm, no build tools).
+- **Distinctive design:** avoid generic, templated “AI slop” aesthetics.
+- **Viewport fitting (CRITICAL):** every slide must fit exactly in the viewport; **no scrolling within slides**.
+  - Details + mandatory base CSS: see [references/VIEWPORT_FITTING.md](references/VIEWPORT_FITTING.md).
+
+## How to use (choose a mode)
+
+1. **New presentation** (from scratch)
+   - Use the structured workflow in [references/WORKFLOW.md](references/WORKFLOW.md).
+   - Use the style index in [references/STYLE_PRESETS.md](references/STYLE_PRESETS.md) and load the chosen preset from `references/presets/`.
+
+2. **PPT/PPTX conversion**
+   - Extract content + images with the workflow in [references/PPT_CONVERSION.md](references/PPT_CONVERSION.md).
+
+3. **Enhance an existing HTML presentation**
+   - Read the existing HTML/CSS/JS, preserve the content structure, then apply the same constraints:
+     - viewport fitting
+     - accessibility
+     - performance
+     - distinctive visuals
+
+## Design + animation references
+
+- Effect → feeling mapping: [references/STYLE_EFFECT_MAPPING.md](references/STYLE_EFFECT_MAPPING.md)
+- Animation patterns (CSS/JS snippets): [references/ANIMATION_PATTERNS.md](references/ANIMATION_PATTERNS.md)
+
+## Troubleshooting
+
+See [references/TROUBLESHOOTING.md](references/TROUBLESHOOTING.md).

skills/frontend-slides/references/ANIMATION_PATTERNS.md

@@ -0,0 +1,98 @@
+## Animation Patterns Reference
+
+### Entrance Animations
+
+```css
+/* Fade + Slide Up (most common) */
+.reveal {
+    opacity: 0;
+    transform: translateY(30px);
+    transition: opacity 0.6s var(--ease-out-expo),
+                transform 0.6s var(--ease-out-expo);
+}
+
+.visible .reveal {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Scale In */
+.reveal-scale {
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
+}
+
+/* Slide from Left */
+.reveal-left {
+    opacity: 0;
+    transform: translateX(-50px);
+    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
+}
+
+/* Blur In */
+.reveal-blur {
+    opacity: 0;
+    filter: blur(10px);
+    transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);
+}
+```
+
+### Background Effects
+
+```css
+/* Gradient Mesh */
+.gradient-bg {
+    background:
+        radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
+        var(--bg-primary);
+}
+
+/* Noise Texture */
+.noise-bg {
+    background-image: url("data:image/svg+xml,..."); /* Inline SVG noise */
+}
+
+/* Grid Pattern */
+.grid-bg {
+    background-image:
+        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+    background-size: 50px 50px;
+}
+```
+
+### Interactive Effects
+
+```javascript
+/* 3D Tilt on Hover */
+class TiltEffect {
+    constructor(element) {
+        this.element = element;
+        this.element.style.transformStyle = 'preserve-3d';
+        this.element.style.perspective = '1000px';
+        this.bindEvents();
+    }
+
+    bindEvents() {
+        this.element.addEventListener('mousemove', (e) => {
+            const rect = this.element.getBoundingClientRect();
+            const x = (e.clientX - rect.left) / rect.width - 0.5;
+            const y = (e.clientY - rect.top) / rect.height - 0.5;
+
+            this.element.style.transform = `
+                rotateY(${x * 10}deg)
+                rotateX(${-y * 10}deg)
+            `;
+        });
+
+        this.element.addEventListener('mouseleave', () => {
+            this.element.style.transform = 'rotateY(0) rotateX(0)';
+        });
+    }
+}
+```
+
+---
+