frontend-slides

# 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.