import type { DesignSkill } from "./design-skill.js";
export const slideDeck: DesignSkill = {
name: "slide-deck",
scenario: "marketing",
description:
"Presentation slide deck as a single HTML file. Fixed 16:9 canvas with keyboard navigation, slide counter, and print-to-PDF support.",
outputKind: "slides",
workflow: `# Slide Deck Skill
Produce a presentation deck as a single HTML file. 16:9 ratio (1920×1080), keyboard navigation, slide counter.
## Phase 0 — Pre-flight
1. Read the design system for color tokens.
2. Determine: deck title, audience, number of slides, tone (pitch, educational, report).
3. Vocalize the plan: "I'll create a [N]-slide deck: [slide titles in order]."
## Phase 1 — Framework Skeleton
Create \`deck.html\` with this exact framework. The scaling/navigation JS is load-bearing — copy it verbatim.
\`\`\`html
Deck Title
1 / N
\`\`\`
## Phase 2 — Slide Layouts
Each slide is a \`.slide\` div with \`.active\` on the first. Tag slides with \`data-slide="N"\`.
### Title Slide
\`\`\`html
Company · Date
Deck Title
One-line subtitle
\`\`\`
Style: centered content, 80px headline, dark background with design-system colors.
### Text-Only Slide
\`\`\`html
Section Title
Bullet point one — keep it short, 8-12 words
Bullet point two
Bullet point three
\`\`\`
### Two-Column Slide
\`\`\`html
Left Heading
Descriptive text. 20-40 words.
[chart, image, or code block]
\`\`\`
### Metrics Slide
\`\`\`html
Key Results
85%Metric name
\`\`\`
### Closing Slide
\`\`\`html
Thank You
contact@company.com
\`\`\`
## Phase 3 — Slide Styles
\`\`\`css
.slide-content { width: 100%; height: 100%; padding: 80px 120px; display: flex; flex-direction: column; justify-content: center; }
.title-slide { align-items: center; text-align: center; background: var(--color-bg-primary); }
.title-slide h1 { font-size: 80px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.slide-label { font-size: 20px; color: var(--color-text-secondary); margin-bottom: 24px; }
.slide-subtitle { font-size: 28px; color: var(--color-text-secondary); margin-top: 16px; }
.text-slide h2 { font-size: 48px; font-weight: 700; margin-bottom: 40px; }
.text-slide ul { font-size: 28px; line-height: 1.8; }
.text-slide li { margin-bottom: 12px; color: var(--color-text-secondary); }
.text-slide li::marker { color: var(--color-accent); }
.two-col { flex-direction: row; gap: 80px; }
.two-col .col { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.two-col h2 { font-size: 48px; margin-bottom: 24px; }
.two-col p { font-size: 24px; line-height: 1.6; color: var(--color-text-secondary); }
.metrics-slide { align-items: center; justify-content: center; text-align: center; }
.metrics-grid { display: flex; gap: 80px; margin-top: 48px; }
.metric-value { font-size: 72px; font-weight: 800; color: var(--color-accent); display: block; }
.metric-label { font-size: 20px; color: var(--color-text-secondary); margin-top: 8px; display: block; }
.closing { background: var(--color-bg-primary); }
\`\`\`
## Phase 4 — Content Rules for Slides
- Slide text is never smaller than 24px — this is a 16:9 canvas, not a web page
- Headlines: 48-80px, one line preferred
- Body text: 24-28px
- Bullet points: 28px, max 5 per slide, each 6-12 words
- Every slide gets a \`data-slide="N"\` attribute
- Slides are 1-indexed
- Max 12 slides unless the user asks for more
- The closing slide always says "Thank You" with contact info`,
};