zarazhangrui · shubgaur · Jun 11, 2026
diff --git a/.cursor-plugin/marketplace.json b/.cursor-plugin/marketplace.json
@@ -0,0 +1,18 @@
+{
+  "name": "frontend-slides",
+  "owner": {
+    "name": "zarazhangrui",
+    "url": "https://github.com/zarazhangrui"
+  },
+  "metadata": {
+    "description": "Create beautiful HTML presentations using Cursor's agent workflow.",
+    "version": "2.1.0"
+  },
+  "plugins": [
+    {
+      "name": "frontend-slides",
+      "source": "./plugins/frontend-slides",
+      "description": "Zero-dependency HTML presentation generator with visual style discovery, PPT conversion, and anti-AI-slop design guidance."
+    }
+  ]
+}
diff --git a/README.md b/README.md
@@ -21,6 +21,42 @@ https://github.com/user-attachments/assets/ef57333e-f879-432a-afb9-180388982478
 
 ## Installation
 
+### Cursor Local Plugin
+
+For local testing in Cursor, symlink the Cursor plugin package into your local plugins folder:
+
+```bash
+mkdir -p ~/.cursor/plugins/local
+ln -s /path/to/frontend-slides/plugins/frontend-slides ~/.cursor/plugins/local/frontend-slides
+```
+
+Restart Cursor, or run `Developer: Reload Window`, then use it by typing:
+
+```text
+/frontend-slides
+```
+
+The Cursor plugin keeps the skill and all support files together: style presets, fixed-stage CSS, HTML templates, animation patterns, bold templates, and export/deploy scripts.
+
+### Cursor Manual Skill Installation
+
+If you only want the skill without plugin packaging, copy the skill directory into Cursor:
+
+```bash
+mkdir -p ~/.cursor/skills/frontend-slides
+cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.cursor/skills/frontend-slides/
+cp -R bold-template-pack ~/.cursor/skills/frontend-slides/
+cp -R scripts ~/.cursor/skills/frontend-slides/
+```
+
+Then invoke it in Cursor with:
+
+```text
+/frontend-slides
+```
+
+Once the Cursor version works well for you, share it with the community at https://cursor.directory/plugins/new so other Cursor users can install and build on it.
+
 ### Via Claude Code Custom Marketplace Source
 
 Install directly from this public GitHub repo. Run these as two separate Claude Code messages; do not paste both lines into the prompt at once.
@@ -92,6 +128,8 @@ The Claude Code plugin gives Claude Code a custom marketplace-source install flo
 > "I want to create a pitch deck for my AI startup"
 ```
 
+In Cursor, use `/frontend-slides` instead.
+
 If installed manually as a standalone Claude Code skill, use `/frontend-slides` instead.
 
 In non-Claude agents, ask the agent to use the Frontend Slides skill and point it at this repo or `SKILL.md`.
@@ -112,6 +150,8 @@ The skill will:
 > "Convert my presentation.pptx to a web slideshow"
 ```
 
+In Cursor, use `/frontend-slides` with the same prompt.
+
 The skill will:
 
 1. Extract all text, images, and notes from your PPT

diff --git a/SKILL.md b/SKILL.md
@@ -1,6 +1,6 @@
 ---
 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.
+description: Create stunning, animation-rich HTML presentations, web slides, pitch decks, talks, teaching decks, and browser-based slideshows from scratch or by converting PowerPoint PPT/PPTX files. Use when the user wants to build, design, improve, export, deploy, or convert slides, decks, presentations, HTML slides, or a web slideshow. Helps non-designers discover their aesthetic through visual previews rather than abstract choices.
 ---
 
 # Frontend Slides
@@ -15,6 +15,18 @@ Create zero-dependency, animation-rich HTML presentations that run entirely in t
 4. **Progressive Disclosure** — Read lightweight style indexes first. For bold templates, use small preview cards for style previews and load the full `design.md` only after the user picks that template.
 5. **Fixed 16:9 Stage (NON-NEGOTIABLE)** — Every deck uses a 1920×1080 slide canvas scaled as a whole to the viewport. Slides must stay 16:9 on every screen, including phones. Do not reflow slide content to fit the device.
 
+## Cursor Workflow Notes
+
+When running in Cursor, treat this as a first-class Cursor skill:
+
+- Invoke as `/frontend-slides`.
+- Use Cursor's structured question UI when available for Phase 1 and style selection, so the user can answer all choices cleanly in one pass.
+- Use the workspace as the source of truth. Inspect existing HTML, image folders, `.pptx` files, and generated preview folders before modifying a deck.
+- Use Cursor's browser or screenshot tools when available to visually verify previews and final slides. Fixed-stage fitting issues are visual; do not rely only on DOM height checks.
+- Keep generated decks and temporary previews in the user's workspace, and tell the user exact file paths in the final response.
+- Resolve support files relative to the active skill directory. In a Cursor plugin install, read files beside `plugins/frontend-slides/skills/frontend-slides/SKILL.md`; in a personal skill install, read files beside `~/.cursor/skills/frontend-slides/SKILL.md`; in the repo root, read the root copies.
+- If the user wants to share this skill itself with other Cursor users, point them to `https://cursor.directory/plugins/new` after they have tested it locally.
+
 ## Design Aesthetics
 
 You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
@@ -51,6 +63,25 @@ These invariants apply to EVERY slide in EVERY presentation:
 
 **When generating, read `viewport-base.css` and include its full contents in every presentation.**
 
+### Cursor Visual Verification Loop
+
+When Cursor browser or screenshot tools are available, verify every preview set and final deck visually:
+
+1. Open each preview or final deck in the browser.
+2. Check a desktop viewport, preferably 1280×720 or larger.
+3. Check one constrained/mobile viewport to confirm the fixed 16:9 stage scales instead of reflowing.
+4. Inspect for clipped text, overlapping panels, broken images, missing fonts, unexpected scrollbars, hidden controls, and content outside the stage.
+5. Check keyboard navigation, touch/click controls, visible focus states, and `prefers-reduced-motion` behavior when the deck is interactive.
+6. Mention the exact files and viewports checked in the final response.
+
+Accessibility checks:
+
+- Text is readable at presentation distance and at the checked viewport sizes.
+- Body text, labels, controls, and key graphics have sufficient contrast.
+- Interactive controls are keyboard reachable and have visible focus states.
+- Motion has a reduced-motion path.
+- Critical meaning is not conveyed only through color, hover, or animation.
+
 ### Content Density Modes
 
 Ask the user whether this is primarily a reading deck or a speaking deck, then design around that answer:
@@ -267,6 +298,7 @@ When converting PowerPoint files:
    - Navigation: Arrow keys, Space, swipe/tap if enabled
    - How to customize: `:root` CSS variables for colors, font link for typography, `.reveal` class for animations
    - Inline text editing is available: Hover top-left corner or press E to enter edit mode, click any text to edit, Ctrl+S to save
+   - Visual verification performed: files opened, viewports checked, and any known limitations
    - Offer the natural post-draft actions: ask for revisions, edit text directly in the browser, or export/share
 
 ---
@@ -366,6 +398,15 @@ This captures each slide as a screenshot and combines them into a PDF. Perfect f
 
 ## Supporting Files
 
+Read support files from the active skill package:
+
+- Cursor plugin install: `plugins/frontend-slides/skills/frontend-slides/`
+- Cursor personal skill install: `~/.cursor/skills/frontend-slides/`
+- Claude Code skill install: `~/.claude/skills/frontend-slides/`
+- Repository checkout: the repo root files are the canonical source for manual browsing
+
+Keep the root `SKILL.md` and `plugins/frontend-slides/skills/frontend-slides/SKILL.md` synchronized when editing this repo.
+
 | File                                               | Purpose                                                              | When to Read              |
 | -------------------------------------------------- | -------------------------------------------------------------------- | ------------------------- |
 | [STYLE_PRESETS.md](STYLE_PRESETS.md)               | 12 curated visual presets with colors, fonts, and signature elements | Phase 2 (style selection) |
@@ -378,3 +419,14 @@ This captures each slide as a screenshot and combines them into a PDF. Perfect f
 | [scripts/extract-pptx.py](scripts/extract-pptx.py) | Python script for PPT content extraction                             | Phase 4 (conversion)      |
 | [scripts/deploy.sh](scripts/deploy.sh)             | Deploy slides to Vercel for instant sharing                          | Phase 6 (sharing)         |
 | [scripts/export-pdf.sh](scripts/export-pdf.sh)     | Export slides to PDF                                                 | Phase 6 (sharing)         |
+
+## Fixture Prompts
+
+Use these to regression-test the skill after meaningful changes:
+
+1. **New pitch deck:** "Create a 10-slide seed pitch deck for an AI customer-support startup. I only have rough notes and want something bold but credible."
+2. **PPT conversion:** "Convert `quarterly-review.pptx` into a web slideshow, preserve images and speaker notes, then export a PDF."
+3. **Existing deck enhancement:** "Improve this existing HTML deck. Add three slides with screenshots, keep the current visual system, and make sure nothing overflows."
+4. **High-density reading deck:** "Turn this product spec into a reading-first internal presentation with detailed comparison slides and tables."
+
+For each fixture, verify that intake is structured, support files are loaded progressively, output remains fixed-stage 16:9, screenshots pass visual checks, and the final response includes file path, slide count, selected style, validation performed, and next actions.
diff --git a/plugins/frontend-slides/.cursor-plugin/plugin.json b/plugins/frontend-slides/.cursor-plugin/plugin.json
@@ -0,0 +1,22 @@
+{
+  "name": "frontend-slides",
+  "displayName": "Frontend Slides",
+  "version": "2.1.0",
+  "description": "Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.",
+  "author": {
+    "name": "zarazhangrui",
+    "url": "https://github.com/zarazhangrui"
+  },
+  "homepage": "https://github.com/zarazhangrui/frontend-slides",
+  "repository": "https://github.com/zarazhangrui/frontend-slides",
+  "license": "MIT",
+  "keywords": [
+    "presentations",
+    "slides",
+    "html",
+    "design",
+    "powerpoint",
+    "animations",
+    "templates"
+  ]
+}
diff --git a/plugins/frontend-slides/skills/frontend-slides/SKILL.md b/plugins/frontend-slides/skills/frontend-slides/SKILL.md
@@ -1,6 +1,6 @@
 ---
 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.
+description: Create stunning, animation-rich HTML presentations, web slides, pitch decks, talks, teaching decks, and browser-based slideshows from scratch or by converting PowerPoint PPT/PPTX files. Use when the user wants to build, design, improve, export, deploy, or convert slides, decks, presentations, HTML slides, or a web slideshow. Helps non-designers discover their aesthetic through visual previews rather than abstract choices.
 ---
 
 # Frontend Slides
@@ -15,6 +15,18 @@ Create zero-dependency, animation-rich HTML presentations that run entirely in t
 4. **Progressive Disclosure** — Read lightweight style indexes first. For bold templates, use small preview cards for style previews and load the full `design.md` only after the user picks that template.
 5. **Fixed 16:9 Stage (NON-NEGOTIABLE)** — Every deck uses a 1920×1080 slide canvas scaled as a whole to the viewport. Slides must stay 16:9 on every screen, including phones. Do not reflow slide content to fit the device.
 
+## Cursor Workflow Notes
+
+When running in Cursor, treat this as a first-class Cursor skill:
+
+- Invoke as `/frontend-slides`.
+- Use Cursor's structured question UI when available for Phase 1 and style selection, so the user can answer all choices cleanly in one pass.
+- Use the workspace as the source of truth. Inspect existing HTML, image folders, `.pptx` files, and generated preview folders before modifying a deck.
+- Use Cursor's browser or screenshot tools when available to visually verify previews and final slides. Fixed-stage fitting issues are visual; do not rely only on DOM height checks.
+- Keep generated decks and temporary previews in the user's workspace, and tell the user exact file paths in the final response.
+- Resolve support files relative to the active skill directory. In a Cursor plugin install, read files beside `plugins/frontend-slides/skills/frontend-slides/SKILL.md`; in a personal skill install, read files beside `~/.cursor/skills/frontend-slides/SKILL.md`; in the repo root, read the root copies.
+- If the user wants to share this skill itself with other Cursor users, point them to `https://cursor.directory/plugins/new` after they have tested it locally.
+
 ## Design Aesthetics
 
 You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
@@ -51,6 +63,25 @@ These invariants apply to EVERY slide in EVERY presentation:
 
 **When generating, read `viewport-base.css` and include its full contents in every presentation.**
 
+### Cursor Visual Verification Loop
+
+When Cursor browser or screenshot tools are available, verify every preview set and final deck visually:
+
+1. Open each preview or final deck in the browser.
+2. Check a desktop viewport, preferably 1280×720 or larger.
+3. Check one constrained/mobile viewport to confirm the fixed 16:9 stage scales instead of reflowing.
+4. Inspect for clipped text, overlapping panels, broken images, missing fonts, unexpected scrollbars, hidden controls, and content outside the stage.
+5. Check keyboard navigation, touch/click controls, visible focus states, and `prefers-reduced-motion` behavior when the deck is interactive.
+6. Mention the exact files and viewports checked in the final response.
+
+Accessibility checks:
+
+- Text is readable at presentation distance and at the checked viewport sizes.
+- Body text, labels, controls, and key graphics have sufficient contrast.
+- Interactive controls are keyboard reachable and have visible focus states.
+- Motion has a reduced-motion path.
+- Critical meaning is not conveyed only through color, hover, or animation.
+
 ### Content Density Modes
 
 Ask the user whether this is primarily a reading deck or a speaking deck, then design around that answer:
@@ -267,6 +298,7 @@ When converting PowerPoint files:
    - Navigation: Arrow keys, Space, swipe/tap if enabled
    - How to customize: `:root` CSS variables for colors, font link for typography, `.reveal` class for animations
    - Inline text editing is available: Hover top-left corner or press E to enter edit mode, click any text to edit, Ctrl+S to save
+   - Visual verification performed: files opened, viewports checked, and any known limitations
    - Offer the natural post-draft actions: ask for revisions, edit text directly in the browser, or export/share
 
 ---
@@ -366,6 +398,15 @@ This captures each slide as a screenshot and combines them into a PDF. Perfect f
 
 ## Supporting Files
 
+Read support files from the active skill package:
+
+- Cursor plugin install: `plugins/frontend-slides/skills/frontend-slides/`
+- Cursor personal skill install: `~/.cursor/skills/frontend-slides/`
+- Claude Code skill install: `~/.claude/skills/frontend-slides/`
+- Repository checkout: the repo root files are the canonical source for manual browsing
+
+Keep the root `SKILL.md` and `plugins/frontend-slides/skills/frontend-slides/SKILL.md` synchronized when editing this repo.
+
 | File                                               | Purpose                                                              | When to Read              |
 | -------------------------------------------------- | -------------------------------------------------------------------- | ------------------------- |
 | [STYLE_PRESETS.md](STYLE_PRESETS.md)               | 12 curated visual presets with colors, fonts, and signature elements | Phase 2 (style selection) |
@@ -378,3 +419,14 @@ This captures each slide as a screenshot and combines them into a PDF. Perfect f
 | [scripts/extract-pptx.py](scripts/extract-pptx.py) | Python script for PPT content extraction                             | Phase 4 (conversion)      |
 | [scripts/deploy.sh](scripts/deploy.sh)             | Deploy slides to Vercel for instant sharing                          | Phase 6 (sharing)         |
 | [scripts/export-pdf.sh](scripts/export-pdf.sh)     | Export slides to PDF                                                 | Phase 6 (sharing)         |
+
+## Fixture Prompts
+
+Use these to regression-test the skill after meaningful changes:
+
+1. **New pitch deck:** "Create a 10-slide seed pitch deck for an AI customer-support startup. I only have rough notes and want something bold but credible."
+2. **PPT conversion:** "Convert `quarterly-review.pptx` into a web slideshow, preserve images and speaker notes, then export a PDF."
+3. **Existing deck enhancement:** "Improve this existing HTML deck. Add three slides with screenshots, keep the current visual system, and make sure nothing overflows."
+4. **High-density reading deck:** "Turn this product spec into a reading-first internal presentation with detailed comparison slides and tables."
+
+For each fixture, verify that intake is structured, support files are loaded progressively, output remains fixed-stage 16:9, screenshots pass visual checks, and the final response includes file path, slide count, selected style, validation performed, and next actions.