diff --git a/.cursor-plugin/marketplace.json b/.cursor-plugin/marketplace.json new file mode 100644 index 00000000..4f0ec18e --- /dev/null +++ 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 index 140c2639..29c55c69 100644 --- 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 index 9b8374bf..d2576161 100644 --- 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 new file mode 100644 index 00000000..bdd5cc73 --- /dev/null +++ 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 index 9b8374bf..d2576161 100644 --- 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.