frontend-slides

Name: frontend-slides
Author: nguyenphp

39stars12forks

How to install frontend-slides?

nguyenphp/antigravity-marketing/frontend-slides

$npx -y skills add nguyenphp/antigravity-marketing --skill frontend-slides

Installs into the current project.

Summary

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 exploratio

Files · 1

View on GitHub

SKILL.md

1	# Frontend Slides
2
3	Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
4
5	## Core Principles
6
7	1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
8	2. Show, Don't Tell — Generate visual previews, not abstract choices. People discover what they want by seeing it.
9	3. Distinctive Design — No generic "AI slop." Every presentation must feel custom-crafted.
10	4. Viewport Fitting (NON-NEGOTIABLE) — Every slide MUST fit exactly within 100vh. No scrolling within slides, ever. Content overflows? Split into multiple slides.
11
12	## Design Aesthetics
13
14	Avoid generic AI-generated aesthetics like overused font families (Inter, Roboto) or cliched color schemes (purple gradients on white). Focus on:
15	- Typography: beautiful, unique fonts (Google Fonts/Fontshare).
16	- Color & Theme: cohesive aesthetic with CSS variables and sharp accents.
17	- Motion: CSS-only animations for staggered reveals and high-impact transitions.
18	- Backgrounds: layered gradients, geometric patterns, or depth effects.
19
20	## Viewport Fitting Rules (Mandatory)
21
22	- Every `.slide` must have `height: 100vh; height: 100dvh; overflow: hidden;`
23	- ALL font sizes and spacing must use `clamp(min, preferred, max)`.
24	- Content containers need `max-height` constraints.
25	- Images: `max-height: min(50vh, 400px)`.
26	- Breakpoints required for heights: 700px, 600px, 500px.
27	- Include `prefers-reduced-motion` support.
28
29	Always read `viewport-base.css` and include its full contents in every presentation.
30
31	### Content Density Limits Per Slide
32
33	\| Slide Type \| Maximum Content \|
34	\|------------\|-----------------\|
35	\| Title slide \| 1 heading + 1 subtitle + optional tagline \|
36	\| Content slide \| 1 heading + 4-6 bullet points OR 1 heading + 2 paragraphs \|
37	\| Feature grid \| 1 heading + 6 cards maximum (2x3 or 3x2) \|
38	\| Code slide \| 1 heading + 8-10 lines of code \|
39	\| Quote slide \| 1 quote (max 3 lines) + attribution \|
40	\| Image slide \| 1 heading + 1 image (max 60vh height) \|
41
42	---
43
44	## Workflow Guide
45
46	### Phase 1: Content Discovery
47	- Ask the user about the Purpose, Length, and Content of the presentation.
48	- Inquire if they need Inline Editing (LocalStorage persistence).
49
50	### Phase 2: Style Selection
51	- Show 3 distinct style previews based on the desired "mood" (Confident, Energized, Focused, Inspired).
52	- Read `STYLE_PRESETS.md` for options.
53	- Save previews to a temporary folder and let the user pick.
54
55	### Phase 3: Generation
56	- Read `html-template.md`, `viewport-base.css`, and `animation-patterns.md`.
57	- Generate a self-contained HTML file with all CSS/JS inline.
58	- Include the full contents of `viewport-base.css`.
59
60	### Phase 4: PPT Conversion (requires python-pptx)
61	- Run `python3 .agent/skills/frontend-slides/scripts/extract-pptx.py <input.pptx> <output_dir>`.
62	- Extract text and images, then proceed to style selection.
63
64	### Phase 5: PPTX Export (requires python-pptx)
65	- Run `python3 .agent/skills/frontend-slides/scripts/export-pptx.py <input.html> <output.pptx>`.
66	- Converts the HTML slides back into a PowerPoint format for offline presentation and editing.
67
68	---
69
70	## Examples
71
72	\| Project \| Description \| Links \|
73	\|---------\|-------------\|-------\|
74	\| JupViec Automation \| Content marketing automation presentation for JupViec.vn. \| [HTML](examples/n8n-jupviec-automation.html), [PPTX](examples/n8n-jupviec-automation.pptx) \|
75
76	---
77
78	## Supporting Files
79
80	\| File \| Purpose \|
81	\|------\|---------\|
82	\| [STYLE_PRESETS.md](STYLE_PRESETS.md) \| 12 curated visual presets with colors, fonts, and signature elements \|
83	\| [viewport-base.css](viewport-base.css) \| Mandatory responsive CSS — copy into every presentation \|
84	\| [html-template.md](html-template.md) \| HTML structure, JS features, code quality standards \|
85	\| [animation-patterns.md](animation-patterns.md) \| CSS/JS animation snippets and effect-to-feeling guide \|
86	\| [scripts/extract-pptx.py](scripts/extract-pptx.py) \| Python script for PPT content extraction (to HTML) \|
87	\| [scripts/export-pptx.py](scripts/export-pptx.py) \| Python script for HTML to PPTX conversion \|

People who liked this also viewed

6 picks

Type

frontend-slides

39stars12forks

View on GitHub

How to install frontend-slides?

nguyenphp/antigravity-marketing/frontend-slides

$npx -y skills add nguyenphp/antigravity-marketing --skill frontend-slides

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Frontend Slides
2
3	Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
4
5	## Core Principles
6
7	1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
8	2. Show, Don't Tell — Generate visual previews, not abstract choices. People discover what they want by seeing it.
9	3. Distinctive Design — No generic "AI slop." Every presentation must feel custom-crafted.
10	4. Viewport Fitting (NON-NEGOTIABLE) — Every slide MUST fit exactly within 100vh. No scrolling within slides, ever. Content overflows? Split into multiple slides.
11
12	## Design Aesthetics
13
14	Avoid generic AI-generated aesthetics like overused font families (Inter, Roboto) or cliched color schemes (purple gradients on white). Focus on:
15	- Typography: beautiful, unique fonts (Google Fonts/Fontshare).
16	- Color & Theme: cohesive aesthetic with CSS variables and sharp accents.
17	- Motion: CSS-only animations for staggered reveals and high-impact transitions.
18	- Backgrounds: layered gradients, geometric patterns, or depth effects.
19
20	## Viewport Fitting Rules (Mandatory)
21
22	- Every `.slide` must have `height: 100vh; height: 100dvh; overflow: hidden;`
23	- ALL font sizes and spacing must use `clamp(min, preferred, max)`.
24	- Content containers need `max-height` constraints.
25	- Images: `max-height: min(50vh, 400px)`.
26	- Breakpoints required for heights: 700px, 600px, 500px.
27	- Include `prefers-reduced-motion` support.
28
29	Always read `viewport-base.css` and include its full contents in every presentation.
30
31	### Content Density Limits Per Slide
32
33	\| Slide Type \| Maximum Content \|
34	\|------------\|-----------------\|
35	\| Title slide \| 1 heading + 1 subtitle + optional tagline \|
36	\| Content slide \| 1 heading + 4-6 bullet points OR 1 heading + 2 paragraphs \|
37	\| Feature grid \| 1 heading + 6 cards maximum (2x3 or 3x2) \|
38	\| Code slide \| 1 heading + 8-10 lines of code \|
39	\| Quote slide \| 1 quote (max 3 lines) + attribution \|
40	\| Image slide \| 1 heading + 1 image (max 60vh height) \|
41
42	---
43
44	## Workflow Guide
45
46	### Phase 1: Content Discovery
47	- Ask the user about the Purpose, Length, and Content of the presentation.
48	- Inquire if they need Inline Editing (LocalStorage persistence).
49
50	### Phase 2: Style Selection
51	- Show 3 distinct style previews based on the desired "mood" (Confident, Energized, Focused, Inspired).
52	- Read `STYLE_PRESETS.md` for options.
53	- Save previews to a temporary folder and let the user pick.
54
55	### Phase 3: Generation
56	- Read `html-template.md`, `viewport-base.css`, and `animation-patterns.md`.
57	- Generate a self-contained HTML file with all CSS/JS inline.
58	- Include the full contents of `viewport-base.css`.
59
60	### Phase 4: PPT Conversion (requires python-pptx)
61	- Run `python3 .agent/skills/frontend-slides/scripts/extract-pptx.py <input.pptx> <output_dir>`.
62	- Extract text and images, then proceed to style selection.
63
64	### Phase 5: PPTX Export (requires python-pptx)
65	- Run `python3 .agent/skills/frontend-slides/scripts/export-pptx.py <input.html> <output.pptx>`.
66	- Converts the HTML slides back into a PowerPoint format for offline presentation and editing.
67
68	---
69
70	## Examples
71
72	\| Project \| Description \| Links \|
73	\|---------\|-------------\|-------\|
74	\| JupViec Automation \| Content marketing automation presentation for JupViec.vn. \| [HTML](examples/n8n-jupviec-automation.html), [PPTX](examples/n8n-jupviec-automation.pptx) \|
75
76	---
77
78	## Supporting Files
79
80	\| File \| Purpose \|
81	\|------\|---------\|
82	\| [STYLE_PRESETS.md](STYLE_PRESETS.md) \| 12 curated visual presets with colors, fonts, and signature elements \|
83	\| [viewport-base.css](viewport-base.css) \| Mandatory responsive CSS — copy into every presentation \|
84	\| [html-template.md](html-template.md) \| HTML structure, JS features, code quality standards \|
85	\| [animation-patterns.md](animation-patterns.md) \| CSS/JS animation snippets and effect-to-feeling guide \|
86	\| [scripts/extract-pptx.py](scripts/extract-pptx.py) \| Python script for PPT content extraction (to HTML) \|
87	\| [scripts/export-pptx.py](scripts/export-pptx.py) \| Python script for HTML to PPTX conversion \|

People who liked this also viewed

6 picks

Type