{"id":"5566ed14-fd56-4074-b105-a167b0a75488","shortId":"fmW4sB","kind":"skill","title":"simple-deck","tagline":"Single-file horizontal-swipe HTML deck. Built by copying the seed\n`assets/template.html` (which carries the proven 5-rule iframe nav script)\nand pasting slide layouts from `references/layouts.md`. Pitch decks,\nproduct overviews, study material — when you don't need the magazine\na","description":"# Simple Deck Skill\n\nProduce a single-file horizontal-swipe HTML deck using the seed and layout library.\n\n## Resource map\n\n```\nsimple-deck/\n├── SKILL.md                ← you're reading this\n├── assets/\n│   └── template.html       ← seed: tokens + slide primitives + proven nav script (READ FIRST)\n└── references/\n    ├── layouts.md          ← 8 paste-ready slide layouts + theme-rhythm rules\n    └── checklist.md        ← P0/P1/P2 self-review (rhythm spot-check at bottom)\n```\n\n## Workflow\n\n### Step 0 — Pre-flight\n\n1. **Read `assets/template.html`** end-to-end through the `<style>` block AND the `<script>` block. The script solves five iframe-specific bugs (real scroller detection, dual capture-phase listeners, auto-focus, no `scrollIntoView`, position persistence) — do not rewrite it.\n2. **Read `references/layouts.md`** so you know the 8 layouts. Pay special attention to the \"Theme rhythm\" section — it's the rule that prevents the deck from feeling sleepy.\n3. **Read the active DESIGN.md** — map its tokens to the six `:root` variables in the seed.\n\n### Step 1 — Copy the seed\n\nCopy `assets/template.html` to the project root as `index.html`. Replace the six `:root` variables with the active design system's tokens. Replace the page `<title>`.\n\n### Step 2 — Decide slide count + theme rhythm BEFORE writing any slide\n\nDefault: 6 slides unless the brief says otherwise.\n\n| Audience / format | Slides |\n|---|---|\n| Product overview / lightning talk (5–10 min) | 6 |\n| Pitch deck (15 min) | 8–10 |\n| Investor update / longer talk (20–30 min) | 12–18 |\n\nThen write out the rhythm before any HTML — for example, 8 slides:\n\n```\n01  hero light center  Cover\n02  light              Problem\n03  hero dark center   Big stat\n04  light              Three points\n05  dark               Pipeline\n06  hero light center  Quote\n07  light              Before / after\n08  hero dark center   Ask\n```\n\nA healthy sequence has:\n- No 3+ same theme in a row\n- ≥ 1 `hero dark` AND ≥ 1 `hero light` (for 8+ slides)\n- Alternating breath every 3–4 slides\n\nShow this rhythm sketch to the user *before* writing slide HTML — they can redirect cheaply.\n\n### Step 3 — Paste and fill\n\nFor each planned slide, copy the matching `<section>` from `layouts.md` into the body. Replace bracketed text with real, specific copy. **No filler / no lorem.** If a slide feels empty, the layout is wrong — pick a different one.\n\nTag each slide with `data-screen-label=\"01 Cover\"`, `\"02 Problem\"`, etc., in the order you wrote them. (The seed's first three slides already do this — extend the pattern.)\n\n### Step 4 — Self-check\n\nRun through `references/checklist.md`. The \"Theme rhythm spot-check\" at the end is non-negotiable:\n\n```bash\ngrep 'class=\"slide' index.html\n```\n\nRead the resulting class list. If you see `light × 4 in a row`, swap one to `dark`. If no `hero dark` exists in an 8+ slide deck, promote one big-stat or closing slide.\n\n### Step 5 — Emit the artifact\n\n```\n<artifact identifier=\"deck-slug\" type=\"text/html\" title=\"Deck Title\">\n<!doctype html>\n<html>...</html>\n</artifact>\n```\n\nOne sentence before the artifact. Stop after `</artifact>`.\n\n## Hard rules\n\n- **Theme class on every slide** (`light` | `dark` | `hero light` | `hero dark`). Bare `class=\"slide\"` = regression.\n- **No 3+ same theme in a row.**\n- **Display = serif via `var(--font-display)`.** `.h-hero` / `.h-xl` / `.h-md` already enforce.\n- **One accent per slide, used at most twice.**\n- **Don't rewrite the nav script.** It's proven.\n- **No `scrollIntoView()`.** Breaks iframe.\n- **`data-screen-label` on every slide.**","tags":["simple","deck","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-simple-deck","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/simple-deck","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (3,565 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:26.621Z","embedding":null,"createdAt":"2026-05-01T18:52:33.861Z","updatedAt":"2026-05-11T06:52:26.621Z","lastSeenAt":"2026-05-11T06:52:26.621Z","tsv":"'0':112 '1':116 '5':22 '8':89 'asset':76 'assets/template.html':17,118 'bottom':109 'built':12 'carri':19 'check':107 'checklist.md':99 'copi':14 'deck':3,11,34,48,59,70 'end':120,122 'end-to-end':119 'file':6,54 'first':86 'flight':115 'horizont':8,56 'horizontal-swip':7,55 'html':10,58 'ifram':24 'layout':30,64,94 'layouts.md':88 'librari':65 'magazin':45 'map':67 'materi':38 'nav':25,83 'need':43 'overview':36 'p0/p1/p2':100 'past':28,91 'paste-readi':90 'pitch':33 'pre':114 'pre-flight':113 'primit':81 'produc':50 'product':35 'proven':21,82 're':73 'read':74,85,117 'readi':92 'refer':87 'references/layouts.md':32 'resourc':66 'review':103 'rhythm':97,104 'rule':23,98 'script':26,84 'seed':16,62,78 'self':102 'self-review':101 'simpl':2,47,69 'simple-deck':1,68 'singl':5,53 'single-fil':4,52 'skill':49 'skill-simple-deck' 'skill.md':71 'slide':29,80,93 'source-nexu-io' 'spot':106 'spot-check':105 'step':111 'studi':37 'swipe':9,57 'template.html':77 'theme':96 'theme-rhythm':95 'token':79 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'use':60 'workflow':110","prices":[{"id":"579cbd47-0461-4744-8634-72bb45260a0b","listingId":"5566ed14-fd56-4074-b105-a167b0a75488","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-01T18:52:33.861Z"}],"sources":[{"listingId":"5566ed14-fd56-4074-b105-a167b0a75488","source":"github","sourceId":"nexu-io/open-design/simple-deck","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/simple-deck","isPrimary":false,"firstSeenAt":"2026-05-01T18:52:33.861Z","lastSeenAt":"2026-05-11T06:52:26.621Z"},{"listingId":"5566ed14-fd56-4074-b105-a167b0a75488","source":"skills_sh","sourceId":"nexu-io/open-design/simple-deck","sourceUrl":"https://skills.sh/nexu-io/open-design/simple-deck","isPrimary":true,"firstSeenAt":"2026-05-07T20:42:45.844Z","lastSeenAt":"2026-05-07T22:41:46.830Z"}],"details":{"listingId":"5566ed14-fd56-4074-b105-a167b0a75488","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"simple-deck","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"d18b7824c7055b93be4ff6bc32318a41540253c9","skill_md_path":"skills/simple-deck/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/simple-deck"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"simple-deck","description":"Single-file horizontal-swipe HTML deck. Built by copying the seed\n`assets/template.html` (which carries the proven 5-rule iframe nav script)\nand pasting slide layouts from `references/layouts.md`. Pitch decks,\nproduct overviews, study material — when you don't need the magazine\naesthetic of `magazine-web-ppt`."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/simple-deck"},"updatedAt":"2026-05-11T06:52:26.621Z"}}