frontend-slides

by ken0122

Install this Skill

curl -fsSL -o frontend-slides.zip https://skill.seembox.com/api/v1/skills/frontend-slides/download && unzip frontend-slides.zip

Download frontend-slides.zip

SKILL.md About

---
name: frontend-slides
description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use for solution decks, presales/sales pitches, client proposals, pitch decks, teaching tutorials, conference talks, and internal presentations. Ideal for sales and presales teams. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
---

# Frontend Slides Skill

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration ("show, don't tell"), then generates production-quality slide decks.

**Reference files:** When generating CSS, image processing, PPT extraction, HTML structure, edit button, or animation code, read the corresponding file under `reference/` (and STYLE_PRESETS.md for presets and CSS Gotchas) so output is correct and complete.

---

## 🧠 Core Design Philosophy

### 1. Visual Style & Material

**Principle**: Form follows function. All visual decisions (color, layout, material) must serve the user's mental model and business goals.

| Style Position | Use Cases | Core Characteristics |
|---|---|---|
| **Future & Depth** | Frontier exploration, tech product launches | Frosted glass + dark mode, halos and transparency for layering |
| **Efficiency & Speed** | Professional tools, data dashboards | Clean flat style + Bento UI, clear boundaries, modular |
| **Trust & Professional** | Finance, formal presentations, enterprise solutions | Swiss minimalism, generous whitespace, relies on typography and strict grids |
| **Care & Resonance** | Humanities, lifestyle, brand stories | Low-saturation natural colors + extreme rounding, ultra-soft diffuse shadows |
| **Immersion & Expression** | Entertainment, narrative, creative showcases | Skeuomorphic materials + high-contrast emotional colors, breaks conventional grids |

**Style Selection Rules:**
- Solution deck / presales proposal → Trust & Professional (Swiss Modern) or Efficiency & Speed (Bento UI)
- Product launch / tech showcase → Future & Depth (Dark Botanical / Electric Studio)
- Brand story / humanities content → Care & Resonance (Pastel Geometry / Vintage Editorial)
- Creative proposal / marketing campaign → Immersion & Expression (Neon Cyber / Creative Voltage)

### 2. Spatial & Typography Organization

- **Density Hierarchy**: Density is inversely proportional to importance. Core focus areas need low density / large margins. Data lists need high density / small margins.
- **Typography System**:
  - Prefer modern sans-serif fonts (Clash Display, Satoshi, DM Sans)
  - Establish significant **weight** and **size** contrast between headings and body
  - Body line-height: `leading-[1.5]` or `leading-[1.6]` for visual breathability
- **Font Size Constraints**:
  - Minimum readable size: `12px` (annotations only)
  - Standard body: `14px/16px`
  - Headings use `clamp()` for responsive scaling

### 3. Affordance & Resilience

Although the output is static HTML, when handling multiple similar components (lists, navigation, card groups), **you must hardcode and render different interaction states within the same container** to exhaustively show the component's full lifecycle.

- **⚠️ Warning**: Do not rely solely on Tailwind's `hover:` pseudo-class for interactions. You must directly change the base class of specific items to make states **simultaneously visible** in static screenshots!
- **Example**: In a card group, first card uses default state, second card uses `bg-white/10` to simulate hover state, third card uses `border-cyan-400` to simulate selected state

### 4. System Integrity Constraints

**All design decisions must map to the following limited variable set (no odd numbers, decimals, or random values allowed):**

| System | Constraints |
|---|---|
| **Color System** | Primary color defines brand; **complementary color** for strong guidance; **analogous colors** for soft guidance. No arbitrary colors |
| **Spatial Spacing (8-Point Grid)** | Spacing and padding limited to: `8` / `12` / `16` / `20` / `24` / `32` / `40` (strictly apply to gap and padding) |
| **Corner Radius** | Choose based on style, default starts at `rounded-[12px]`. Care style can use `rounded-[24px]` or `rounded-full` |
| **Size Minimums** | Minimum click hotspot `44px`; minimum readable size `12px`; standard body `14px/16px` |
| **Shadow Control** | Must use diffuse lighting like `shadow-[0_10px_30px_rgba(0,0,0,0.08)]`, no harsh shadows |

---

### 5. 🌀 Emerging Design Trends 2026

Integrate the following four trends organically into presentation design. Select 1-2 dominant trends based on content theme.

#### Trend 1: Ghostly Agency
**Core**: Agentic UX — The interface acts like a translucent butler, preparing everything before the user asks

| Design Strategy | Implementation | Use Cases |
|---|---|---|
| **Predictive Presence** | Progressive content reveal (`.reveal` animations trigger in stages) | AI products, automation services, intelligent assistants |
| **Invisible Butler** | Translucent elements + subtle floating animations (`opacity: 0.6~0.8`, `animation: float 3s ease-in-out`) | Backend systems, data dashboards, settings interfaces |
| **Intent Visualization** | Use halos/particles to suggest "thinking" (`box-shadow` pulse animations) | AI-generated content, smart recommendations |

**CSS Prompt Examples:**
```css
/* Ghostly Float */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ghostly-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); animation: float 4s ease-in-out infinite; }

/* Predictive Halo */
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(0,212,255,0.3); } 50% { box-shadow: 0 0 40px rgba(0,212,255,0.6); } }
.agentic-hint { animation: pulse-glow 2s ease-in-out infinite; }
```

---

#### 趋势二：粗砺真实 (The Grain of Truth)
**核心**：Imperfect & Organic — 反秩序审美，有瑕疵的真实感

| 设计策略 | 实现方式 | 适用场景 |
|---|---|---|
| **数字褶皱** | SVG 噪点纹理叠加 (`background-image: url("data:image/svg+xml,...")` 含 `<feTurbulence>`) | 创意品牌、独立工作室、手作品牌 |
| **有机排版** | 轻微旋转 (`transform: rotate(-1deg~2deg)`), 非严格对齐 | 艺术展览、音乐活动、个人作品集 |
| **触觉质感** | 颗粒感背景 + 不规则边框 (`border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%`) | 生活方式、食品、时尚 |

**CSS Prompt Examples:**
```css
/* Grain Texture Background */
.grain-overlay { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E"); }

/* Organic Shape */
.organic-shape { border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%; transform: rotate(-1.5deg); }
```

---

#### Trend 3: Liminal Multimodality
**Core**: Multimodal Seamlessness — Experience flows between voice, gesture, eye tracking, and touch

| Design Strategy | Implementation | Use Cases |
|---|---|---|
| **Sensory Flow** | Wave animations suggest voice interaction (`animation: wave 1.5s ease-in-out`) | Voice assistants, podcasts, audio products |
| **Spatial Hints** | 3D perspective + parallax scroll hints (`perspective: 1000px; transform: translateZ()`) | AR/VR, spatial computing, metaverse |
| **Multimodal Icons** | Visual elements of sound waves, gesture outlines, eye tracking paths | Cross-device experiences, seamless collaboration tools |

**CSS Prompt Examples:**
```css
/* Voice Wave */
@keyframes wave { 0%, 100% { height: 8px; } 50% { height: 24px; } }
.voice-wave span { display: inline-block; width: 4px; background: #00d4ff; animation: wave 1s ease-in-out infinite; }
.voice-wave span:nth-child(2) { animation-delay: 0.1s; }
.voice-wave span:nth-child(3) { animation-delay: 0.2s; }

/* Spatial Perspective */
.liminal-space { perspective: 1000px; transform-style: preserve-3d; }
.depth-layer { transform: translateZ(50px); }
```

---

#### Trend 4: Emotional Sovereignty
**Core**: Hyper-Personalized Ethical — Design for "resonance" rather than "retention"

| Design Strategy | Implementation | Use Cases |
|---|---|---|
| **Transparent Explanation** | "Why this recommendation" tooltip (`data-explanation` shows on hover) | Healthcare, education, finance, AI recommendations |
| **User Confirmation** | Clear "Accept/Reject" options, not default checkboxes | Privacy settings, data collection, personalization options |
| **Personalized Visuals** | Dynamic color adjustment based on content theme (`--user-theme` CSS variables) | Personal dashboards, learning platforms, health apps |

**CSS Prompt Examples:**
```css
/* Explanatory Hint */
.explainable-ui { position: relative; }
.explainable-ui::after {
  content: attr(data-explanation);
  position: absolute; bottom: 100%; left: 0;
  background: rgba(0,0,0,0.9); color: #fff;
  padding: 8px 12px; border-radius: 8px;
  font-size: 12px; max-width: 280px;
  opacity: 0; transform: translateY(8px); transition: all 0.2s;
}
.explainable-ui:hover::after { opacity: 1; transform: translateY(0); }

/* Personalized Theme Variables */
:root { --user-primary: #00d4ff; --user-secondary: #7b2fff; --user-accent: #00ffa3; }
.personalized-card { border-left: 4px solid var(--user-primary); }
```

---

### Trend Application Decision Tree

```
User Need → Select Dominant Trends

AI / Automation Products → Ghostly Agency + Emotional Sovereignty
Creative / Art Content → Grain of Truth + Immersion & Expression
Tech / Frontier Launches → Ghostly Agency + Liminal Multimodality
Humanities / Lifestyle → Grain of Truth + Care & Resonance
Enterprise / Professional → Emotional Sovereignty + Trust & Professional
```

**⚠️ Notes:**
- Apply maximum **2 trends per presentation** to avoid visual chaos
- Trends serve content — never use trends for trends' sake
- Explain trend options to users during Style Discovery phase

---

## CRITICAL: Viewport Fitting Requirements

**Mandatory for ALL presentations.** Every slide must be fully visible without scrolling on any screen size.

### The Golden Rule

- Each slide = exactly one viewport height (`100vh` / `100dvh`).
- Content overflows? → Split into multiple slides or reduce content. Never scroll within a slide.

### Content Density Limits (per slide)

| Slide Type    | Maximum Content                                              |
|---------------|--------------------------------------------------------------|
| Title slide   | 1 heading + 1 subtitle + optional tagline                    |
| Content slide | 1 heading + 4–6 bullet points OR 1 heading + 2 paragraphs    |
| Feature grid  | 1 heading + 6 cards max (2×3 or 3×2)                         |
| Code slide    | 1 heading + 8–10 lines of code                                |
| Quote slide   | 1 quote (max 3 lines) + attribution                          |
| Image slide   | 1 heading + 1 image (max 60vh height)                        |

**Required base CSS:** Include the full mandatory base styles in every presentation. **Copy from [reference/viewport-and-base.css](reference/viewport-and-base.css)** (or inline equivalent). It covers: html/body lock, `.slide` = 100vh/100dvh + overflow hidden, `.slide-content`, `:root` clamp() variables, cards/lists/grids/images, responsive breakpoints (700px, 600px, 500px height; 600px width), and reduced-motion.

### Overflow Prevention Checklist

Before generating: (1) Every `.slide` has `height: 100vh; height: 100dvh; overflow: hidden;` (2) All font sizes and spacing use `clamp()` or viewport units (3) Content containers have `max-height` (4) Images `max-height: min(50vh, 400px)` or similar (5) Grids use `auto-fit` + `minmax()` (6) Breakpoints for heights 700/600/500 (7) No fixed pixel heights on content (8) Per-slide content within density limits.

### When Content Doesn't Fit

**DO:** Split into multiple slides; reduce bullets (max 5–6); shorten text; smaller code snippets; "continued" slide; when adding images, move image to new slide or reduce other content first. **DON'T:** Shrink fonts below readable; remove padding; allow scrolling; cram.

### Testing Viewport Fit

Recommend testing at: Desktop 1920×1080, 1440×900, 1280×720; Tablet 1024×768, 768×1024; Mobile 375×667, 414×896; Landscape 667×375, 896×414.

---

## Phase 0: Detect Mode

- **Mode A — New Presentation:** User wants slides from scratch → Phase 1 (Content Discovery).
- **Mode B — PPT Conversion:** User has .ppt/.pptx → Phase 4 (PPT Extraction).
- **Mode C — Existing HTML Enhancement:** Read file, enhance; **always maintain viewport fitting.**

### Mode C: Modification Rules

Before adding content: check current slide against density limits. **Images:** max `min(50vh, 400px)`; if slide already full → split into two slides (e.g. new slide for image). **Text:** max 4–6 bullets or 2 paragraphs per slide; if over → split or continuation slide. After any change: verify `.slide` has `overflow: hidden`, new elements use `clamp()`, new images have viewport max-height, density respected. If modifications cause overflow → **automatically split** and tell user. Test at 1280×720, 768×1024, 375×667.

---

## Solution PPT (解决方案 PPT) — 售前/销售专用

When purpose is **solution deck / 解决方案汇报 / 售前方案 / 投标演示**, use this default outline (10–20 slides): (1) Title (2) Agenda (3) Background & objectives (4) Pain points & challenges (5) Solution overview (6–8) Capabilities / product value (9) Case study (10) Implementation / roadmap (11) Next steps & contact. Adjust as needed; respect content density. **Style:** Prefer **Swiss Modern**, **Electric Studio**, **Dark Botanical**, **Notebook Tabs**. Avoid highly playful styles unless asked.

---

## Phase 1: Content Discovery (New Presentations)

**If AskUserQuestion is available:** Collect in one form. **If not (e.g. Cursor):** Ask the same questions in conversation, in order, and record answers before Phase 2.

### Step 1.1: Context + Images (single form or sequence)

Ask these five in one form (AskUserQuestion) or in sequence:

1. **Purpose:** What is this presentation for? — Solution deck (解决方案 PPT) | Pitch deck | Teaching/Tutorial | Conference talk | Internal presentation
2. **Length:** Approximately how many slides? — Short (5–10) | Medium (10–20) | Long (20+)
3. **Content:** Do you have content ready or need help? — I have all content ready | I have rough notes | I have topic only
4. **Images:** No images | ./assets | Other (let user type/paste folder path, e.g. ~/Desktop/screenshots)
5. **Editing:** Do you need to edit text in the browser after generation? — Yes (in-browser edit, auto-save, export) | No

Remember the editing choice — it controls whether Phase 3 includes the edit button (see reference/edit-button-implementation.md).

**Get the content:** If user said "I have all content ready" → ask them to share it (paste text, bullet points, or path to file). If "I have rough notes" or "I have topic only" → help structure an outline, then ask for or draft the slide-by-slide content. You need concrete titles and body content before Phase 2.

### Step 1.2: Image Evaluation (if user provided images)

If "No images" → skip image pipeline; use text + CSS visuals. If folder provided: (1) List image files (2) Read/view each (3) Mark USABLE / NOT USABLE with reason; note content signal, shape, dominant colors (4) Propose slide outline with image assignments (5) Confirm outline via AskUserQuestion or conversation: "Looks good" | "Adjust images" | "Adjust outline". Co-design: usable images shape the outline from the start. Logo in previews: if USABLE logo exists, embed (e.g. base64) in the 3 style previews so user sees their brand in each style.

---

## Phase 2: Style Discovery

**Option A — Guided:** Ask mood (Impressed/Confident | Excited/Energized | Calm/Focused | Inspired/Moved; multiSelect up to 2). Create directory `.claude-design/slide-previews/` if needed. Generate **3 style previews** there (style-a.html, style-b.html, style-c.html): single title slide each, self-contained, ~50–100 lines. Pick 3 presets by mood (e.g. Impressed → Bold Signal, Electric Studio, Dark Botanical). **Never use:** purple gradients on white, Inter/Roboto, standard blue, predictable hero. **Use:** distinctive fonts (Clash Display, Satoshi, Cormorant Garamond, DM Sans), cohesive colors, atmospheric backgrounds, signature animation. Present previews; user picks Style A/B/C or "Mix elements". **Option B — Direct:** Ask "Which preset?" and show the preset list (below or from STYLE_PRESETS.md). User picks by name → skip to Phase 3.

**Presets (see STYLE_PRESETS.md for full list):** Bold Signal | Electric Studio | Creative Voltage | Dark Botanical | Notebook Tabs | Pastel Geometry | Split Pastel | Vintage Editorial | Neon Cyber | Terminal Green | Swiss Modern | Paper & Ink. Mood → preset mapping: 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.

---

## Phase 3: Generate Presentation

Use content from Phase 1 and style from Phase 2. If no images, generate text-only with CSS visuals. If images: **Image pipeline** — process before HTML. **Operations:** See [reference/image-processing.py](reference/image-processing.py) for `crop_circle`, `resize_max`, `add_padding`. Dependency: `pip install Pillow`. Never repeat same image (except logo on title+closing); add CSS framing (border/glow) when image clashes with style. Save processed images to a new filename (e.g. `logo_round.png`, `screenshot_processed.png`); never overwrite originals. Reference in HTML with relative paths (e.g. `assets/logo_round.png`). **Image CSS:** `.slide-image` max-height min(50vh, 400px); `.screenshot` border+shadow; `.logo` max-height min(30vh, 200px). Adapt border/shadow to style accent. Placement: title = logo centered; feature = screenshot one side, text other; full-bleed or inline as needed.

**File structure:** Single: `presentation.html` + `assets/`. Multiple: `[name].html` + `[name]-assets/`.

**HTML architecture:** Follow [reference/html-architecture.md](reference/html-architecture.md). Include mandatory viewport base CSS, theme variables (clamp() for all typography/spacing), .slide + .slide-content, responsive breakpoints, .reveal + .visible for animations.

**Required JS:** Implement SlidePresentation: keyboard (arrows, space), touch/swipe, mouse wheel; progress bar and navigation dots (click dot to jump to slide); Intersection Observer to add `.visible` when a slide enters the viewport so .reveal animations run. Optional: cursor trail, particles, parallax, tilt, inline editing. **Edit button (only if user opted Yes):** See [reference/edit-button-implementation.md](reference/edit-button-implementation.md). Use JS hover with delay (no CSS ~ sibling); hotzone + E key + click to toggle.

**Code quality:** Clear section comments; semantic HTML; keyboard nav; ARIA where needed; reduced motion. **CSS negation:** Use `calc(-1 * clamp(...))`, never `-clamp()`. See STYLE_PRESETS.md "CSS Gotchas". Viewport: always respect density and overflow rules above.

---

## Phase 4: PPT Conversion

1. **Extract:** Run the logic from [reference/ppt-extract.py](reference/ppt-extract.py): `extract_pptx(user_pptx_path, output_dir)`. Dependency: `pip install python-pptx`. Use an output_dir (e.g. current directory or a new folder) so images are saved to `output_dir/assets/` and the future HTML can use `assets/` as sibling. Returns slides_data (per slide: title, content[], images[], notes).
2. **Confirm:** Present extracted slide list to user; ask to proceed to style selection.
3. **Style:** Phase 2 (Style Discovery) with extracted content in mind.
4. **Generate:** Build the HTML presentation in the **same output_dir** used in step 1 so that `assets/` is next to the .html file. Convert to chosen style; preserve text, images (reference from assets/), slide order, speaker notes (as HTML comments or separate file).

---

## Phase 5: Delivery

1. Delete `.claude-design/slide-previews/` if present.
2. Open presentation in browser (e.g. `open [filename].html`).
3. Summary: file, style, slide count; navigation (arrows, space, scroll, dots); customization (:root, fonts, .reveal). If inline editing: hover top-left or E to edit; Ctrl+S or "Save file".

---

## Style Reference: Effect → Feeling

- **Dramatic/Cinematic:** Slow fades, scale transitions, dark + spotlight, parallax, full-bleed.
- **Techy/Futuristic:** Neon glow, particles, grid, monospace accents, cyan/magenta palette.
- **Playful/Friendly:** Bouncy easing, rounded, pastel/bright, floating animations.
- **Professional/Corporate:** Subtle fast animations (200–300ms), clean sans, navy/slate, minimal decor.
- **Calm/Minimal:** Slow subtle motion, whitespace, muted palette, serif, content-focused.
- **Editorial:** Strong type hierarchy, pull quotes, image-text interplay, serif headline + sans body.

**Animation patterns (entrance, backgrounds, interactive):** See [reference/animation-patterns.md](reference/animation-patterns.md).

---

## Troubleshooting

- **Fonts not loading:** Check Fontshare/Google URL; font names in CSS.
- **Animations not triggering:** Intersection Observer; .visible class.
- **Scroll snap:** scroll-snap-type on html; scroll-snap-align on each .slide.
- **Mobile:** Disable heavy effects at 768px; test touch; reduce particles.
- **Performance:** Use will-change sparingly; prefer transform/opacity; throttle scroll/mousemove.

---

## Example Flows

**New presentation:** User wants pitch/solution deck → ask purpose, length, content, images, editing → (if images) evaluate, outline, confirm → ask vibe → 3 previews → user picks style → (if images) run Pillow ops → generate HTML → open in browser.

**PPT conversion:** User has .pptx → extract with ppt-extract.py → confirm content → style selection → generate HTML with assets.

_meta.json Metadata

{
  "ownerId": "kn73rqfztb1dtgk3pwgas0j7ed823j8d",
  "publishedAt": 1773041114244,
  "slug": "frontend-slides",
  "version": "2.0.2"
}