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 text
- If not a problem slide, use cards with blue or teal labels for neutral context
Slides 3–N — Content Slides
Choose the right components for each slide's purpose. See the Component Selection Guide below.
Final Slide — Summary / Closing
- Background:
var(--bg-sec) (warm off-white)
- Grid of summary cards (what this delivers)
- Optional: row of stat boxes with key numbers
- No call-to-action buttons — this style is informational, not promotional
Component Selection Guide
Match your content type to the right component:
| Content Type |
Component(s) to Use |
| Problems, pain points, challenges |
grid-2 of .card with coral labels |
| Architecture, system layers |
Stacked .arch-layer bars with ↕ arrows |
| File/directory structure |
.tree-line with color-highlighted names |
| Feature list, capability grid |
grid-3 or grid-4 of .skill-card |
| Sequential process, setup steps |
.step-row with numbered circles |
| Rules, policies, constraints |
.rule-row with dot markers |
| Commands, key-value pairs |
.cmd-row with mono names |
| File listing with metadata |
.file-row with icon + name + description + pill |
| How things combine |
Horizontal flex of .card with + and = operators |
| Key metrics |
Flex row of .stat boxes |
| Key insight or callout |
Teal callout box with left border |
| Warning or caveat |
Amber callout box with left border |
| Side-by-side comparison |
grid-2 with independent content per column |
| Code snippets |
Dark code block (--gray-800 bg, light text) |
Critical Style Rules
- Never use shadows. No
box-shadow anywhere.
- Never use gradients. All backgrounds are flat colors.
- Never use icons or images. This is a typography-and-structure-only design.
- Never use bold (700). Use medium (500) for headings, normal (400) for body.
- Borders are 0.5px. Not 1px, not 2px. Always
0.5px solid var(--border-med) for cards.
- Colors follow semantic rules. Each color family has a defined purpose — check the reference.
- Max content width is 960px. Never wider than that for the content area.
- Slide padding is always
60px 72px. Never change this.
- All text left-aligned except
.stat-num which is centered.
- Monospace for technical names. File paths, commands, config keys, code use
'SF Mono', 'Fira Code', monospace.
Content & Language
- If the user provides content in Persian, the presentation should be in Persian with
dir="rtl" on the <html> tag
- English technical terms (e.g., API, backend, CLAUDE.md) stay in English even in Persian presentations
- For RTL presentations, flip horizontal layouts:
.arch-layer tag goes left, label goes right
- Keep text concise — this style uses 12–13px body text, so long paragraphs don't work
- Each slide should communicate one idea
Building Process
- Read
references/design-system.md
- Plan the slide sequence (title → context → content slides → summary)
- For each slide, pick components from the Component Selection Guide
- Write the complete HTML with all CSS variables and component classes in
<style>
- Include ALL CSS from the design system reference — do not cherry-pick
- Save to
/mnt/user-data/outputs/presentation.html (or a descriptive name)
- Present via
present_files
Example Slide Label Patterns
Slide labels help orient the viewer. They are small uppercase text above the h2. Examples:
- "Context" — for problem/background slides
- "Layer 1 · Policy" — for system architecture sections
- "Process" — for step-by-step flows
- "Summary" — for closing slides
- Use
· (middle dot) as separator, not - or /
Checklist Before Delivery
1---2name: presentation-style3description: Generate HTML slide-deck presentations with a specific, polished design system. Use this skill whenever the user asks to create a presentation, slide deck, pitch deck, or any multi-slide HTML document. Trigger on phrases like "پرزنتیشن بساز", "presentation", "slide deck", "pitch deck", "اسلاید", "دک", "ارائه بساز", "make a presentation", "create slides", "make me a deck". Also trigger when the user references this design style explicitly, says "with the same presentation style", or asks for "an HTML presentation". Even if the user just says "I need to present X" or "prepare slides for X", use this skill. Do NOT use for PowerPoint (.pptx) files — this skill produces single-file HTML presentations only.4---56# Presentation Style Skill78Generate polished, single-file HTML slide-deck presentations following a precise design system.910## Before You Start1112**Read the design system reference first:**13Open 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.1415## Output Format1617- Single `.html` file18- Self-contained (all CSS in `<style>` within `<head>`, no external dependencies)19- Each slide is a `<div class="slide">` with `min-height: 100vh`20- Slides are stacked vertically (scroll-based, not paginated)21- Save to `/mnt/user-data/outputs/` and present via `present_files`2223## Slide Deck Structure2425Every presentation follows this structure:2627### Slide 1 — Title Slide2829- Dark blue background (`--blue-900`), all text white30- Top-left: small uppercase label with team/org name and year31- Center: main title as `h1` at 52px, max-width 700px32- Below title: one-sentence description at 18px, reduced opacity33- Bottom: row of 3–5 key stats (number + label), separated by thin vertical dividers34- This slide sets the emotional tone — keep it clean, keep it confident3536### Slide 2 — Context / Problem3738- White background39- Slide label (e.g., "Context", "Background")40- Use a `grid-2` of `.card` elements for pain points or observations41- Each card: coral-colored uppercase category label → h3 title → short body text42- If not a problem slide, use cards with blue or teal labels for neutral context4344### Slides 3–N — Content Slides4546Choose the right components for each slide's purpose. See the Component Selection Guide below.4748### Final Slide — Summary / Closing4950- Background: `var(--bg-sec)` (warm off-white)51- Grid of summary cards (what this delivers)52- Optional: row of stat boxes with key numbers53- No call-to-action buttons — this style is informational, not promotional5455## Component Selection Guide5657Match your content type to the right component:5859| Content Type | Component(s) to Use |60| --------------------------------- | ----------------------------------------------------- |61| Problems, pain points, challenges | `grid-2` of `.card` with coral labels |62| Architecture, system layers | Stacked `.arch-layer` bars with `↕` arrows |63| File/directory structure | `.tree-line` with color-highlighted names |64| Feature list, capability grid | `grid-3` or `grid-4` of `.skill-card` |65| Sequential process, setup steps | `.step-row` with numbered circles |66| Rules, policies, constraints | `.rule-row` with dot markers |67| Commands, key-value pairs | `.cmd-row` with mono names |68| File listing with metadata | `.file-row` with icon + name + description + pill |69| How things combine | Horizontal flex of `.card` with `+` and `=` operators |70| Key metrics | Flex row of `.stat` boxes |71| Key insight or callout | Teal callout box with left border |72| Warning or caveat | Amber callout box with left border |73| Side-by-side comparison | `grid-2` with independent content per column |74| Code snippets | Dark code block (`--gray-800` bg, light text) |7576## Critical Style Rules77781. **Never use shadows.** No `box-shadow` anywhere.792. **Never use gradients.** All backgrounds are flat colors.803. **Never use icons or images.** This is a typography-and-structure-only design.814. **Never use bold (700).** Use medium (500) for headings, normal (400) for body.825. **Borders are 0.5px.** Not 1px, not 2px. Always `0.5px solid var(--border-med)` for cards.836. **Colors follow semantic rules.** Each color family has a defined purpose — check the reference.847. **Max content width is 960px.** Never wider than that for the content area.858. **Slide padding is always `60px 72px`.** Never change this.869. **All text left-aligned** except `.stat-num` which is centered.8710. **Monospace for technical names.** File paths, commands, config keys, code use `'SF Mono', 'Fira Code', monospace`.8889## Content & Language9091- If the user provides content in Persian, the presentation should be in Persian with `dir="rtl"` on the `<html>` tag92- English technical terms (e.g., API, backend, CLAUDE.md) stay in English even in Persian presentations93- For RTL presentations, flip horizontal layouts: `.arch-layer` tag goes left, label goes right94- Keep text concise — this style uses 12–13px body text, so long paragraphs don't work95- Each slide should communicate one idea9697## Building Process98991. Read `references/design-system.md`1002. Plan the slide sequence (title → context → content slides → summary)1013. For each slide, pick components from the Component Selection Guide1024. Write the complete HTML with all CSS variables and component classes in `<style>`1035. Include ALL CSS from the design system reference — do not cherry-pick1046. Save to `/mnt/user-data/outputs/presentation.html` (or a descriptive name)1057. Present via `present_files`106107## Example Slide Label Patterns108109Slide labels help orient the viewer. They are small uppercase text above the h2. Examples:110111- "Context" — for problem/background slides112- "Layer 1 · Policy" — for system architecture sections113- "Process" — for step-by-step flows114- "Summary" — for closing slides115- Use `·` (middle dot) as separator, not `-` or `/`116117## Checklist Before Delivery118119- [ ] Title slide has dark blue-900 background with stats at bottom120- [ ] Every slide has a `.slide-label`121- [ ] Color usage follows semantic rules (check reference)122- [ ] No shadows, no gradients, no icons, no images123- [ ] Borders are 0.5px124- [ ] Font weights are 400 and 500 only125- [ ] Monospace used for all technical text126- [ ] Content max-width ≤ 960px127- [ ] Callout boxes use left-border pattern128- [ ] Final slide uses `--bg-sec` background129- [ ] File is self-contained (no external CSS/JS)
imamirezaei