Simple Deck

Horizontal swipe deck in one HTML file. You get a proven five rule iframe nav script, six CSS tokens mapped from your design system, and eight paste ready slide layouts covering hero, stats, three column, quote, pipeline, and before/after. The workflow forces you to sketch theme rhythm before writing any slides so you don't end up with four light slides in a row putting everyone to sleep. Built for product overviews, pitch decks, and study material when you need something clean that works in an iframe without fighting scrollIntoView bugs. No build step, no framework, just copy the template and fill it.

skills.sh installs: 242
GitHub stars: 106.9K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill simple-deck --agent claude-code

Installs into .claude/skills of the current project.

Files

Simple Deck Skill

Produce a single-file horizontal-swipe HTML deck using the seed and layout library.

Resource map

simple-deck/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: tokens + slide primitives + proven nav script (READ FIRST)
└── references/
    ├── layouts.md          ← 8 paste-ready slide layouts + theme-rhythm rules
    └── checklist.md        ← P0/P1/P2 self-review (rhythm spot-check at bottom)

Workflow

Step 0 — Pre-flight

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.
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.
Read the active DESIGN.md — map its tokens to the six :root variables in the seed.