From 87fc2d5089b9b9591220e6cdce6fcfd8fdac96b0 Mon Sep 17 00:00:00 2001 From: Affaan Mustafa Date: Fri, 27 Feb 2026 05:39:31 -0800 Subject: [PATCH] Add frontend slides skill across platforms --- .agents/skills/frontend-slides/SKILL.md | 184 ++++++++++ .../skills/frontend-slides/STYLE_PRESETS.md | 330 ++++++++++++++++++ .../skills/frontend-slides/agents/openai.yaml | 7 + .codex/AGENTS.md | 1 + .cursor/skills/frontend-slides/SKILL.md | 184 ++++++++++ .../skills/frontend-slides/STYLE_PRESETS.md | 330 ++++++++++++++++++ .opencode/README.md | 12 +- .opencode/opencode.json | 1 + README.md | 11 +- package.json | 8 +- skills/configure-ecc/SKILL.md | 3 +- skills/continuous-learning-v2/SKILL.md | 2 + skills/frontend-slides/SKILL.md | 184 ++++++++++ skills/frontend-slides/STYLE_PRESETS.md | 330 ++++++++++++++++++ 14 files changed, 1572 insertions(+), 15 deletions(-) create mode 100644 .agents/skills/frontend-slides/SKILL.md create mode 100644 .agents/skills/frontend-slides/STYLE_PRESETS.md create mode 100644 .agents/skills/frontend-slides/agents/openai.yaml create mode 100644 .cursor/skills/frontend-slides/SKILL.md create mode 100644 .cursor/skills/frontend-slides/STYLE_PRESETS.md create mode 100644 skills/frontend-slides/SKILL.md create mode 100644 skills/frontend-slides/STYLE_PRESETS.md diff --git a/.agents/skills/frontend-slides/SKILL.md b/.agents/skills/frontend-slides/SKILL.md new file mode 100644 index 00000000..3d41eb4f --- /dev/null +++ b/.agents/skills/frontend-slides/SKILL.md @@ -0,0 +1,184 @@ +--- +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. +origin: ECC +--- + +# Frontend Slides + +Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. + +Inspired by the visual exploration approach showcased in work by [zarazhangrui](https://github.com/zarazhangrui). + +## When to Activate + +- Creating a talk deck, pitch deck, workshop deck, or internal presentation +- Converting `.ppt` or `.pptx` slides into an HTML presentation +- Improving an existing HTML presentation's layout, motion, or typography +- Exploring presentation styles with a user who does not know their design preference yet + +## Non-Negotiables + +1. **Zero dependencies**: default to one self-contained HTML file with inline CSS and JS. +2. **Viewport fit is mandatory**: every slide must fit inside one viewport with no internal scrolling. +3. **Show, don't tell**: use visual previews instead of abstract style questionnaires. +4. **Distinctive design**: avoid generic purple-gradient, Inter-on-white, template-looking decks. +5. **Production quality**: keep code commented, accessible, responsive, and performant. + +Before generating, read `STYLE_PRESETS.md` for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas. + +## Workflow + +### 1. Detect Mode + +Choose one path: +- **New presentation**: user has a topic, notes, or full draft +- **PPT conversion**: user has `.ppt` or `.pptx` +- **Enhancement**: user already has HTML slides and wants improvements + +### 2. Discover Content + +Ask only the minimum needed: +- purpose: pitch, teaching, conference talk, internal update +- length: short (5-10), medium (10-20), long (20+) +- content state: finished copy, rough notes, topic only + +If the user has content, ask them to paste it before styling. + +### 3. Discover Style + +Default to visual exploration. + +If the user already knows the desired preset, skip previews and use it directly. + +Otherwise: +1. Ask what feeling the deck should create: impressed, energized, focused, inspired. +2. Generate **3 single-slide preview files** in `.ecc-design/slide-previews/`. +3. Each preview must be self-contained, show typography/color/motion clearly, and stay under roughly 100 lines of slide content. +4. Ask the user which preview to keep or what elements to mix. + +Use the preset guide in `STYLE_PRESETS.md` when mapping mood to style. + +### 4. Build the Presentation + +Output either: +- `presentation.html` +- `[presentation-name].html` + +Use an `assets/` folder only when the deck contains extracted or user-supplied images. + +Required structure: +- semantic slide sections +- a viewport-safe CSS base from `STYLE_PRESETS.md` +- CSS custom properties for theme values +- a presentation controller class for keyboard, wheel, and touch navigation +- Intersection Observer for reveal animations +- reduced-motion support + +### 5. Enforce Viewport Fit + +Treat this as a hard gate. + +Rules: +- every `.slide` must use `height: 100vh; height: 100dvh; overflow: hidden;` +- all type and spacing must scale with `clamp()` +- when content does not fit, split into multiple slides +- never solve overflow by shrinking text below readable sizes +- never allow scrollbars inside a slide + +Use the density limits and mandatory CSS block in `STYLE_PRESETS.md`. + +### 6. Validate + +Check the finished deck at these sizes: +- 1920x1080 +- 1280x720 +- 768x1024 +- 375x667 +- 667x375 + +If browser automation is available, use it to verify no slide overflows and that keyboard navigation works. + +### 7. Deliver + +At handoff: +- delete temporary preview files unless the user wants to keep them +- open the deck with the platform-appropriate opener when useful +- summarize file path, preset used, slide count, and easy theme customization points + +Use the correct opener for the current OS: +- macOS: `open file.html` +- Linux: `xdg-open file.html` +- Windows: `start "" file.html` + +## PPT / PPTX Conversion + +For PowerPoint conversion: +1. Prefer `python3` with `python-pptx` to extract text, images, and notes. +2. If `python-pptx` is unavailable, ask whether to install it or fall back to a manual/export-based workflow. +3. Preserve slide order, speaker notes, and extracted assets. +4. After extraction, run the same style-selection workflow as a new presentation. + +Keep conversion cross-platform. Do not rely on macOS-only tools when Python can do the job. + +## Implementation Requirements + +### HTML / CSS + +- Use inline CSS and JS unless the user explicitly wants a multi-file project. +- Fonts may come from Google Fonts or Fontshare. +- Prefer atmospheric backgrounds, strong type hierarchy, and a clear visual direction. +- Use abstract shapes, gradients, grids, noise, and geometry rather than illustrations. + +### JavaScript + +Include: +- keyboard navigation +- touch / swipe navigation +- mouse wheel navigation +- progress indicator or slide index +- reveal-on-enter animation triggers + +### Accessibility + +- use semantic structure (`main`, `section`, `nav`) +- keep contrast readable +- support keyboard-only navigation +- respect `prefers-reduced-motion` + +## Content Density Limits + +Use these maxima unless the user explicitly asks for denser slides and readability still holds: + +| Slide type | Limit | +|------------|-------| +| Title | 1 heading + 1 subtitle + optional tagline | +| Content | 1 heading + 4-6 bullets or 2 short paragraphs | +| Feature grid | 6 cards max | +| Code | 8-10 lines max | +| Quote | 1 quote + attribution | +| Image | 1 image constrained by viewport | + +## Anti-Patterns + +- generic startup gradients with no visual identity +- system-font decks unless intentionally editorial +- long bullet walls +- code blocks that need scrolling +- fixed-height content boxes that break on short screens +- invalid negated CSS functions like `-clamp(...)` + +## Related ECC Skills + +- `frontend-patterns` for component and interaction patterns around the deck +- `liquid-glass-design` when a presentation intentionally borrows Apple glass aesthetics +- `e2e-testing` if you need automated browser verification for the final deck + +## Deliverable Checklist + +- presentation runs from a local file in a browser +- every slide fits the viewport without scrolling +- style is distinctive and intentional +- animation is meaningful, not noisy +- reduced motion is respected +- file paths and customization points are explained at handoff diff --git a/.agents/skills/frontend-slides/STYLE_PRESETS.md b/.agents/skills/frontend-slides/STYLE_PRESETS.md new file mode 100644 index 00000000..0f0d0498 --- /dev/null +++ b/.agents/skills/frontend-slides/STYLE_PRESETS.md @@ -0,0 +1,330 @@ +# Style Presets Reference + +Curated visual styles for `frontend-slides`. + +Use this file for: +- the mandatory viewport-fitting CSS base +- preset selection and mood mapping +- CSS gotchas and validation rules + +Abstract shapes only. Avoid illustrations unless the user explicitly asks for them. + +## Viewport Fit Is Non-Negotiable + +Every slide must fully fit in one viewport. + +### Golden Rule + +```text +Each slide = exactly one viewport height. +Too much content = split into more slides. +Never scroll inside a slide. +``` + +### Density Limits + +| Slide Type | Maximum Content | +|------------|-----------------| +| Title slide | 1 heading + 1 subtitle + optional tagline | +| Content slide | 1 heading + 4-6 bullets or 2 paragraphs | +| Feature grid | 6 cards maximum | +| Code slide | 8-10 lines maximum | +| Quote slide | 1 quote + attribution | +| Image slide | 1 image, ideally under 60vh | + +## Mandatory Base CSS + +Copy this block into every generated presentation and then theme on top of it. + +```css +/* =========================================== + VIEWPORT FITTING: MANDATORY BASE STYLES + =========================================== */ + +html, body { + height: 100%; + overflow-x: hidden; +} + +html { + scroll-snap-type: y mandatory; + scroll-behavior: smooth; +} + +.slide { + width: 100vw; + height: 100vh; + height: 100dvh; + overflow: hidden; + scroll-snap-align: start; + display: flex; + flex-direction: column; + position: relative; +} + +.slide-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + max-height: 100%; + overflow: hidden; + padding: var(--slide-padding); +} + +:root { + --title-size: clamp(1.5rem, 5vw, 4rem); + --h2-size: clamp(1.25rem, 3.5vw, 2.5rem); + --h3-size: clamp(1rem, 2.5vw, 1.75rem); + --body-size: clamp(0.75rem, 1.5vw, 1.125rem); + --small-size: clamp(0.65rem, 1vw, 0.875rem); + + --slide-padding: clamp(1rem, 4vw, 4rem); + --content-gap: clamp(0.5rem, 2vw, 2rem); + --element-gap: clamp(0.25rem, 1vw, 1rem); +} + +.card, .container, .content-box { + max-width: min(90vw, 1000px); + max-height: min(80vh, 700px); +} + +.feature-list, .bullet-list { + gap: clamp(0.4rem, 1vh, 1rem); +} + +.feature-list li, .bullet-list li { + font-size: var(--body-size); + line-height: 1.4; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); + gap: clamp(0.5rem, 1.5vw, 1rem); +} + +img, .image-container { + max-width: 100%; + max-height: min(50vh, 400px); + object-fit: contain; +} + +@media (max-height: 700px) { + :root { + --slide-padding: clamp(0.75rem, 3vw, 2rem); + --content-gap: clamp(0.4rem, 1.5vw, 1rem); + --title-size: clamp(1.25rem, 4.5vw, 2.5rem); + --h2-size: clamp(1rem, 3vw, 1.75rem); + } +} + +@media (max-height: 600px) { + :root { + --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem); + --content-gap: clamp(0.3rem, 1vw, 0.75rem); + --title-size: clamp(1.1rem, 4vw, 2rem); + --body-size: clamp(0.7rem, 1.2vw, 0.95rem); + } + + .nav-dots, .keyboard-hint, .decorative { + display: none; + } +} + +@media (max-height: 500px) { + :root { + --slide-padding: clamp(0.4rem, 2vw, 1rem); + --title-size: clamp(1rem, 3.5vw, 1.5rem); + --h2-size: clamp(0.9rem, 2.5vw, 1.25rem); + --body-size: clamp(0.65rem, 1vw, 0.85rem); + } +} + +@media (max-width: 600px) { + :root { + --title-size: clamp(1.25rem, 7vw, 2.5rem); + } + + .grid { + grid-template-columns: 1fr; + } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.2s !important; + } + + html { + scroll-behavior: auto; + } +} +``` + +## Viewport Checklist + +- every `.slide` has `height: 100vh`, `height: 100dvh`, and `overflow: hidden` +- all typography uses `clamp()` +- all spacing uses `clamp()` or viewport units +- images have `max-height` constraints +- grids adapt with `auto-fit` + `minmax()` +- short-height breakpoints exist at `700px`, `600px`, and `500px` +- if anything feels cramped, split the slide + +## Mood to Preset Mapping + +| Mood | Good Presets | +|------|--------------| +| Impressed / Confident | Bold Signal, Electric Studio, Dark Botanical | +| Excited / Energized | Creative Voltage, Neon Cyber, Split Pastel | +| Calm / Focused | Notebook Tabs, Paper & Ink, Swiss Modern | +| Inspired / Moved | Dark Botanical, Vintage Editorial, Pastel Geometry | + +## Preset Catalog + +### 1. Bold Signal + +- Vibe: confident, high-impact, keynote-ready +- Best for: pitch decks, launches, statements +- Fonts: Archivo Black + Space Grotesk +- Palette: charcoal base, hot orange focal card, crisp white text +- Signature: oversized section numbers, high-contrast card on dark field + +### 2. Electric Studio + +- Vibe: clean, bold, agency-polished +- Best for: client presentations, strategic reviews +- Fonts: Manrope only +- Palette: black, white, saturated cobalt accent +- Signature: two-panel split and sharp editorial alignment + +### 3. Creative Voltage + +- Vibe: energetic, retro-modern, playful confidence +- Best for: creative studios, brand work, product storytelling +- Fonts: Syne + Space Mono +- Palette: electric blue, neon yellow, deep navy +- Signature: halftone textures, badges, punchy contrast + +### 4. Dark Botanical + +- Vibe: elegant, premium, atmospheric +- Best for: luxury brands, thoughtful narratives, premium product decks +- Fonts: Cormorant + IBM Plex Sans +- Palette: near-black, warm ivory, blush, gold, terracotta +- Signature: blurred abstract circles, fine rules, restrained motion + +### 5. Notebook Tabs + +- Vibe: editorial, organized, tactile +- Best for: reports, reviews, structured storytelling +- Fonts: Bodoni Moda + DM Sans +- Palette: cream paper on charcoal with pastel tabs +- Signature: paper sheet, colored side tabs, binder details + +### 6. Pastel Geometry + +- Vibe: approachable, modern, friendly +- Best for: product overviews, onboarding, lighter brand decks +- Fonts: Plus Jakarta Sans only +- Palette: pale blue field, cream card, soft pink/mint/lavender accents +- Signature: vertical pills, rounded cards, soft shadows + +### 7. Split Pastel + +- Vibe: playful, modern, creative +- Best for: agency intros, workshops, portfolios +- Fonts: Outfit only +- Palette: peach + lavender split with mint badges +- Signature: split backdrop, rounded tags, light grid overlays + +### 8. Vintage Editorial + +- Vibe: witty, personality-driven, magazine-inspired +- Best for: personal brands, opinionated talks, storytelling +- Fonts: Fraunces + Work Sans +- Palette: cream, charcoal, dusty warm accents +- Signature: geometric accents, bordered callouts, punchy serif headlines + +### 9. Neon Cyber + +- Vibe: futuristic, techy, kinetic +- Best for: AI, infra, dev tools, future-of-X talks +- Fonts: Clash Display + Satoshi +- Palette: midnight navy, cyan, magenta +- Signature: glow, particles, grids, data-radar energy + +### 10. Terminal Green + +- Vibe: developer-focused, hacker-clean +- Best for: APIs, CLI tools, engineering demos +- Fonts: JetBrains Mono only +- Palette: GitHub dark + terminal green +- Signature: scan lines, command-line framing, precise monospace rhythm + +### 11. Swiss Modern + +- Vibe: minimal, precise, data-forward +- Best for: corporate, product strategy, analytics +- Fonts: Archivo + Nunito +- Palette: white, black, signal red +- Signature: visible grids, asymmetry, geometric discipline + +### 12. Paper & Ink + +- Vibe: literary, thoughtful, story-driven +- Best for: essays, keynote narratives, manifesto decks +- Fonts: Cormorant Garamond + Source Serif 4 +- Palette: warm cream, charcoal, crimson accent +- Signature: pull quotes, drop caps, elegant rules + +## Direct Selection Prompts + +If the user already knows the style they want, let them pick directly from the preset names above instead of forcing preview generation. + +## Animation Feel Mapping + +| Feeling | Motion Direction | +|---------|------------------| +| Dramatic / Cinematic | slow fades, parallax, large scale-ins | +| Techy / Futuristic | glow, particles, grid motion, scramble text | +| Playful / Friendly | springy easing, rounded shapes, floating motion | +| Professional / Corporate | subtle 200-300ms transitions, clean slides | +| Calm / Minimal | very restrained movement, whitespace-first | +| Editorial / Magazine | strong hierarchy, staggered text and image interplay | + +## CSS Gotcha: Negating Functions + +Never write these: + +```css +right: -clamp(28px, 3.5vw, 44px); +margin-left: -min(10vw, 100px); +``` + +Browsers ignore them silently. + +Always write this instead: + +```css +right: calc(-1 * clamp(28px, 3.5vw, 44px)); +margin-left: calc(-1 * min(10vw, 100px)); +``` + +## Validation Sizes + +Test at minimum: +- Desktop: `1920x1080`, `1440x900`, `1280x720` +- Tablet: `1024x768`, `768x1024` +- Mobile: `375x667`, `414x896` +- Landscape phone: `667x375`, `896x414` + +## Anti-Patterns + +Do not use: +- purple-on-white startup templates +- Inter / Roboto / Arial as the visual voice unless the user explicitly wants utilitarian neutrality +- bullet walls, tiny type, or code blocks that require scrolling +- decorative illustrations when abstract geometry would do the job better diff --git a/.agents/skills/frontend-slides/agents/openai.yaml b/.agents/skills/frontend-slides/agents/openai.yaml new file mode 100644 index 00000000..9c23da90 --- /dev/null +++ b/.agents/skills/frontend-slides/agents/openai.yaml @@ -0,0 +1,7 @@ +interface: + display_name: "Frontend Slides" + short_description: "Create distinctive HTML slide decks and convert PPTX to web" + brand_color: "#FF6B3D" + default_prompt: "Create a viewport-safe HTML presentation with strong visual direction" +policy: + allow_implicit_invocation: true diff --git a/.codex/AGENTS.md b/.codex/AGENTS.md index 97fdd57a..45edba3b 100644 --- a/.codex/AGENTS.md +++ b/.codex/AGENTS.md @@ -22,6 +22,7 @@ Available skills: - security-review — Comprehensive security checklist - coding-standards — Universal coding standards - frontend-patterns — React/Next.js patterns +- frontend-slides — Viewport-safe HTML presentations and PPTX-to-web conversion - backend-patterns — API design, database, caching - e2e-testing — Playwright E2E tests - eval-harness — Eval-driven development diff --git a/.cursor/skills/frontend-slides/SKILL.md b/.cursor/skills/frontend-slides/SKILL.md new file mode 100644 index 00000000..3d41eb4f --- /dev/null +++ b/.cursor/skills/frontend-slides/SKILL.md @@ -0,0 +1,184 @@ +--- +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. +origin: ECC +--- + +# Frontend Slides + +Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. + +Inspired by the visual exploration approach showcased in work by [zarazhangrui](https://github.com/zarazhangrui). + +## When to Activate + +- Creating a talk deck, pitch deck, workshop deck, or internal presentation +- Converting `.ppt` or `.pptx` slides into an HTML presentation +- Improving an existing HTML presentation's layout, motion, or typography +- Exploring presentation styles with a user who does not know their design preference yet + +## Non-Negotiables + +1. **Zero dependencies**: default to one self-contained HTML file with inline CSS and JS. +2. **Viewport fit is mandatory**: every slide must fit inside one viewport with no internal scrolling. +3. **Show, don't tell**: use visual previews instead of abstract style questionnaires. +4. **Distinctive design**: avoid generic purple-gradient, Inter-on-white, template-looking decks. +5. **Production quality**: keep code commented, accessible, responsive, and performant. + +Before generating, read `STYLE_PRESETS.md` for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas. + +## Workflow + +### 1. Detect Mode + +Choose one path: +- **New presentation**: user has a topic, notes, or full draft +- **PPT conversion**: user has `.ppt` or `.pptx` +- **Enhancement**: user already has HTML slides and wants improvements + +### 2. Discover Content + +Ask only the minimum needed: +- purpose: pitch, teaching, conference talk, internal update +- length: short (5-10), medium (10-20), long (20+) +- content state: finished copy, rough notes, topic only + +If the user has content, ask them to paste it before styling. + +### 3. Discover Style + +Default to visual exploration. + +If the user already knows the desired preset, skip previews and use it directly. + +Otherwise: +1. Ask what feeling the deck should create: impressed, energized, focused, inspired. +2. Generate **3 single-slide preview files** in `.ecc-design/slide-previews/`. +3. Each preview must be self-contained, show typography/color/motion clearly, and stay under roughly 100 lines of slide content. +4. Ask the user which preview to keep or what elements to mix. + +Use the preset guide in `STYLE_PRESETS.md` when mapping mood to style. + +### 4. Build the Presentation + +Output either: +- `presentation.html` +- `[presentation-name].html` + +Use an `assets/` folder only when the deck contains extracted or user-supplied images. + +Required structure: +- semantic slide sections +- a viewport-safe CSS base from `STYLE_PRESETS.md` +- CSS custom properties for theme values +- a presentation controller class for keyboard, wheel, and touch navigation +- Intersection Observer for reveal animations +- reduced-motion support + +### 5. Enforce Viewport Fit + +Treat this as a hard gate. + +Rules: +- every `.slide` must use `height: 100vh; height: 100dvh; overflow: hidden;` +- all type and spacing must scale with `clamp()` +- when content does not fit, split into multiple slides +- never solve overflow by shrinking text below readable sizes +- never allow scrollbars inside a slide + +Use the density limits and mandatory CSS block in `STYLE_PRESETS.md`. + +### 6. Validate + +Check the finished deck at these sizes: +- 1920x1080 +- 1280x720 +- 768x1024 +- 375x667 +- 667x375 + +If browser automation is available, use it to verify no slide overflows and that keyboard navigation works. + +### 7. Deliver + +At handoff: +- delete temporary preview files unless the user wants to keep them +- open the deck with the platform-appropriate opener when useful +- summarize file path, preset used, slide count, and easy theme customization points + +Use the correct opener for the current OS: +- macOS: `open file.html` +- Linux: `xdg-open file.html` +- Windows: `start "" file.html` + +## PPT / PPTX Conversion + +For PowerPoint conversion: +1. Prefer `python3` with `python-pptx` to extract text, images, and notes. +2. If `python-pptx` is unavailable, ask whether to install it or fall back to a manual/export-based workflow. +3. Preserve slide order, speaker notes, and extracted assets. +4. After extraction, run the same style-selection workflow as a new presentation. + +Keep conversion cross-platform. Do not rely on macOS-only tools when Python can do the job. + +## Implementation Requirements + +### HTML / CSS + +- Use inline CSS and JS unless the user explicitly wants a multi-file project. +- Fonts may come from Google Fonts or Fontshare. +- Prefer atmospheric backgrounds, strong type hierarchy, and a clear visual direction. +- Use abstract shapes, gradients, grids, noise, and geometry rather than illustrations. + +### JavaScript + +Include: +- keyboard navigation +- touch / swipe navigation +- mouse wheel navigation +- progress indicator or slide index +- reveal-on-enter animation triggers + +### Accessibility + +- use semantic structure (`main`, `section`, `nav`) +- keep contrast readable +- support keyboard-only navigation +- respect `prefers-reduced-motion` + +## Content Density Limits + +Use these maxima unless the user explicitly asks for denser slides and readability still holds: + +| Slide type | Limit | +|------------|-------| +| Title | 1 heading + 1 subtitle + optional tagline | +| Content | 1 heading + 4-6 bullets or 2 short paragraphs | +| Feature grid | 6 cards max | +| Code | 8-10 lines max | +| Quote | 1 quote + attribution | +| Image | 1 image constrained by viewport | + +## Anti-Patterns + +- generic startup gradients with no visual identity +- system-font decks unless intentionally editorial +- long bullet walls +- code blocks that need scrolling +- fixed-height content boxes that break on short screens +- invalid negated CSS functions like `-clamp(...)` + +## Related ECC Skills + +- `frontend-patterns` for component and interaction patterns around the deck +- `liquid-glass-design` when a presentation intentionally borrows Apple glass aesthetics +- `e2e-testing` if you need automated browser verification for the final deck + +## Deliverable Checklist + +- presentation runs from a local file in a browser +- every slide fits the viewport without scrolling +- style is distinctive and intentional +- animation is meaningful, not noisy +- reduced motion is respected +- file paths and customization points are explained at handoff diff --git a/.cursor/skills/frontend-slides/STYLE_PRESETS.md b/.cursor/skills/frontend-slides/STYLE_PRESETS.md new file mode 100644 index 00000000..0f0d0498 --- /dev/null +++ b/.cursor/skills/frontend-slides/STYLE_PRESETS.md @@ -0,0 +1,330 @@ +# Style Presets Reference + +Curated visual styles for `frontend-slides`. + +Use this file for: +- the mandatory viewport-fitting CSS base +- preset selection and mood mapping +- CSS gotchas and validation rules + +Abstract shapes only. Avoid illustrations unless the user explicitly asks for them. + +## Viewport Fit Is Non-Negotiable + +Every slide must fully fit in one viewport. + +### Golden Rule + +```text +Each slide = exactly one viewport height. +Too much content = split into more slides. +Never scroll inside a slide. +``` + +### Density Limits + +| Slide Type | Maximum Content | +|------------|-----------------| +| Title slide | 1 heading + 1 subtitle + optional tagline | +| Content slide | 1 heading + 4-6 bullets or 2 paragraphs | +| Feature grid | 6 cards maximum | +| Code slide | 8-10 lines maximum | +| Quote slide | 1 quote + attribution | +| Image slide | 1 image, ideally under 60vh | + +## Mandatory Base CSS + +Copy this block into every generated presentation and then theme on top of it. + +```css +/* =========================================== + VIEWPORT FITTING: MANDATORY BASE STYLES + =========================================== */ + +html, body { + height: 100%; + overflow-x: hidden; +} + +html { + scroll-snap-type: y mandatory; + scroll-behavior: smooth; +} + +.slide { + width: 100vw; + height: 100vh; + height: 100dvh; + overflow: hidden; + scroll-snap-align: start; + display: flex; + flex-direction: column; + position: relative; +} + +.slide-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + max-height: 100%; + overflow: hidden; + padding: var(--slide-padding); +} + +:root { + --title-size: clamp(1.5rem, 5vw, 4rem); + --h2-size: clamp(1.25rem, 3.5vw, 2.5rem); + --h3-size: clamp(1rem, 2.5vw, 1.75rem); + --body-size: clamp(0.75rem, 1.5vw, 1.125rem); + --small-size: clamp(0.65rem, 1vw, 0.875rem); + + --slide-padding: clamp(1rem, 4vw, 4rem); + --content-gap: clamp(0.5rem, 2vw, 2rem); + --element-gap: clamp(0.25rem, 1vw, 1rem); +} + +.card, .container, .content-box { + max-width: min(90vw, 1000px); + max-height: min(80vh, 700px); +} + +.feature-list, .bullet-list { + gap: clamp(0.4rem, 1vh, 1rem); +} + +.feature-list li, .bullet-list li { + font-size: var(--body-size); + line-height: 1.4; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); + gap: clamp(0.5rem, 1.5vw, 1rem); +} + +img, .image-container { + max-width: 100%; + max-height: min(50vh, 400px); + object-fit: contain; +} + +@media (max-height: 700px) { + :root { + --slide-padding: clamp(0.75rem, 3vw, 2rem); + --content-gap: clamp(0.4rem, 1.5vw, 1rem); + --title-size: clamp(1.25rem, 4.5vw, 2.5rem); + --h2-size: clamp(1rem, 3vw, 1.75rem); + } +} + +@media (max-height: 600px) { + :root { + --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem); + --content-gap: clamp(0.3rem, 1vw, 0.75rem); + --title-size: clamp(1.1rem, 4vw, 2rem); + --body-size: clamp(0.7rem, 1.2vw, 0.95rem); + } + + .nav-dots, .keyboard-hint, .decorative { + display: none; + } +} + +@media (max-height: 500px) { + :root { + --slide-padding: clamp(0.4rem, 2vw, 1rem); + --title-size: clamp(1rem, 3.5vw, 1.5rem); + --h2-size: clamp(0.9rem, 2.5vw, 1.25rem); + --body-size: clamp(0.65rem, 1vw, 0.85rem); + } +} + +@media (max-width: 600px) { + :root { + --title-size: clamp(1.25rem, 7vw, 2.5rem); + } + + .grid { + grid-template-columns: 1fr; + } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.2s !important; + } + + html { + scroll-behavior: auto; + } +} +``` + +## Viewport Checklist + +- every `.slide` has `height: 100vh`, `height: 100dvh`, and `overflow: hidden` +- all typography uses `clamp()` +- all spacing uses `clamp()` or viewport units +- images have `max-height` constraints +- grids adapt with `auto-fit` + `minmax()` +- short-height breakpoints exist at `700px`, `600px`, and `500px` +- if anything feels cramped, split the slide + +## Mood to Preset Mapping + +| Mood | Good Presets | +|------|--------------| +| Impressed / Confident | Bold Signal, Electric Studio, Dark Botanical | +| Excited / Energized | Creative Voltage, Neon Cyber, Split Pastel | +| Calm / Focused | Notebook Tabs, Paper & Ink, Swiss Modern | +| Inspired / Moved | Dark Botanical, Vintage Editorial, Pastel Geometry | + +## Preset Catalog + +### 1. Bold Signal + +- Vibe: confident, high-impact, keynote-ready +- Best for: pitch decks, launches, statements +- Fonts: Archivo Black + Space Grotesk +- Palette: charcoal base, hot orange focal card, crisp white text +- Signature: oversized section numbers, high-contrast card on dark field + +### 2. Electric Studio + +- Vibe: clean, bold, agency-polished +- Best for: client presentations, strategic reviews +- Fonts: Manrope only +- Palette: black, white, saturated cobalt accent +- Signature: two-panel split and sharp editorial alignment + +### 3. Creative Voltage + +- Vibe: energetic, retro-modern, playful confidence +- Best for: creative studios, brand work, product storytelling +- Fonts: Syne + Space Mono +- Palette: electric blue, neon yellow, deep navy +- Signature: halftone textures, badges, punchy contrast + +### 4. Dark Botanical + +- Vibe: elegant, premium, atmospheric +- Best for: luxury brands, thoughtful narratives, premium product decks +- Fonts: Cormorant + IBM Plex Sans +- Palette: near-black, warm ivory, blush, gold, terracotta +- Signature: blurred abstract circles, fine rules, restrained motion + +### 5. Notebook Tabs + +- Vibe: editorial, organized, tactile +- Best for: reports, reviews, structured storytelling +- Fonts: Bodoni Moda + DM Sans +- Palette: cream paper on charcoal with pastel tabs +- Signature: paper sheet, colored side tabs, binder details + +### 6. Pastel Geometry + +- Vibe: approachable, modern, friendly +- Best for: product overviews, onboarding, lighter brand decks +- Fonts: Plus Jakarta Sans only +- Palette: pale blue field, cream card, soft pink/mint/lavender accents +- Signature: vertical pills, rounded cards, soft shadows + +### 7. Split Pastel + +- Vibe: playful, modern, creative +- Best for: agency intros, workshops, portfolios +- Fonts: Outfit only +- Palette: peach + lavender split with mint badges +- Signature: split backdrop, rounded tags, light grid overlays + +### 8. Vintage Editorial + +- Vibe: witty, personality-driven, magazine-inspired +- Best for: personal brands, opinionated talks, storytelling +- Fonts: Fraunces + Work Sans +- Palette: cream, charcoal, dusty warm accents +- Signature: geometric accents, bordered callouts, punchy serif headlines + +### 9. Neon Cyber + +- Vibe: futuristic, techy, kinetic +- Best for: AI, infra, dev tools, future-of-X talks +- Fonts: Clash Display + Satoshi +- Palette: midnight navy, cyan, magenta +- Signature: glow, particles, grids, data-radar energy + +### 10. Terminal Green + +- Vibe: developer-focused, hacker-clean +- Best for: APIs, CLI tools, engineering demos +- Fonts: JetBrains Mono only +- Palette: GitHub dark + terminal green +- Signature: scan lines, command-line framing, precise monospace rhythm + +### 11. Swiss Modern + +- Vibe: minimal, precise, data-forward +- Best for: corporate, product strategy, analytics +- Fonts: Archivo + Nunito +- Palette: white, black, signal red +- Signature: visible grids, asymmetry, geometric discipline + +### 12. Paper & Ink + +- Vibe: literary, thoughtful, story-driven +- Best for: essays, keynote narratives, manifesto decks +- Fonts: Cormorant Garamond + Source Serif 4 +- Palette: warm cream, charcoal, crimson accent +- Signature: pull quotes, drop caps, elegant rules + +## Direct Selection Prompts + +If the user already knows the style they want, let them pick directly from the preset names above instead of forcing preview generation. + +## Animation Feel Mapping + +| Feeling | Motion Direction | +|---------|------------------| +| Dramatic / Cinematic | slow fades, parallax, large scale-ins | +| Techy / Futuristic | glow, particles, grid motion, scramble text | +| Playful / Friendly | springy easing, rounded shapes, floating motion | +| Professional / Corporate | subtle 200-300ms transitions, clean slides | +| Calm / Minimal | very restrained movement, whitespace-first | +| Editorial / Magazine | strong hierarchy, staggered text and image interplay | + +## CSS Gotcha: Negating Functions + +Never write these: + +```css +right: -clamp(28px, 3.5vw, 44px); +margin-left: -min(10vw, 100px); +``` + +Browsers ignore them silently. + +Always write this instead: + +```css +right: calc(-1 * clamp(28px, 3.5vw, 44px)); +margin-left: calc(-1 * min(10vw, 100px)); +``` + +## Validation Sizes + +Test at minimum: +- Desktop: `1920x1080`, `1440x900`, `1280x720` +- Tablet: `1024x768`, `768x1024` +- Mobile: `375x667`, `414x896` +- Landscape phone: `667x375`, `896x414` + +## Anti-Patterns + +Do not use: +- purple-on-white startup templates +- Inter / Roboto / Arial as the visual voice unless the user explicitly wants utilitarian neutrality +- bullet walls, tiny type, or code blocks that require scrolling +- decorative illustrations when abstract geometry would do the job better diff --git a/.opencode/README.md b/.opencode/README.md index 2e8db292..26d00704 100644 --- a/.opencode/README.md +++ b/.opencode/README.md @@ -130,23 +130,19 @@ OpenCode has 20+ additional events not available in Claude Code. ## Skills -All 16 ECC skills are available via the `instructions` array: +The default OpenCode config loads 11 curated ECC skills via the `instructions` array: - coding-standards - backend-patterns - frontend-patterns +- frontend-slides - security-review - tdd-workflow -- continuous-learning -- continuous-learning-v2 -- iterative-retrieval - strategic-compact - eval-harness - verification-loop -- golang-patterns -- golang-testing -- clickhouse-io -- pmx-guidelines +- api-design +- e2e-testing ## Configuration diff --git a/.opencode/opencode.json b/.opencode/opencode.json index 42cb5112..97a6d120 100644 --- a/.opencode/opencode.json +++ b/.opencode/opencode.json @@ -11,6 +11,7 @@ "skills/security-review/SKILL.md", "skills/coding-standards/SKILL.md", "skills/frontend-patterns/SKILL.md", + "skills/frontend-slides/SKILL.md", "skills/backend-patterns/SKILL.md", "skills/e2e-testing/SKILL.md", "skills/verification-loop/SKILL.md", diff --git a/README.md b/README.md index e5024e27..57b67b77 100644 --- a/README.md +++ b/README.md @@ -126,7 +126,6 @@ Get up and running in under 2 minutes: > ⚠️ **Important:** Claude Code plugins cannot distribute `rules` automatically. Install them manually: - ```bash # Clone the repo first git clone https://github.com/affaan-m/everything-claude-code.git @@ -155,7 +154,7 @@ For manual install instructions see the README in the `rules/` folder. /plugin list everything-claude-code@everything-claude-code ``` -✨ **That's it!** You now have access to 13 agents, 48 skills, and 32 commands. +✨ **That's it!** You now have access to 13 agents, 51 skills, and 32 commands. --- @@ -224,6 +223,7 @@ everything-claude-code/ | |-- clickhouse-io/ # ClickHouse analytics, queries, data engineering | |-- backend-patterns/ # API, database, caching patterns | |-- frontend-patterns/ # React, Next.js patterns +| |-- frontend-slides/ # HTML slide decks and PPTX-to-web presentation workflows (NEW) | |-- continuous-learning/ # Auto-extract patterns from sessions (Longform Guide) | |-- continuous-learning-v2/ # Instinct-based learning with confidence scoring | |-- iterative-retrieval/ # Progressive context refinement for subagents @@ -796,7 +796,7 @@ ECC provides **full Cursor IDE support** with hooks, rules, agents, skills, comm | Hook Scripts | 16 | Thin Node.js scripts delegating to `scripts/hooks/` via shared adapter | | Rules | 29 | 9 common (alwaysApply) + 20 language-specific (TypeScript, Python, Go, Swift) | | Agents | Shared | Via AGENTS.md at root (read by Cursor natively) | -| Skills | Shared | Via AGENTS.md at root | +| Skills | Shared + Bundled | Via AGENTS.md at root and `.cursor/skills/` for translated additions | | Commands | Shared | `.cursor/commands/` if installed | | MCP Config | Shared | `.cursor/mcp.json` if installed | @@ -832,7 +832,7 @@ alwaysApply: false ## Codex CLI Support -ECC provides **first-class Codex CLI support** with a reference configuration, Codex-specific AGENTS.md supplement, and 10 ported skills. +ECC provides **first-class Codex CLI support** with a reference configuration, Codex-specific AGENTS.md supplement, and 11 ported skills. ### Quick Start (Codex) @@ -850,7 +850,7 @@ codex |-----------|-------|---------| | Config | 1 | `.codex/config.toml` — model, permissions, MCP servers, persistent instructions | | AGENTS.md | 2 | Root (universal) + `.codex/AGENTS.md` (Codex-specific supplement) | -| Skills | 10 | `.agents/skills/` — SKILL.md + agents/openai.yaml per skill | +| Skills | 11 | `.agents/skills/` — SKILL.md + agents/openai.yaml per skill | | MCP Servers | 4 | GitHub, Context7, Memory, Sequential Thinking (command-based) | | Profiles | 2 | `strict` (read-only sandbox) and `yolo` (full auto-approve) | @@ -864,6 +864,7 @@ Skills at `.agents/skills/` are auto-loaded by Codex: | security-review | Comprehensive security checklist | | coding-standards | Universal coding standards | | frontend-patterns | React/Next.js patterns | +| frontend-slides | HTML presentations, PPTX conversion, visual style exploration | | backend-patterns | API design, database, caching | | e2e-testing | Playwright E2E tests | | eval-harness | Eval-driven development | diff --git a/package.json b/package.json index 5a9f1535..6a0fc98b 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,10 @@ "best-practices", "cursor", "cursor-ide", - "opencode" + "opencode", + "codex", + "presentations", + "slides" ], "author": { "name": "Affaan Mustafa", @@ -35,6 +38,8 @@ "url": "https://github.com/affaan-m/everything-claude-code/issues" }, "files": [ + ".agents/", + ".codex/", ".cursor/", ".opencode/commands/", ".opencode/instructions/", @@ -65,6 +70,7 @@ "scripts/setup-package-manager.js", "scripts/skill-create-output.js", "skills/", + "AGENTS.md", ".claude-plugin/plugin.json", ".claude-plugin/README.md", "install.sh", diff --git a/skills/configure-ecc/SKILL.md b/skills/configure-ecc/SKILL.md index e7ece650..3971b3a9 100644 --- a/skills/configure-ecc/SKILL.md +++ b/skills/configure-ecc/SKILL.md @@ -81,7 +81,7 @@ Options: For each selected category, print the full list of skills below and ask the user to confirm or deselect specific ones. If the list exceeds 4 items, print the list as text and use `AskUserQuestion` with an "Install all listed" option plus "Other" for the user to paste specific names. -**Category: Framework & Language (16 skills)** +**Category: Framework & Language (17 skills)** | Skill | Description | |-------|-------------| @@ -92,6 +92,7 @@ For each selected category, print the full list of skills below and ask the user | `django-tdd` | Django testing with pytest-django, factory_boy, mocking, coverage | | `django-verification` | Django verification loop: migrations, linting, tests, security scans | | `frontend-patterns` | React, Next.js, state management, performance, UI patterns | +| `frontend-slides` | Zero-dependency HTML presentations, style previews, and PPTX-to-web conversion | | `golang-patterns` | Idiomatic Go patterns, conventions for robust Go applications | | `golang-testing` | Go testing: table-driven tests, subtests, benchmarks, fuzzing | | `java-coding-standards` | Java coding standards for Spring Boot: naming, immutability, Optional, streams | diff --git a/skills/continuous-learning-v2/SKILL.md b/skills/continuous-learning-v2/SKILL.md index 09597a04..8e256386 100644 --- a/skills/continuous-learning-v2/SKILL.md +++ b/skills/continuous-learning-v2/SKILL.md @@ -9,6 +9,8 @@ version: 2.0.0 An advanced learning system that turns your Claude Code sessions into reusable knowledge through atomic "instincts" - small learned behaviors with confidence scoring. +Inspired in part by the Homunculus work from [humanplane](https://github.com/humanplane). + ## When to Activate - Setting up automatic learning from Claude Code sessions diff --git a/skills/frontend-slides/SKILL.md b/skills/frontend-slides/SKILL.md new file mode 100644 index 00000000..3d41eb4f --- /dev/null +++ b/skills/frontend-slides/SKILL.md @@ -0,0 +1,184 @@ +--- +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. +origin: ECC +--- + +# Frontend Slides + +Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. + +Inspired by the visual exploration approach showcased in work by [zarazhangrui](https://github.com/zarazhangrui). + +## When to Activate + +- Creating a talk deck, pitch deck, workshop deck, or internal presentation +- Converting `.ppt` or `.pptx` slides into an HTML presentation +- Improving an existing HTML presentation's layout, motion, or typography +- Exploring presentation styles with a user who does not know their design preference yet + +## Non-Negotiables + +1. **Zero dependencies**: default to one self-contained HTML file with inline CSS and JS. +2. **Viewport fit is mandatory**: every slide must fit inside one viewport with no internal scrolling. +3. **Show, don't tell**: use visual previews instead of abstract style questionnaires. +4. **Distinctive design**: avoid generic purple-gradient, Inter-on-white, template-looking decks. +5. **Production quality**: keep code commented, accessible, responsive, and performant. + +Before generating, read `STYLE_PRESETS.md` for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas. + +## Workflow + +### 1. Detect Mode + +Choose one path: +- **New presentation**: user has a topic, notes, or full draft +- **PPT conversion**: user has `.ppt` or `.pptx` +- **Enhancement**: user already has HTML slides and wants improvements + +### 2. Discover Content + +Ask only the minimum needed: +- purpose: pitch, teaching, conference talk, internal update +- length: short (5-10), medium (10-20), long (20+) +- content state: finished copy, rough notes, topic only + +If the user has content, ask them to paste it before styling. + +### 3. Discover Style + +Default to visual exploration. + +If the user already knows the desired preset, skip previews and use it directly. + +Otherwise: +1. Ask what feeling the deck should create: impressed, energized, focused, inspired. +2. Generate **3 single-slide preview files** in `.ecc-design/slide-previews/`. +3. Each preview must be self-contained, show typography/color/motion clearly, and stay under roughly 100 lines of slide content. +4. Ask the user which preview to keep or what elements to mix. + +Use the preset guide in `STYLE_PRESETS.md` when mapping mood to style. + +### 4. Build the Presentation + +Output either: +- `presentation.html` +- `[presentation-name].html` + +Use an `assets/` folder only when the deck contains extracted or user-supplied images. + +Required structure: +- semantic slide sections +- a viewport-safe CSS base from `STYLE_PRESETS.md` +- CSS custom properties for theme values +- a presentation controller class for keyboard, wheel, and touch navigation +- Intersection Observer for reveal animations +- reduced-motion support + +### 5. Enforce Viewport Fit + +Treat this as a hard gate. + +Rules: +- every `.slide` must use `height: 100vh; height: 100dvh; overflow: hidden;` +- all type and spacing must scale with `clamp()` +- when content does not fit, split into multiple slides +- never solve overflow by shrinking text below readable sizes +- never allow scrollbars inside a slide + +Use the density limits and mandatory CSS block in `STYLE_PRESETS.md`. + +### 6. Validate + +Check the finished deck at these sizes: +- 1920x1080 +- 1280x720 +- 768x1024 +- 375x667 +- 667x375 + +If browser automation is available, use it to verify no slide overflows and that keyboard navigation works. + +### 7. Deliver + +At handoff: +- delete temporary preview files unless the user wants to keep them +- open the deck with the platform-appropriate opener when useful +- summarize file path, preset used, slide count, and easy theme customization points + +Use the correct opener for the current OS: +- macOS: `open file.html` +- Linux: `xdg-open file.html` +- Windows: `start "" file.html` + +## PPT / PPTX Conversion + +For PowerPoint conversion: +1. Prefer `python3` with `python-pptx` to extract text, images, and notes. +2. If `python-pptx` is unavailable, ask whether to install it or fall back to a manual/export-based workflow. +3. Preserve slide order, speaker notes, and extracted assets. +4. After extraction, run the same style-selection workflow as a new presentation. + +Keep conversion cross-platform. Do not rely on macOS-only tools when Python can do the job. + +## Implementation Requirements + +### HTML / CSS + +- Use inline CSS and JS unless the user explicitly wants a multi-file project. +- Fonts may come from Google Fonts or Fontshare. +- Prefer atmospheric backgrounds, strong type hierarchy, and a clear visual direction. +- Use abstract shapes, gradients, grids, noise, and geometry rather than illustrations. + +### JavaScript + +Include: +- keyboard navigation +- touch / swipe navigation +- mouse wheel navigation +- progress indicator or slide index +- reveal-on-enter animation triggers + +### Accessibility + +- use semantic structure (`main`, `section`, `nav`) +- keep contrast readable +- support keyboard-only navigation +- respect `prefers-reduced-motion` + +## Content Density Limits + +Use these maxima unless the user explicitly asks for denser slides and readability still holds: + +| Slide type | Limit | +|------------|-------| +| Title | 1 heading + 1 subtitle + optional tagline | +| Content | 1 heading + 4-6 bullets or 2 short paragraphs | +| Feature grid | 6 cards max | +| Code | 8-10 lines max | +| Quote | 1 quote + attribution | +| Image | 1 image constrained by viewport | + +## Anti-Patterns + +- generic startup gradients with no visual identity +- system-font decks unless intentionally editorial +- long bullet walls +- code blocks that need scrolling +- fixed-height content boxes that break on short screens +- invalid negated CSS functions like `-clamp(...)` + +## Related ECC Skills + +- `frontend-patterns` for component and interaction patterns around the deck +- `liquid-glass-design` when a presentation intentionally borrows Apple glass aesthetics +- `e2e-testing` if you need automated browser verification for the final deck + +## Deliverable Checklist + +- presentation runs from a local file in a browser +- every slide fits the viewport without scrolling +- style is distinctive and intentional +- animation is meaningful, not noisy +- reduced motion is respected +- file paths and customization points are explained at handoff diff --git a/skills/frontend-slides/STYLE_PRESETS.md b/skills/frontend-slides/STYLE_PRESETS.md new file mode 100644 index 00000000..0f0d0498 --- /dev/null +++ b/skills/frontend-slides/STYLE_PRESETS.md @@ -0,0 +1,330 @@ +# Style Presets Reference + +Curated visual styles for `frontend-slides`. + +Use this file for: +- the mandatory viewport-fitting CSS base +- preset selection and mood mapping +- CSS gotchas and validation rules + +Abstract shapes only. Avoid illustrations unless the user explicitly asks for them. + +## Viewport Fit Is Non-Negotiable + +Every slide must fully fit in one viewport. + +### Golden Rule + +```text +Each slide = exactly one viewport height. +Too much content = split into more slides. +Never scroll inside a slide. +``` + +### Density Limits + +| Slide Type | Maximum Content | +|------------|-----------------| +| Title slide | 1 heading + 1 subtitle + optional tagline | +| Content slide | 1 heading + 4-6 bullets or 2 paragraphs | +| Feature grid | 6 cards maximum | +| Code slide | 8-10 lines maximum | +| Quote slide | 1 quote + attribution | +| Image slide | 1 image, ideally under 60vh | + +## Mandatory Base CSS + +Copy this block into every generated presentation and then theme on top of it. + +```css +/* =========================================== + VIEWPORT FITTING: MANDATORY BASE STYLES + =========================================== */ + +html, body { + height: 100%; + overflow-x: hidden; +} + +html { + scroll-snap-type: y mandatory; + scroll-behavior: smooth; +} + +.slide { + width: 100vw; + height: 100vh; + height: 100dvh; + overflow: hidden; + scroll-snap-align: start; + display: flex; + flex-direction: column; + position: relative; +} + +.slide-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + max-height: 100%; + overflow: hidden; + padding: var(--slide-padding); +} + +:root { + --title-size: clamp(1.5rem, 5vw, 4rem); + --h2-size: clamp(1.25rem, 3.5vw, 2.5rem); + --h3-size: clamp(1rem, 2.5vw, 1.75rem); + --body-size: clamp(0.75rem, 1.5vw, 1.125rem); + --small-size: clamp(0.65rem, 1vw, 0.875rem); + + --slide-padding: clamp(1rem, 4vw, 4rem); + --content-gap: clamp(0.5rem, 2vw, 2rem); + --element-gap: clamp(0.25rem, 1vw, 1rem); +} + +.card, .container, .content-box { + max-width: min(90vw, 1000px); + max-height: min(80vh, 700px); +} + +.feature-list, .bullet-list { + gap: clamp(0.4rem, 1vh, 1rem); +} + +.feature-list li, .bullet-list li { + font-size: var(--body-size); + line-height: 1.4; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); + gap: clamp(0.5rem, 1.5vw, 1rem); +} + +img, .image-container { + max-width: 100%; + max-height: min(50vh, 400px); + object-fit: contain; +} + +@media (max-height: 700px) { + :root { + --slide-padding: clamp(0.75rem, 3vw, 2rem); + --content-gap: clamp(0.4rem, 1.5vw, 1rem); + --title-size: clamp(1.25rem, 4.5vw, 2.5rem); + --h2-size: clamp(1rem, 3vw, 1.75rem); + } +} + +@media (max-height: 600px) { + :root { + --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem); + --content-gap: clamp(0.3rem, 1vw, 0.75rem); + --title-size: clamp(1.1rem, 4vw, 2rem); + --body-size: clamp(0.7rem, 1.2vw, 0.95rem); + } + + .nav-dots, .keyboard-hint, .decorative { + display: none; + } +} + +@media (max-height: 500px) { + :root { + --slide-padding: clamp(0.4rem, 2vw, 1rem); + --title-size: clamp(1rem, 3.5vw, 1.5rem); + --h2-size: clamp(0.9rem, 2.5vw, 1.25rem); + --body-size: clamp(0.65rem, 1vw, 0.85rem); + } +} + +@media (max-width: 600px) { + :root { + --title-size: clamp(1.25rem, 7vw, 2.5rem); + } + + .grid { + grid-template-columns: 1fr; + } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.2s !important; + } + + html { + scroll-behavior: auto; + } +} +``` + +## Viewport Checklist + +- every `.slide` has `height: 100vh`, `height: 100dvh`, and `overflow: hidden` +- all typography uses `clamp()` +- all spacing uses `clamp()` or viewport units +- images have `max-height` constraints +- grids adapt with `auto-fit` + `minmax()` +- short-height breakpoints exist at `700px`, `600px`, and `500px` +- if anything feels cramped, split the slide + +## Mood to Preset Mapping + +| Mood | Good Presets | +|------|--------------| +| Impressed / Confident | Bold Signal, Electric Studio, Dark Botanical | +| Excited / Energized | Creative Voltage, Neon Cyber, Split Pastel | +| Calm / Focused | Notebook Tabs, Paper & Ink, Swiss Modern | +| Inspired / Moved | Dark Botanical, Vintage Editorial, Pastel Geometry | + +## Preset Catalog + +### 1. Bold Signal + +- Vibe: confident, high-impact, keynote-ready +- Best for: pitch decks, launches, statements +- Fonts: Archivo Black + Space Grotesk +- Palette: charcoal base, hot orange focal card, crisp white text +- Signature: oversized section numbers, high-contrast card on dark field + +### 2. Electric Studio + +- Vibe: clean, bold, agency-polished +- Best for: client presentations, strategic reviews +- Fonts: Manrope only +- Palette: black, white, saturated cobalt accent +- Signature: two-panel split and sharp editorial alignment + +### 3. Creative Voltage + +- Vibe: energetic, retro-modern, playful confidence +- Best for: creative studios, brand work, product storytelling +- Fonts: Syne + Space Mono +- Palette: electric blue, neon yellow, deep navy +- Signature: halftone textures, badges, punchy contrast + +### 4. Dark Botanical + +- Vibe: elegant, premium, atmospheric +- Best for: luxury brands, thoughtful narratives, premium product decks +- Fonts: Cormorant + IBM Plex Sans +- Palette: near-black, warm ivory, blush, gold, terracotta +- Signature: blurred abstract circles, fine rules, restrained motion + +### 5. Notebook Tabs + +- Vibe: editorial, organized, tactile +- Best for: reports, reviews, structured storytelling +- Fonts: Bodoni Moda + DM Sans +- Palette: cream paper on charcoal with pastel tabs +- Signature: paper sheet, colored side tabs, binder details + +### 6. Pastel Geometry + +- Vibe: approachable, modern, friendly +- Best for: product overviews, onboarding, lighter brand decks +- Fonts: Plus Jakarta Sans only +- Palette: pale blue field, cream card, soft pink/mint/lavender accents +- Signature: vertical pills, rounded cards, soft shadows + +### 7. Split Pastel + +- Vibe: playful, modern, creative +- Best for: agency intros, workshops, portfolios +- Fonts: Outfit only +- Palette: peach + lavender split with mint badges +- Signature: split backdrop, rounded tags, light grid overlays + +### 8. Vintage Editorial + +- Vibe: witty, personality-driven, magazine-inspired +- Best for: personal brands, opinionated talks, storytelling +- Fonts: Fraunces + Work Sans +- Palette: cream, charcoal, dusty warm accents +- Signature: geometric accents, bordered callouts, punchy serif headlines + +### 9. Neon Cyber + +- Vibe: futuristic, techy, kinetic +- Best for: AI, infra, dev tools, future-of-X talks +- Fonts: Clash Display + Satoshi +- Palette: midnight navy, cyan, magenta +- Signature: glow, particles, grids, data-radar energy + +### 10. Terminal Green + +- Vibe: developer-focused, hacker-clean +- Best for: APIs, CLI tools, engineering demos +- Fonts: JetBrains Mono only +- Palette: GitHub dark + terminal green +- Signature: scan lines, command-line framing, precise monospace rhythm + +### 11. Swiss Modern + +- Vibe: minimal, precise, data-forward +- Best for: corporate, product strategy, analytics +- Fonts: Archivo + Nunito +- Palette: white, black, signal red +- Signature: visible grids, asymmetry, geometric discipline + +### 12. Paper & Ink + +- Vibe: literary, thoughtful, story-driven +- Best for: essays, keynote narratives, manifesto decks +- Fonts: Cormorant Garamond + Source Serif 4 +- Palette: warm cream, charcoal, crimson accent +- Signature: pull quotes, drop caps, elegant rules + +## Direct Selection Prompts + +If the user already knows the style they want, let them pick directly from the preset names above instead of forcing preview generation. + +## Animation Feel Mapping + +| Feeling | Motion Direction | +|---------|------------------| +| Dramatic / Cinematic | slow fades, parallax, large scale-ins | +| Techy / Futuristic | glow, particles, grid motion, scramble text | +| Playful / Friendly | springy easing, rounded shapes, floating motion | +| Professional / Corporate | subtle 200-300ms transitions, clean slides | +| Calm / Minimal | very restrained movement, whitespace-first | +| Editorial / Magazine | strong hierarchy, staggered text and image interplay | + +## CSS Gotcha: Negating Functions + +Never write these: + +```css +right: -clamp(28px, 3.5vw, 44px); +margin-left: -min(10vw, 100px); +``` + +Browsers ignore them silently. + +Always write this instead: + +```css +right: calc(-1 * clamp(28px, 3.5vw, 44px)); +margin-left: calc(-1 * min(10vw, 100px)); +``` + +## Validation Sizes + +Test at minimum: +- Desktop: `1920x1080`, `1440x900`, `1280x720` +- Tablet: `1024x768`, `768x1024` +- Mobile: `375x667`, `414x896` +- Landscape phone: `667x375`, `896x414` + +## Anti-Patterns + +Do not use: +- purple-on-white startup templates +- Inter / Roboto / Arial as the visual voice unless the user explicitly wants utilitarian neutrality +- bullet walls, tiny type, or code blocks that require scrolling +- decorative illustrations when abstract geometry would do the job better