presentation-stylelisted
Install: claude install-skill imamirezaei/Product-Team-Claude-Skills
# Presentation Style Skill
Generate polished, single-file HTML slide-deck presentations following a precise design system.
## Before You Start
**Read the design system reference first:**
Open and read `references/design-system.md` (in the same directory as this SKILL.md) before writing any HTML. It contains the complete color palette, typography scale, component library, and composition patterns. Do not rely on memory — re-read it every time.
## Output Format
- Single `.html` file
- Self-contained (all CSS in `<style>` within `<head>`, no external dependencies)
- Each slide is a `<div class="slide">` with `min-height: 100vh`
- Slides are stacked vertically (scroll-based, not paginated)
- Save to `/mnt/user-data/outputs/` and present via `present_files`
## Slide Deck Structure
Every presentation follows this structure:
### Slide 1 — Title Slide
- Dark blue background (`--blue-900`), all text white
- Top-left: small uppercase label with team/org name and year
- Center: main title as `h1` at 52px, max-width 700px
- Below title: one-sentence description at 18px, reduced opacity
- Bottom: row of 3–5 key stats (number + label), separated by thin vertical dividers
- This slide sets the emotional tone — keep it clean, keep it confident
### Slide 2 — Context / Problem
- White background
- Slide label (e.g., "Context", "Background")
- Use a `grid-2` of `.card` elements for pain points or observations
- Each card: coral-colored uppercase category label → h3 title → short body