npm - @techwavedev/agi-agent-kit - Versions diffs - 1.5.3 → 1.6.0 - Mend

@techwavedev/agi-agent-kit 1.5.3 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2610) hide show

package/templates/skills/extended/frontend/frontend-slides/SKILL.md CHANGED Viewed

@@ -1,811 +1,282 @@
 ---
 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.
-source: https://github.com/zarazhangrui/frontend-slides
+description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.
 risk: safe
+source: https://github.com/zarazhangrui/frontend-slides
+date_added: "2026-03-07"
 ---
-# 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.
-## Core Philosophy
-1. **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools.
-2. **Show, Don't Tell** — People don't know what they want until they see it. Generate visual previews, not abstract choices.
-3. **Distinctive Design** — Avoid generic "AI slop" aesthetics. Every presentation should feel custom-crafted.
-4. **Production Quality** — Code should be well-commented, accessible, and performant.
----
-## Phase 0: Detect Mode
-First, determine what the user wants:
-**Mode A: New Presentation**
-- User wants to create slides from scratch
-- Proceed to Phase 1 (Content Discovery)
-**Mode B: PPT Conversion**
-- User has a PowerPoint file (.ppt, .pptx) to convert
-- Proceed to Phase 4 (PPT Extraction)
-**Mode C: Existing Presentation Enhancement**
-- User has an HTML presentation and wants to improve it
-- Read the existing file, understand the structure, then enhance
----
-## Phase 1: Content Discovery (New Presentations)
-Before designing, understand the content. Ask via AskUserQuestion:
-### Step 1.1: Presentation Context
-**Question 1: Purpose**
-- Header: "Purpose"
-- Question: "What is this presentation for?"
-- Options:
-  - "Pitch deck" — Selling an idea, product, or company to investors/clients
-  - "Teaching/Tutorial" — Explaining concepts, how-to guides, educational content
-  - "Conference talk" — Speaking at an event, tech talk, keynote
-  - "Internal presentation" — Team updates, strategy meetings, company updates
-**Question 2: Slide Count**
-- Header: "Length"
-- Question: "Approximately how many slides?"
-- Options:
-  - "Short (5-10)" — Quick pitch, lightning talk
-  - "Medium (10-20)" — Standard presentation
-  - "Long (20+)" — Deep dive, comprehensive talk
-**Question 3: Content**
-- Header: "Content"
-- Question: "Do you have the content ready, or do you need help structuring it?"
-- Options:
-  - "I have all content ready" — Just need to design the presentation
-  - "I have rough notes" — Need help organizing into slides
-  - "I have a topic only" — Need help creating the full outline
-If user has content, ask them to share it (text, bullet points, images, etc.).
----
-## Phase 2: Style Discovery (Visual Exploration)
-**CRITICAL: This is the "show, don't tell" phase.**
+# Frontend Slides
-Most people can't articulate design preferences in words. Instead of asking "do you want minimalist or bold?", we generate mini-previews and let them react.
+Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
-### Step 2.1: Mood Selection
+## When to Use This Skill
-**Question 1: Feeling**
-- Header: "Vibe"
-- Question: "What feeling should the audience have when viewing your slides?"
-- Options:
-  - "Impressed/Confident" — Professional, trustworthy, this team knows what they're doing
-  - "Excited/Energized" — Innovative, bold, this is the future
-  - "Calm/Focused" — Clear, thoughtful, easy to follow
-  - "Inspired/Moved" — Emotional, storytelling, memorable
-- multiSelect: true (can choose up to 2)
+- Use when the user asks to create a presentation, slide deck, or pitch from scratch.
+- Use when the user wants to convert an existing PPT or PPTX file into a web-based presentation.
+- Use when designing visually rich, animated HTML content that needs to fit exactly within the viewport.
-### Step 2.2: Generate Style Previews
+## Core Principles
-Based on their mood selection, generate **3 distinct style previews** as mini HTML files in a temporary directory. Each preview should be a single title slide showing:
-- Typography (font choices, heading/body hierarchy)
-- Color palette (background, accent, text colors)
-- Animation style (how elements enter)
-- Overall aesthetic feel
-**Preview Styles to Consider (pick 3 based on mood):**
+1. **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools.
+2. **Show, Don't Tell** — Generate visual previews, not abstract choices. People discover what they want by seeing it.
+3. **Distinctive Design** — No generic "AI slop." Every presentation must feel custom-crafted.
+4. **Viewport Fitting (NON-NEGOTIABLE)** — Every slide MUST fit exactly within 100vh. No scrolling within slides, ever. Content overflows? Split into multiple slides.
-| Mood | Style Options |
-|------|---------------|
-| Impressed/Confident | "Corporate Elegant", "Dark Executive", "Clean Minimal" |
-| Excited/Energized | "Neon Cyber", "Bold Gradients", "Kinetic Motion" |
-| Calm/Focused | "Paper & Ink", "Soft Muted", "Swiss Minimal" |
-| Inspired/Moved | "Cinematic Dark", "Warm Editorial", "Atmospheric" |
+## Design Aesthetics
-**IMPORTANT: Never use these generic patterns:**
-- Purple gradients on white backgrounds
-- Inter, Roboto, or system fonts
-- Standard blue primary colors
-- Predictable hero layouts
+You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.
-**Instead, use distinctive choices:**
-- Unique font pairings (Clash Display, Satoshi, Cormorant Garamond, DM Sans, etc.)
-- Cohesive color themes with personality
-- Atmospheric backgrounds (gradients, subtle patterns, depth)
-- Signature animation moments
+Focus on:
-### Step 2.3: Present Previews
+- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
+- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
+- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
+- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.
-Create the previews in: `.claude-design/slide-previews/`
+Avoid generic AI-generated aesthetics:
-```
-.claude-design/slide-previews/
-├── style-a.html   # First style option
-├── style-b.html   # Second style option
-├── style-c.html   # Third style option
-└── assets/        # Any shared assets
-```
+- Overused font families (Inter, Roboto, Arial, system fonts)
+- Cliched color schemes (particularly purple gradients on white backgrounds)
+- Predictable layouts and component patterns
+- Cookie-cutter design that lacks context-specific character
-Each preview file should be:
-- Self-contained (inline CSS/JS)
-- A single "title slide" showing the aesthetic
-- Animated to demonstrate motion style
-- ~50-100 lines, not a full presentation
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
-Present to user:
-```
-I've created 3 style previews for you to compare:
+## Viewport Fitting Rules
-**Style A: [Name]** — [1 sentence description]
-**Style B: [Name]** — [1 sentence description]
-**Style C: [Name]** — [1 sentence description]
+These invariants apply to EVERY slide in EVERY presentation:
-Open each file to see them in action:
-- .claude-design/slide-previews/style-a.html
-- .claude-design/slide-previews/style-b.html
-- .claude-design/slide-previews/style-c.html
+- Every `.slide` must have `height: 100vh; height: 100dvh; overflow: hidden;`
+- ALL font sizes and spacing must use `clamp(min, preferred, max)` — never fixed px/rem
+- Content containers need `max-height` constraints
+- Images: `max-height: min(50vh, 400px)`
+- Breakpoints required for heights: 700px, 600px, 500px
+- Include `prefers-reduced-motion` support
+- Never negate CSS functions directly (`-clamp()`, `-min()`, `-max()` are silently ignored) — use `calc(-1 * clamp(...))` instead
-Take a look and tell me:
-1. Which style resonates most?
-2. What do you like about it?
-3. Anything you'd change?
-```
+**When generating, read `viewport-base.css` and include its full contents in every presentation.**
-Then use AskUserQuestion:
+### Content Density Limits Per Slide
-**Question: Pick Your Style**
-- Header: "Style"
-- Question: "Which style preview do you prefer?"
-- Options:
-  - "Style A: [Name]" — [Brief description]
-  - "Style B: [Name]" — [Brief description]
-  - "Style C: [Name]" — [Brief description]
-  - "Mix elements" — Combine aspects from different styles
+| 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 maximum (2x3 or 3x2)                  |
+| 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)                     |
-If "Mix elements", ask for specifics.
+**Content exceeds limits? Split into multiple slides. Never cram, never scroll.**
 ---
-## Phase 3: Generate Presentation
-Now generate the full presentation based on:
-- Content from Phase 1
-- Style from Phase 2
-### File Structure
+## Phase 0: Detect Mode
-For single presentations:
-```
-presentation.html    # Self-contained presentation
-assets/              # Images, if any
-```
+Determine what the user wants:
-For projects with multiple presentations:
-```
-[presentation-name].html
-[presentation-name]-assets/
-```
+- **Mode A: New Presentation** — Create from scratch. Go to Phase 1.
+- **Mode B: PPT Conversion** — Convert a .pptx file. Go to Phase 4.
+- **Mode C: Enhancement** — Improve an existing HTML presentation. Read it, understand it, enhance. **Follow Mode C modification rules below.**
-### HTML Architecture
-Follow this structure for all presentations:
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Presentation Title</title>
-    <!-- Fonts (use Fontshare or Google Fonts) -->
-    <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=...">
-    <style>
-        /* ===========================================
-           CSS CUSTOM PROPERTIES (THEME)
-           Easy to modify: change these to change the whole look
-           =========================================== */
-        :root {
-            /* Colors */
-            --bg-primary: #0a0f1c;
-            --bg-secondary: #111827;
-            --text-primary: #ffffff;
-            --text-secondary: #9ca3af;
-            --accent: #00ffcc;
-            --accent-glow: rgba(0, 255, 204, 0.3);
-            /* Typography */
-            --font-display: 'Clash Display', sans-serif;
-            --font-body: 'Satoshi', sans-serif;
-            /* Spacing */
-            --slide-padding: clamp(2rem, 5vw, 4rem);
-            /* Animation */
-            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-            --duration-normal: 0.6s;
-        }
-        /* ===========================================
-           BASE STYLES
-           =========================================== */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        html {
-            scroll-behavior: smooth;
-            scroll-snap-type: y mandatory;
-        }
-        body {
-            font-family: var(--font-body);
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            overflow-x: hidden;
-        }
-        /* ===========================================
-           SLIDE CONTAINER
-           Each section is one slide
-           =========================================== */
-        .slide {
-            min-height: 100vh;
-            padding: var(--slide-padding);
-            scroll-snap-align: start;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            position: relative;
-            overflow: hidden;
-        }
-        /* ===========================================
-           ANIMATIONS
-           Trigger via .visible class (added by JS on scroll)
-           =========================================== */
-        .reveal {
-            opacity: 0;
-            transform: translateY(30px);
-            transition: opacity var(--duration-normal) var(--ease-out-expo),
-                        transform var(--duration-normal) var(--ease-out-expo);
-        }
-        .slide.visible .reveal {
-            opacity: 1;
-            transform: translateY(0);
-        }
-        /* Stagger children */
-        .reveal:nth-child(1) { transition-delay: 0.1s; }
-        .reveal:nth-child(2) { transition-delay: 0.2s; }
-        .reveal:nth-child(3) { transition-delay: 0.3s; }
-        .reveal:nth-child(4) { transition-delay: 0.4s; }
-        /* ... more styles ... */
-    </style>
-</head>
-<body>
-    <!-- Progress bar (optional) -->
-    <div class="progress-bar"></div>
-    <!-- Navigation dots (optional) -->
-    <nav class="nav-dots">
-        <!-- Generated by JS -->
-    </nav>
-    <!-- Slides -->
-    <section class="slide title-slide">
-        <h1 class="reveal">Presentation Title</h1>
-        <p class="reveal">Subtitle or author</p>
-    </section>
-    <section class="slide">
-        <h2 class="reveal">Slide Title</h2>
-        <p class="reveal">Content...</p>
-    </section>
-    <!-- More slides... -->
-    <script>
-        /* ===========================================
-           SLIDE PRESENTATION CONTROLLER
-           Handles navigation, animations, and interactions
-           =========================================== */
-        class SlidePresentation {
-            constructor() {
-                // ... initialization
-            }
-            // ... methods
-        }
-        // Initialize
-        new SlidePresentation();
-    </script>
-</body>
-</html>
-```
+### Mode C: Modification Rules
-### Required JavaScript Features
-Every presentation should include:
-1. **SlidePresentation Class** — Main controller
-   - Keyboard navigation (arrows, space)
-   - Touch/swipe support
-   - Mouse wheel navigation
-   - Progress bar updates
-   - Navigation dots
-2. **Intersection Observer** — For scroll-triggered animations
-   - Add `.visible` class when slides enter viewport
-   - Trigger CSS animations efficiently
-3. **Optional Enhancements** (based on style):
-   - Custom cursor with trail
-   - Particle system background (canvas)
-   - Parallax effects
-   - 3D tilt on hover
-   - Magnetic buttons
-   - Counter animations
-### Code Quality Requirements
-**Comments:**
-Every section should have clear comments explaining:
-- What it does
-- Why it exists
-- How to modify it
-```javascript
-/* ===========================================
-   CUSTOM CURSOR
-   Creates a stylized cursor that follows mouse with a trail effect.
-   - Uses lerp (linear interpolation) for smooth movement
-   - Grows larger when hovering over interactive elements
-   =========================================== */
-class CustomCursor {
-    constructor() {
-        // ...
-    }
-}
-```
+When enhancing existing presentations, viewport fitting is the biggest risk:
-**Accessibility:**
-- Semantic HTML (`<section>`, `<nav>`, `<main>`)
-- Keyboard navigation works
-- ARIA labels where needed
-- Reduced motion support
-```css
-@media (prefers-reduced-motion: reduce) {
-    .reveal {
-        transition: opacity 0.3s ease;
-        transform: none;
-    }
-}
-```
+1. **Before adding content:** Count existing elements, check against density limits
+2. **Adding images:** Must have `max-height: min(50vh, 400px)`. If slide already has max content, split into two slides
+3. **Adding text:** Max 4-6 bullets per slide. Exceeds limits? Split into continuation slides
+4. **After ANY modification, verify:** `.slide` has `overflow: hidden`, new elements use `clamp()`, images have viewport-relative max-height, content fits at 1280x720
+5. **Proactively reorganize:** If modifications will cause overflow, automatically split content and inform the user. Don't wait to be asked
-**Responsive:**
-- Mobile-friendly (single column, adjusted spacing)
-- Disable heavy effects on mobile
-- Touch-friendly interactions
-```css
-@media (max-width: 768px) {
-    .nav-dots,
-    .keyboard-hint {
-        display: none;
-    }
-}
-```
+**When adding images to existing slides:** Move image to new slide or reduce other content first. Never add images without checking if existing content already fills the viewport.
 ---
-## Phase 4: PPT Conversion
-When converting PowerPoint files:
+## Phase 1: Content Discovery (New Presentations)
-### Step 4.1: Extract Content
-Use Python with `python-pptx` to extract:
-```python
-from pptx import Presentation
-from pptx.util import Inches, Pt
-import json
-import os
-import base64
-def extract_pptx(file_path, output_dir):
-    """
-    Extract all content from a PowerPoint file.
-    Returns a JSON structure with slides, text, and images.
-    """
-    prs = Presentation(file_path)
-    slides_data = []
-    # Create assets directory
-    assets_dir = os.path.join(output_dir, 'assets')
-    os.makedirs(assets_dir, exist_ok=True)
-    for slide_num, slide in enumerate(prs.slides):
-        slide_data = {
-            'number': slide_num + 1,
-            'title': '',
-            'content': [],
-            'images': [],
-            'notes': ''
-        }
-        for shape in slide.shapes:
-            # Extract title
-            if shape.has_text_frame:
-                if shape == slide.shapes.title:
-                    slide_data['title'] = shape.text
-                else:
-                    slide_data['content'].append({
-                        'type': 'text',
-                        'content': shape.text
-                    })
-            # Extract images
-            if shape.shape_type == 13:  # Picture
-                image = shape.image
-                image_bytes = image.blob
-                image_ext = image.ext
-                image_name = f"slide{slide_num + 1}_img{len(slide_data['images']) + 1}.{image_ext}"
-                image_path = os.path.join(assets_dir, image_name)
-                with open(image_path, 'wb') as f:
-                    f.write(image_bytes)
-                slide_data['images'].append({
-                    'path': f"assets/{image_name}",
-                    'width': shape.width,
-                    'height': shape.height
-                })
-        # Extract notes
-        if slide.has_notes_slide:
-            notes_frame = slide.notes_slide.notes_text_frame
-            slide_data['notes'] = notes_frame.text
-        slides_data.append(slide_data)
-    return slides_data
-```
+**Ask ALL questions in a single AskUserQuestion call** so the user fills everything out at once:
-### Step 4.2: Confirm Content Structure
+**Question 1 — Purpose** (header: "Purpose"):
+What is this presentation for? Options: Pitch deck / Teaching-Tutorial / Conference talk / Internal presentation
-Present the extracted content to the user:
+**Question 2 — Length** (header: "Length"):
+Approximately how many slides? Options: Short 5-10 / Medium 10-20 / Long 20+
-```
-I've extracted the following from your PowerPoint:
+**Question 3 — Content** (header: "Content"):
+Do you have content ready? Options: All content ready / Rough notes / Topic only
-**Slide 1: [Title]**
-- [Content summary]
-- Images: [count]
+**Question 4 — Inline Editing** (header: "Editing"):
+Do you need to edit text directly in the browser after generation? Options:
-**Slide 2: [Title]**
-- [Content summary]
-- Images: [count]
+- "Yes (Recommended)" — Can edit text in-browser, auto-save to localStorage, export file
+- "No" — Presentation only, keeps file smaller
-...
+**Remember the user's editing choice — it determines whether edit-related code is included in Phase 3.**
-All images have been saved to the assets folder.
+If user has content, ask them to share it.
-Does this look correct? Should I proceed with style selection?
-```
+### Step 1.2: Image Evaluation (if images provided)
-### Step 4.3: Style Selection
+If user selected "No images" → skip to Phase 2.
-Proceed to Phase 2 (Style Discovery) with the extracted content in mind.
+If user provides an image folder:
-### Step 4.4: Generate HTML
+1. **Scan** — List all image files (.png, .jpg, .svg, .webp, etc.)
+2. **View each image** — Use the Read tool (Claude is multimodal)
+3. **Evaluate** — For each: what it shows, USABLE or NOT USABLE (with reason), what concept it represents, dominant colors
+4. **Co-design the outline** — Curated images inform slide structure alongside text. This is NOT "plan slides then add images" — design around both from the start (e.g., 3 screenshots → 3 feature slides, 1 logo → title/closing slide)
+5. **Confirm via AskUserQuestion** (header: "Outline"): "Does this slide outline and image selection look right?" Options: Looks good / Adjust images / Adjust outline
-Convert the extracted content into the chosen style, preserving:
-- All text content
-- All images (referenced from assets folder)
-- Slide order
-- Any speaker notes (as HTML comments or separate file)
+**Logo in previews:** If a usable logo was identified, embed it (base64) into each style preview in Phase 2 — the user sees their brand styled three different ways.
 ---
-## Phase 5: Delivery
+## Phase 2: Style Discovery
-### Final Output
+**This is the "show, don't tell" phase.** Most people can't articulate design preferences in words.
-When the presentation is complete:
+### Step 2.0: Style Path
-1. **Clean up temporary files**
-   - Delete `.claude-design/slide-previews/` if it exists
+Ask how they want to choose (header: "Style"):
-2. **Open the presentation**
-   - Use `open [filename].html` to launch in browser
+- "Show me options" (recommended) — Generate 3 previews based on mood
+- "I know what I want" — Pick from preset list directly
-3. **Provide summary**
-```
-Your presentation is ready!
+**If direct selection:** Show preset picker and skip to Phase 3. Available presets are defined in [STYLE_PRESETS.md](STYLE_PRESETS.md).
-📁 File: [filename].html
-🎨 Style: [Style Name]
-📊 Slides: [count]
+### Step 2.1: Mood Selection (Guided Discovery)
-**Navigation:**
-- Arrow keys (← →) or Space to navigate
-- Scroll/swipe also works
-- Click the dots on the right to jump to a slide
+Ask (header: "Vibe", multiSelect: true, max 2):
+What feeling should the audience have? Options:
-**To customize:**
-- Colors: Look for `:root` CSS variables at the top
-- Fonts: Change the Fontshare/Google Fonts link
-- Animations: Modify `.reveal` class timings
+- Impressed/Confident — Professional, trustworthy
+- Excited/Energized — Innovative, bold
+- Calm/Focused — Clear, thoughtful
+- Inspired/Moved — Emotional, memorable
-Would you like me to make any adjustments?
-```
+### Step 2.2: Generate 3 Style Previews
----
+Based on mood, generate 3 distinct single-slide HTML previews showing typography, colors, animation, and overall aesthetic. Read [STYLE_PRESETS.md](STYLE_PRESETS.md) for available presets and their specifications.
-## Style Reference: Effect → Feeling Mapping
-Use this guide to match animations to intended feelings:
-### Dramatic / Cinematic
-- Slow fade-ins (1-1.5s)
-- Large scale transitions (0.9 → 1)
-- Dark backgrounds with spotlight effects
-- Parallax scrolling
-- Full-bleed images
-### Techy / Futuristic
-- Neon glow effects (box-shadow with accent color)
-- Particle systems (canvas background)
-- Grid patterns
-- Monospace fonts for accents
-- Glitch or scramble text effects
-- Cyan, magenta, electric blue palette
-### Playful / Friendly
-- Bouncy easing (spring physics)
-- Rounded corners (large radius)
-- Pastel or bright colors
-- Floating/bobbing animations
-- Hand-drawn or illustrated elements
-### Professional / Corporate
-- Subtle, fast animations (200-300ms)
-- Clean sans-serif fonts
-- Navy, slate, or charcoal backgrounds
-- Precise spacing and alignment
-- Minimal decorative elements
-- Data visualization focus
-### Calm / Minimal
-- Very slow, subtle motion
-- High whitespace
-- Muted color palette
-- Serif typography
-- Generous padding
-- Content-focused, no distractions
-### Editorial / Magazine
-- Strong typography hierarchy
-- Pull quotes and callouts
-- Image-text interplay
-- Grid-breaking layouts
-- Serif headlines, sans-serif body
-- Black and white with one accent
+| Mood                | Suggested 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 |
----
+Save previews to `.claude-design/slide-previews/` (style-a.html, style-b.html, style-c.html). Each should be self-contained, ~50-100 lines, showing one animated title slide.
-## Animation Patterns Reference
-### Entrance Animations
-```css
-/* Fade + Slide Up (most common) */
-.reveal {
-    opacity: 0;
-    transform: translateY(30px);
-    transition: opacity 0.6s var(--ease-out-expo),
-                transform 0.6s var(--ease-out-expo);
-}
-.visible .reveal {
-    opacity: 1;
-    transform: translateY(0);
-}
-/* Scale In */
-.reveal-scale {
-    opacity: 0;
-    transform: scale(0.9);
-    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
-}
-/* Slide from Left */
-.reveal-left {
-    opacity: 0;
-    transform: translateX(-50px);
-    transition: opacity 0.6s, transform 0.6s var(--ease-out-expo);
-}
-/* Blur In */
-.reveal-blur {
-    opacity: 0;
-    filter: blur(10px);
-    transition: opacity 0.8s, filter 0.8s var(--ease-out-expo);
-}
-```
+Open each preview automatically for the user.
-### Background Effects
-```css
-/* Gradient Mesh */
-.gradient-bg {
-    background:
-        radial-gradient(ellipse at 20% 80%, rgba(120, 0, 255, 0.3) 0%, transparent 50%),
-        radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.2) 0%, transparent 50%),
-        var(--bg-primary);
-}
-/* Noise Texture */
-.noise-bg {
-    background-image: url("data:image/svg+xml,..."); /* Inline SVG noise */
-}
-/* Grid Pattern */
-.grid-bg {
-    background-image:
-        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
-    background-size: 50px 50px;
-}
-```
+### Step 2.3: User Picks
-### Interactive Effects
-```javascript
-/* 3D Tilt on Hover */
-class TiltEffect {
-    constructor(element) {
-        this.element = element;
-        this.element.style.transformStyle = 'preserve-3d';
-        this.element.style.perspective = '1000px';
-        this.bindEvents();
-    }
-    bindEvents() {
-        this.element.addEventListener('mousemove', (e) => {
-            const rect = this.element.getBoundingClientRect();
-            const x = (e.clientX - rect.left) / rect.width - 0.5;
-            const y = (e.clientY - rect.top) / rect.height - 0.5;
-            this.element.style.transform = `
-                rotateY(${x * 10}deg)
-                rotateX(${-y * 10}deg)
-            `;
-        });
-        this.element.addEventListener('mouseleave', () => {
-            this.element.style.transform = 'rotateY(0) rotateX(0)';
-        });
-    }
-}
-```
+Ask (header: "Style"):
+Which style preview do you prefer? Options: Style A: [Name] / Style B: [Name] / Style C: [Name] / Mix elements
+If "Mix elements", ask for specifics.
 ---
-## Troubleshooting
+## Phase 3: Generate Presentation
-### Common Issues
+Generate the full presentation using content from Phase 1 (text, or text + curated images) and style from Phase 2.
-**Fonts not loading:**
-- Check Fontshare/Google Fonts URL
-- Ensure font names match in CSS
+If images were provided, the slide outline already incorporates them from Step 1.2. If not, CSS-generated visuals (gradients, shapes, patterns) provide visual interest — this is a fully supported first-class path.
-**Animations not triggering:**
-- Verify Intersection Observer is running
-- Check that `.visible` class is being added
+**Before generating, read these supporting files:**
-**Scroll snap not working:**
-- Ensure `scroll-snap-type` on html/body
-- Each slide needs `scroll-snap-align: start`
+- [html-template.md](html-template.md) — HTML architecture and JS features
+- [viewport-base.css](viewport-base.css) — Mandatory CSS (include in full)
+- [animation-patterns.md](animation-patterns.md) — Animation reference for the chosen feeling
-**Mobile issues:**
-- Disable heavy effects at 768px breakpoint
-- Test touch events
-- Reduce particle count or disable canvas
+**Key requirements:**
-**Performance issues:**
-- Use `will-change` sparingly
-- Prefer `transform` and `opacity` animations
-- Throttle scroll/mousemove handlers
+- Single self-contained HTML file, all CSS/JS inline
+- Include the FULL contents of viewport-base.css in the `<style>` block
+- Use fonts from Fontshare or Google Fonts — never system fonts
+- Add detailed comments explaining each section
+- Every section needs a clear `/* === SECTION NAME === */` comment block
 ---
-## Related Skills
+## Phase 4: PPT Conversion
+When converting PowerPoint files:
-- **learn** — Generate FORZARA.md documentation for the presentation
-- **frontend-design** — For more complex interactive pages beyond slides
-- **design-and-refine:design-lab** — For iterating on component designs
+1. **Extract content** — Run `python scripts/extract-pptx.py <input.pptx> <output_dir>` (install python-pptx if needed: `pip install python-pptx`)
+2. **Confirm with user** — Present extracted slide titles, content summaries, and image counts
+3. **Style selection** — Proceed to Phase 2 for style discovery
+4. **Generate HTML** — Convert to chosen style, preserving all text, images (from assets/), slide order, and speaker notes (as HTML comments)
 ---
-## Example Session Flow
+## Phase 5: Delivery
-1. User: "I want to create a pitch deck for my AI startup"
-2. Skill asks about purpose, length, content
-3. User shares their bullet points and key messages
-4. Skill asks about desired feeling (Impressed + Excited)
-5. Skill generates 3 style previews
-6. User picks Style B (Neon Cyber), asks for darker background
-7. Skill generates full presentation with all slides
-8. Skill opens the presentation in browser
-9. User requests tweaks to specific slides
-10. Final presentation delivered
+1. **Clean up** — Delete `.claude-design/slide-previews/` if it exists
+2. **Open** — Use `open [filename].html` to launch in browser
+3. **Summarize** — Tell the user:
+   - File location, style name, slide count
+   - Navigation: Arrow keys, Space, scroll/swipe, click nav dots
+   - How to customize: `:root` CSS variables for colors, font link for typography, `.reveal` class for animations
+   - If inline editing was enabled: Hover top-left corner or press E to enter edit mode, click any text to edit, Ctrl+S to save
 ---
-## Conversion Session Flow
-1. User: "Convert my slides.pptx to a web presentation"
-2. Skill extracts content and images from PPT
-3. Skill confirms extracted content with user
-4. Skill asks about desired feeling/style
-5. Skill generates style previews
-6. User picks a style
-7. Skill generates HTML presentation with preserved assets
-8. Final presentation delivered
+## Supporting Files
+| File                                               | Purpose                                                              | When to Read              |
+| -------------------------------------------------- | -------------------------------------------------------------------- | ------------------------- |
+| [STYLE_PRESETS.md](STYLE_PRESETS.md)               | 12 curated visual presets with colors, fonts, and signature elements | Phase 2 (style selection) |
+| [viewport-base.css](viewport-base.css)             | Mandatory responsive CSS — copy into every presentation              | Phase 3 (generation)      |
+| [html-template.md](html-template.md)               | HTML structure, JS features, code quality standards                  | Phase 3 (generation)      |
+| [animation-patterns.md](animation-patterns.md)     | CSS/JS animation snippets and effect-to-feeling guide                | Phase 3 (generation)      |
+| [scripts/extract-pptx.py](scripts/extract-pptx.py) | Python script for PPT content extraction                             | Phase 4 (conversion)      |
 ---
-## 🧠 AGI Framework Integration
+<!-- AGI-INTEGRATION-START -->
+## AGI Framework Integration
 > **Adapted for [@techwavedev/agi-agent-kit](https://www.npmjs.com/package/@techwavedev/agi-agent-kit)**
 > Original source: [antigravity-awesome-skills](https://github.com/sickn33/antigravity-awesome-skills)
-### Hybrid Memory Integration (Qdrant + BM25)
+### Memory-First Protocol
+Retrieve prior design decisions (color palettes, typography, spacing scales) to maintain visual consistency across sessions. Cache generated design tokens.
-Before executing complex tasks with this skill:
 ```bash
-python3 execution/memory_manager.py auto --query "<task summary>"
+# Check for prior frontend/design context before starting
+python3 execution/memory_manager.py auto --query "design system decisions and component patterns for Frontend Slides"
 ```
-**Decision Tree:**
-- **Cache hit?** Use cached response directly — no need to re-process.
-- **Memory match?** Inject `context_chunks` into your reasoning.
-- **No match?** Proceed normally, then store results:
+### Storing Results
+After completing work, store frontend/design decisions for future sessions:
 ```bash
 python3 execution/memory_manager.py store \
-  --content "Description of what was decided/solved" \
-  --type decision \
-  --tags frontend-slides <relevant-tags>
+  --content "Design system: adopted 8px grid, Inter font family, HSL color tokens with dark mode support" \
+  --type decision --project <project> \
+  --tags frontend-slides frontend
 ```
-> **Note:** Storing automatically updates both Vector (Qdrant) and Keyword (BM25) indices.
+### Multi-Agent Collaboration
+Share design decisions with backend agents (API contract changes) and QA agents (visual regression baselines).
-### Agent Team Collaboration
+```bash
+python3 execution/cross_agent_context.py store \
+  --agent "<your-agent>" \
+  --action "Implemented UI components — new design system with accessibility compliance (WCAG 2.1 AA)" \
+  --project <project>
+```
-- **Strategy**: This skill communicates via the shared memory system.
-- **Orchestration**: Invoked by `orchestrator` via intelligent routing.
-- **Context Sharing**: Always read previous agent outputs from memory before starting.
+### Design Memory Persistence
-### Local LLM Support
+Store design system tokens and component decisions in Qdrant so any agent on any platform (Claude, Gemini, Cursor) can retrieve and apply consistent styling.
-When available, use local Ollama models for embedding and lightweight inference:
-- Embeddings: `nomic-embed-text` via Qdrant memory system
-- Lightweight analysis: Local models reduce API costs for repetitive patterns
+<!-- AGI-INTEGRATION-END -->