Claude Code Deck
Generate a production-ready, 11-slide HTML presentation on Claude Code's five core primitives — targeted at product managers and non-technical audiences.
What This Skill Produces
A single presentation.html file featuring:
- 11 slides covering Claude Code, Skills, Sub Agents, Hooks, Multi-Agent Systems, architecture, PM use cases, and next steps
- Bold Signal style: dark background (#080810), orange accents (#f5a623), geometric diagonal shapes, clean Helvetica typography
- Zero dependencies: fully self-contained, works offline
- Navigation: arrow keys, spacebar, click, swipe — progress bar, slide counter
- Speaker notes: press
N to toggle per-slide notes
Slide Outline
| # |
Title |
Core Insight |
| 1 |
Title |
Ship with Claude Code |
| 2 |
What is Claude Code? |
AI pair programmer in your terminal — reads, edits, runs, ships |
| 3 |
The PM Superpower |
Hours vs. engineering weeks |
| 4 |
Concept 01 — Skills |
Reusable workflows triggered by a slash command |
| 5 |
Skills in Action |
6 real examples from the course |
| 6 |
Concept 02 — Sub Agents |
Delegate to specialist AI workers with isolated context |
| 7 |
Concept 03 — Hooks |
PreToolUse / PostToolUse / Stop / Notification |
| 8 |
Concept 04 — Multi-Agent |
Parallel fleets, scale beyond a single context window |
| 9 |
How It All Fits |
Layered architecture: Multi-Agent → Sub Agents → Skills → Hooks |
| 10 |
What PMs Are Building |
4 real course builds with time-to-ship |
| 11 |
Your Next 3 Steps |
Install → run a skill → build a multi-agent workflow |
Instructions
- Copy the full HTML from
presentation.html in the repo root (or regenerate it using the template below).
- Save as
presentation.html in the working directory.
- Open with
open presentation.html or deploy to Vercel:mkdir -p /tmp/claude-deck
cp presentation.html /tmp/claude-deck/index.html
cd /tmp/claude-deck && vercel deploy --yes
- Share the Vercel URL. The deck is live in under 60 seconds.
Regeneration Template
If the user wants to rebuild or customise the deck, use frontend-slides skill with these parameters:
- Topic: Claude Code — Skills, Sub Agents, Hooks, Multi-Agent Systems
- Audience: Product managers and non-engineers
- Slides: 11
- Style: Bold Signal (dark bg #080810, orange accent #f5a623, diagonal geometric shapes, Helvetica)
- Vibe: Impressed / Confident
Follow the slide outline above as the content structure. Every slide must:
- Have a one-insight headline (not a topic label)
- Fit entirely within
100vh — no scrolling
- Use
clamp() for all font sizes
- Include speaker notes in
data-notes attribute
Bold Signal Design Reference
/* Core palette */
--bg: #080810;
--accent: #f5a623;
--accent2: #f04e23;
--text: #ffffff;
--muted: rgba(255,255,255,0.5);
/* Background shape (right diagonal) */
position: absolute; top: -25%; right: -8%; width: 52%; height: 140%;
background: linear-gradient(145deg, #f5a623, #f04e23);
clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 0% 100%);
opacity: 0.09;
/* Typography */
h1: clamp(2.4rem, 5.5vw, 5.2rem) — weight 900 — tracking -0.035em
h2: clamp(1.6rem, 3vw, 2.8rem) — weight 800 — tracking -0.025em
body: clamp(0.9rem, 1.5vw, 1.15rem) — weight 300 — muted white
kicker: clamp(0.55rem, 1vw, 0.75rem) — all-caps — letter-spacing 0.32em — orange
Live Demo
Deployed at: https://claude-deck.vercel.app
1---2name: claude-code-deck3description: Generate a complete, ready-to-share HTML presentation explaining Claude Code, Skills, Sub Agents, Hooks, and Multi-Agent Systems — designed for product managers. Outputs a single zero-dependency HTML file in Bold Signal style (dark, orange accents). Use when someone wants a polished explainer deck for Claude Code concepts.4---56# Claude Code Deck78Generate a production-ready, 11-slide HTML presentation on Claude Code's five core primitives — targeted at product managers and non-technical audiences.910## What This Skill Produces1112A single `presentation.html` file featuring:13- **11 slides** covering Claude Code, Skills, Sub Agents, Hooks, Multi-Agent Systems, architecture, PM use cases, and next steps14- **Bold Signal style**: dark background (#080810), orange accents (#f5a623), geometric diagonal shapes, clean Helvetica typography15- **Zero dependencies**: fully self-contained, works offline16- **Navigation**: arrow keys, spacebar, click, swipe — progress bar, slide counter17- **Speaker notes**: press `N` to toggle per-slide notes1819---2021## Slide Outline2223| # | Title | Core Insight |24|---|---|---|25| 1 | Title | Ship with Claude Code |26| 2 | What is Claude Code? | AI pair programmer in your terminal — reads, edits, runs, ships |27| 3 | The PM Superpower | Hours vs. engineering weeks |28| 4 | Concept 01 — Skills | Reusable workflows triggered by a slash command |29| 5 | Skills in Action | 6 real examples from the course |30| 6 | Concept 02 — Sub Agents | Delegate to specialist AI workers with isolated context |31| 7 | Concept 03 — Hooks | PreToolUse / PostToolUse / Stop / Notification |32| 8 | Concept 04 — Multi-Agent | Parallel fleets, scale beyond a single context window |33| 9 | How It All Fits | Layered architecture: Multi-Agent → Sub Agents → Skills → Hooks |34| 10 | What PMs Are Building | 4 real course builds with time-to-ship |35| 11 | Your Next 3 Steps | Install → run a skill → build a multi-agent workflow |3637---3839## Instructions40411. Copy the full HTML from `presentation.html` in the repo root (or regenerate it using the template below).422. Save as `presentation.html` in the working directory.433. Open with `open presentation.html` or deploy to Vercel:44 ```bash45 mkdir -p /tmp/claude-deck46 cp presentation.html /tmp/claude-deck/index.html47 cd /tmp/claude-deck && vercel deploy --yes48 ```494. Share the Vercel URL. The deck is live in under 60 seconds.5051---5253## Regeneration Template5455If the user wants to rebuild or customise the deck, use `frontend-slides` skill with these parameters:5657- **Topic**: Claude Code — Skills, Sub Agents, Hooks, Multi-Agent Systems58- **Audience**: Product managers and non-engineers59- **Slides**: 1160- **Style**: Bold Signal (dark bg #080810, orange accent #f5a623, diagonal geometric shapes, Helvetica)61- **Vibe**: Impressed / Confident6263Follow the slide outline above as the content structure. Every slide must:64- Have a **one-insight headline** (not a topic label)65- Fit entirely within `100vh` — no scrolling66- Use `clamp()` for all font sizes67- Include speaker notes in `data-notes` attribute6869---7071## Bold Signal Design Reference7273```css74/* Core palette */75--bg: #080810;76--accent: #f5a623;77--accent2: #f04e23;78--text: #ffffff;79--muted: rgba(255,255,255,0.5);8081/* Background shape (right diagonal) */82position: absolute; top: -25%; right: -8%; width: 52%; height: 140%;83background: linear-gradient(145deg, #f5a623, #f04e23);84clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 0% 100%);85opacity: 0.09;8687/* Typography */88h1: clamp(2.4rem, 5.5vw, 5.2rem) — weight 900 — tracking -0.035em89h2: clamp(1.6rem, 3vw, 2.8rem) — weight 800 — tracking -0.025em90body: clamp(0.9rem, 1.5vw, 1.15rem) — weight 300 — muted white91kicker: clamp(0.55rem, 1vw, 0.75rem) — all-caps — letter-spacing 0.32em — orange92```9394---9596## Live Demo9798Deployed at: **https://claude-deck.vercel.app**
hamzafarooq