--- name: create-presentation description: Wenn der user eine Präsentation erstellen will --- --- name: html-presentation description: "Build stunning HTML presentations as shareable artifacts. Use this skill when a user wants to create a presentation, pitch deck, slide deck, or any visual slide-based content. Outputs a single self-contained HTML file with embedded CSS and JS that works as a standalone presentation. Supports slide navigation, animations, custom branding, embedded SVG graphics, charts, and responsive design." --- # HTML Presentation Skill Build beautiful, self-contained HTML presentations that can be shared as artifacts, opened in any browser, or embedded anywhere. No PowerPoint, no Canva, no external dependencies. ## When To Use This Skill - User wants to create a presentation, deck, or slides - User wants a shareable, browser-based presentation - User asks for an artifact-style presentation - User wants a pitch deck, keynote, workshop slides, or any slide-based content ## The Process: Think First, Build Second Every great presentation follows this flow: ### Phase 1: Gather Context (ASK THE USER) Before writing a single line of code, collect the following from the user. Ask conversationally – don't dump all questions at once. Prioritize what's missing. **Required:** 1. **Topic/Purpose** – What is this presentation about? What's the goal? 2. **Audience** – Who will see this? (Clients, team, investors, community, public?) 3. **Key Messages** – What are the 3-5 things the audience MUST take away? 4. **Slide Count** – How many slides? (Default: 8-12 for a solid deck) **Branding (ask if not provided):** 5. **Company/Brand Name** – Who is presenting? 6. **Primary Color** – Main brand color (hex code or description like "dark navy") 7. **Secondary Color** – Accent color 8. **Font Preference** – Any specific fonts? (Will use Google Fonts) 9. **Logo** – SVG code, URL, or description (can create a text-based logo if none provided) 10. **Tone/Vibe** – Professional, casual, bold, minimal, techy, playful? **Optional Extras:** 11. **Specific data/stats** to include 12. **Specific slides** they already have in mind 13. **Reference presentations** they like the style of If the user just says "build me a presentation about X" without details, ask for at minimum: audience, key messages, and brand colors before proceeding. ### Phase 2: Outline & Structure Before building, present a slide-by-slide outline to the user: ``` Slide 1: Title Slide – [Headline] + [Subtitle] Slide 2: Problem/Context – [What we're addressing] Slide 3: Key Point 1 – [...] Slide 4: Key Point 2 – [...] ... Slide N: CTA / Closing – [What's the next step?] ``` Get user approval or iterate on the structure BEFORE coding. This saves massive time. ### Phase 3: Build The Presentation Generate a single, self-contained HTML file with everything embedded. ### Phase 4: Review & Iterate Show the user the result. Ask: "What do you want to change?" Iterate until it's right. --- ## Technical Specification ### Output Format One single `.html` file containing: - All CSS inline in a `
``` ### Slide Types & When To Use Them | Slide Type | Class | Use For | |-----------|-------|---------| | **Title** | `.slide-title` | Opening slide, section breaks | | **Split** | `.slide-split` | Content + visual side by side | | **Grid/Cards** | Use `.card-grid` | Features, benefits, team, comparisons | | **Big Number** | Use `.stat-number` | Key stats, metrics, impact numbers | | **Quote** | Use `.quote` | Testimonials, key insights | | **Full Visual** | Custom with background SVG/image | Hero moments, transitions | | **CTA/Closing** | `.slide-title` variant | Final slide, next steps | ### Visual Elements **Prefer SVG graphics over images.** Claude can generate: - Icons and illustrations as inline SVG - Charts and data visualizations as SVG - Abstract background shapes and patterns - Diagrams, flowcharts, and architecture visuals - Logo recreations as SVG **When creating SVGs:** - Keep them clean and minimal - Use the brand colors from CSS variables - Add subtle animations where appropriate (CSS `@keyframes`) - Size them responsively using `viewBox` and percentage widths **Background techniques:** - Gradient meshes using CSS gradients - Subtle pattern overlays using repeating SVG - Glassmorphism effects with `backdrop-filter: blur()` - Noise/grain texture using SVG `` with `feTurbulence` ### Design Rules 1. **Dark backgrounds are default.** They look better on screen, in artifacts, and in presentations. Use light slides only for contrast or specific brand requirements. 2. **One visual per slide minimum.** Every slide needs at least one non-text element: SVG graphic, chart, icon set, background shape, or decorative element. 3. **Max 6 lines of text per slide.** If you need more, split into two slides. Presentations are visual, not documents. 4. **Vary layouts across slides.** Never use the same layout twice in a row. Alternate between split, grid, full-width, centered. 5. **Use the animate class.** Add `class="animate"` to elements that should fade in with stagger. Makes the deck feel polished. 6. **Typography hierarchy is king.** Big headlines (900 weight), medium subheads (600), light body text (300). The contrast creates visual rhythm. 7. **Whitespace > More Content.** Let slides breathe. Generous padding. Don't fill every pixel. 8. **Brand consistency.** Use CSS variables for ALL colors. Never hardcode hex values in slide HTML. This makes rebranding trivial. --- ## Generating a Personalized Skill If the user wants to create their own branded version of this skill (recommended for teams that build presentations regularly), guide them through this process: ### Step 1: Collect Brand Details Ask the user: - Company name - Primary, secondary, and accent colors (hex codes) - Preferred heading font and body font (Google Fonts) - Logo (SVG, or create a text logo) - Default tone (e.g., "bold and techy" or "clean and minimal") - Any specific visual motifs they use (gradients, geometric shapes, etc.) - Default slide count preference - Any recurring content patterns (always have a CTA slide, always include company intro, etc.) ### Step 2: Generate The Customized Skill Take this generic skill template and create a personalized version where: - The CSS variables are pre-filled with their brand colors - The font imports are pre-configured - The default tone/style is baked into the instructions - Logo SVG is embedded as a reusable component - Any company-specific slide templates are included - The "Ask User" phase is shortened since brand context is already known ### Step 3: Save & Deliver Output the customized SKILL.md file that the user can drop into their Claude Projects or skills folder. --- ## Example Slide HTML Patterns ### Title Slide ```html

Presentation Title

Subtitle or tagline goes here

``` ### Split Layout with SVG Visual ```html

Section Label

Main Headline For This Slide

Supporting text that explains the key point. Keep it concise and impactful.

``` ### Grid Cards ```html

Section Title

Card Title

Card description text.

``` ### Big Stat ```html
73%

Of companies still don't use AI effectively

Source: McKinsey Digital Report 2025

``` --- ## Keyboard Shortcuts (Built In) | Key | Action | |-----|--------| | `→` or `Space` | Next slide | | `←` | Previous slide | | `Escape` | Go to first slide | | Swipe left/right | Next/previous (touch devices) | --- ## Quality Checklist Before delivering the presentation, verify: - [ ] All slides use CSS variables for colors (no hardcoded hex in HTML) - [ ] Every slide has at least one visual element - [ ] No slide has more than 6 lines of body text - [ ] Layouts vary across slides (no two consecutive same-layout) - [ ] Animations use the `.animate` class with stagger - [ ] Typography hierarchy is consistent (h1 > h2 > h3 > p) - [ ] Navigation works (arrows, keyboard, touch) - [ ] Progress bar updates correctly - [ ] File is fully self-contained (no external deps except Google Fonts) - [ ] Looks good at 1920x1080 (standard presentation resolution) - [ ] Brand colors and fonts match user requirements