frontend-slides

Name: frontend-slides
Author: MoizIbnYousaf

27stars5forks

How to install frontend-slides?

moizibnyousaf/marketing-cli/frontend-slides

$npx -y skills add MoizIbnYousaf/marketing-cli --skill frontend-slides

Installs into the current project.

Summary

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Zero dependencies — single HTML files with inline CSS/JS. Use when the user wants a presentation, pitch deck, conference talk slides, HTML slideshow, slide deck, investor deck, demo

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	## Reads
6
7	- `brand/creative-kit.md` — Brand colors, fonts, logo paths
8	- `brand/voice-profile.md` — Copy tone for slide text
9
10	## On Activation
11
12	1. Read `brand/creative-kit.md` for brand colors and fonts. If found, use them as defaults in Phase 2 style selection — suggest presets that complement the brand palette, or offer a "Brand Custom" option that uses their exact colors/fonts.
13	2. Read `brand/voice-profile.md` for copy tone. If found, use it to guide slide copy style (formal vs. conversational vs. bold) throughout Phases 1 and 3.
14	3. If brand/ files don't exist, proceed normally. The skill works at zero context.
15
16	## Core Principles
17
18	1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
19	2. Show, Don't Tell — Generate visual previews, not abstract choices. People discover what they want by seeing it.
20	3. Distinctive Design — No generic "AI slop." Every presentation must feel custom-crafted.
21	4. Viewport Fitting — Every slide fits exactly within 100vh. No scrolling within slides, ever. Content overflows? Split into multiple slides. This is non-negotiable because a single scrolling slide breaks the entire navigation and pacing of the presentation.
22
23	## Design Aesthetics
24
25	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.
26
27	Focus on:
28	- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
29	- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
30	- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
31	- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.
32
33	Avoid generic AI-generated aesthetics:
34	- Overused font families (Inter, Roboto, Arial, system fonts)
35	- Cliched color schemes (particularly purple gradients on white backgrounds)
36	- Predictable layouts and component patterns
37	- Cookie-cutter design that lacks context-specific character
38
39	Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
40
41	## Viewport Fitting Rules
42
43	These invariants apply to EVERY slide in EVERY presentation:
44
45	- Every `.slide` must have `height: 100vh; height: 100dvh; overflow: hidden;`
46	- ALL font sizes and spacing must use `clamp(min, preferred, max)` — never fixed px/rem
47	- Content containers need `max-height` constraints
48	- Images: `max-height: min(50vh, 400px)`
49	- Breakpoints required for heights: 700px, 600px, 500px
50	- Include `prefers-reduced-motion` support
51	- Never negate CSS functions directly (`-clamp()`, `-min()`, `-max()` are silently ignored) — use `calc(-1 * clamp(...))` instead
52
53	When generating, read `viewport-base.css` and include its full contents in every presentation.
54
55	### Content Density Limits Per Slide
56
57	\| Slide Type \| Maximum Content \|
58	\|------------\|-----------------\|
59	\| Title slide \| 1 heading + 1 subtitle + optional tagline \|
60	\| Content slide \| 1 heading + 4-6 bullet points OR 1 heading + 2 paragraphs \|
61	\| Feature grid \| 1 heading + 6 cards maximum (2x3 or 3x2) \|
62	\| Code slide \| 1 heading + 8-10 lines of code \|
63	\| Quote slide \| 1 quote (max 3 lines) + attribution \|
64	\| Image slide \| 1 heading + 1 image (max 60vh height) \|
65
66	**Content exceed

People who liked this also viewed

6 picks

Type

frontend-slides

27stars5forks

View on GitHub

How to install frontend-slides?

moizibnyousaf/marketing-cli/frontend-slides

$npx -y skills add MoizIbnYousaf/marketing-cli --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	## Reads
6
7	- `brand/creative-kit.md` — Brand colors, fonts, logo paths
8	- `brand/voice-profile.md` — Copy tone for slide text
9
10	## On Activation
11
12	1. Read `brand/creative-kit.md` for brand colors and fonts. If found, use them as defaults in Phase 2 style selection — suggest presets that complement the brand palette, or offer a "Brand Custom" option that uses their exact colors/fonts.
13	2. Read `brand/voice-profile.md` for copy tone. If found, use it to guide slide copy style (formal vs. conversational vs. bold) throughout Phases 1 and 3.
14	3. If brand/ files don't exist, proceed normally. The skill works at zero context.
15
16	## Core Principles
17
18	1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
19	2. Show, Don't Tell — Generate visual previews, not abstract choices. People discover what they want by seeing it.
20	3. Distinctive Design — No generic "AI slop." Every presentation must feel custom-crafted.
21	4. Viewport Fitting — Every slide fits exactly within 100vh. No scrolling within slides, ever. Content overflows? Split into multiple slides. This is non-negotiable because a single scrolling slide breaks the entire navigation and pacing of the presentation.
22
23	## Design Aesthetics
24
25	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.
26
27	Focus on:
28	- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
29	- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
30	- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
31	- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.
32
33	Avoid generic AI-generated aesthetics:
34	- Overused font families (Inter, Roboto, Arial, system fonts)
35	- Cliched color schemes (particularly purple gradients on white backgrounds)
36	- Predictable layouts and component patterns
37	- Cookie-cutter design that lacks context-specific character
38
39	Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
40
41	## Viewport Fitting Rules
42
43	These invariants apply to EVERY slide in EVERY presentation:
44
45	- Every `.slide` must have `height: 100vh; height: 100dvh; overflow: hidden;`
46	- ALL font sizes and spacing must use `clamp(min, preferred, max)` — never fixed px/rem
47	- Content containers need `max-height` constraints
48	- Images: `max-height: min(50vh, 400px)`
49	- Breakpoints required for heights: 700px, 600px, 500px
50	- Include `prefers-reduced-motion` support
51	- Never negate CSS functions directly (`-clamp()`, `-min()`, `-max()` are silently ignored) — use `calc(-1 * clamp(...))` instead
52
53	When generating, read `viewport-base.css` and include its full contents in every presentation.
54
55	### Content Density Limits Per Slide
56
57	\| Slide Type \| Maximum Content \|
58	\|------------\|-----------------\|
59	\| Title slide \| 1 heading + 1 subtitle + optional tagline \|
60	\| Content slide \| 1 heading + 4-6 bullet points OR 1 heading + 2 paragraphs \|
61	\| Feature grid \| 1 heading + 6 cards maximum (2x3 or 3x2) \|
62	\| Code slide \| 1 heading + 8-10 lines of code \|
63	\| Quote slide \| 1 quote (max 3 lines) + attribution \|
64	\| Image slide \| 1 heading + 1 image (max 60vh height) \|
65
66	**Content exceed

People who liked this also viewed

6 picks

Type