Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nexu-io avatar

Simple Deck

nexu-io/open-design

  • 246 installs
  • 83.7k repo stars
  • Updated August 5, 2026
  • nexu-io/open-design

simple-deck is an Open Design agent skill that scaffolds a single-file horizontal-swipe HTML pitch or explainer deck from a seed template and layout library so developers can test positioning and narrative flow before fu

About

simple-deck is an Open Design skill for single-file horizontal-swipe HTML decks. It copies assets/template.html—which includes a proven 5-rule iframe navigation script handling scroller detection, capture-phase listeners, auto-focus, and position persistence—then pastes slide layouts from references/layouts.md. The library ships eight layouts with theme rhythm rules requiring light, dark, or hero classes on every slide, serif display typography via CSS variables, and data-screen-label tags per slide. Developers map six :root variables from the active DESIGN.md design system, replace bracketed copy with real content, and run references/checklist.md before delivery. Reach for simple-deck for pitch decks, product overviews, or study material when the deck should match the host brand rather than import a standalone visual theme like replit-deck or magazine-web-ppt.

  • minimal pitch decks
  • fast narrative scaffold
  • stakeholder previews
  • positioning tests
  • low-friction slides

Simple Deck by the numbers

  • 246 all-time installs (skills.sh)
  • +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #212 of 688 Office & Documents skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill simple-deck

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs246
repo stars★ 83.7k
Last updatedAugust 5, 2026
Repositorynexu-io/open-design ↗

How do you scaffold a horizontal HTML pitch deck?

Quickly scaffold a minimal pitch or explainer deck to test positioning, narrative flow, and stakeholder buy-in before investing in full visual design.

Who is it for?

Developers and designers who need a fast brand-aligned HTML deck prototype before investing in full slide design tooling.

Skip if: Presentations requiring magazine WebGL aesthetics, Replit Slides themes, or multi-file PPTX export pipelines instead of a single HTML deck.

When should I use this skill?

A developer asks for a quick pitch deck, product overview slides, or horizontal-swipe HTML presentation bound to DESIGN.md tokens.

What you get

Single-file index.html deck with themed slides, iframe-safe navigation script, and design-system-bound CSS variables.

  • Single-file index.html horizontal deck
  • Themed slides with data-screen-label tags

By the numbers

  • Includes 8 slide layouts in references/layouts.md
  • Ships a 5-rule iframe navigation script in assets/template.html
  • Maps six :root CSS variables from DESIGN.md tokens

Files

SKILL.mdMarkdownGitHub ↗

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

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

Step 1 — Copy the seed

Copy 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>.

Step 2 — Decide slide count + theme rhythm BEFORE writing any slide

Default: 6 slides unless the brief says otherwise.

Audience / formatSlides
Product overview / lightning talk (5–10 min)6
Pitch deck (15 min)8–10
Investor update / longer talk (20–30 min)12–18

Then write out the rhythm before any HTML — for example, 8 slides:

01  hero light center  Cover
02  light              Problem
03  hero dark center   Big stat
04  light              Three points
05  dark               Pipeline
06  hero light center  Quote
07  light              Before / after
08  hero dark center   Ask

A healthy sequence has:

  • No 3+ same theme in a row
  • ≥ 1 hero dark AND ≥ 1 hero light (for 8+ slides)
  • Alternating breath every 3–4 slides

Show this rhythm sketch to the user before writing slide HTML — they can redirect cheaply.

Step 3 — Paste and fill

For 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.

Tag 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.)

Step 4 — Self-check

Run through references/checklist.md. The "Theme rhythm spot-check" at the end is non-negotiable:

grep 'class="slide' index.html

Read 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.

Step 5 — Emit the artifact

<artifact identifier="deck-slug" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact. Stop after </artifact>.

Hard rules

  • Theme class on every slide (light | dark | hero light | hero dark). Bare class="slide" = regression.
  • No 3+ same theme in a row.
  • Display = serif via `var(--font-display)`. .h-hero / .h-xl / .h-md already enforce.
  • One accent per slide, used at most twice.
  • Don't rewrite the nav script. It's proven.
  • No `scrollIntoView()`. Breaks iframe.
  • `data-screen-label` on every slide.

Related skills

open.feishu.cnLark DocGenerate, update, and maintain structured documentation directly inside Lark/Feishu using natural language and agentic workflows.494kopen.feishu.cnLark DriveLet their coding agents read, create, update and search documents stored in Lark (Feishu) Drive directly from prompts.493kopen.feishu.cnLark SheetsConnect Claude, Cursor or other agents directly to Feishu/Lark spreadsheets for live data reads, writes, and structured automation.493kopen.feishu.cnLark WikiGenerate, update, and sync structured knowledge bases inside Lark (Feishu) directly from code, specs, or agent output.493kopen.feishu.cnLark WhiteboardGenerate, edit, and collaborate on visual diagrams and flowcharts directly inside Claude, Cursor or other agents.493kopen.feishu.cnLark SlidesInstantly generate polished, professional slide decks from specs, roadmaps, or meeting notes using Lark/Feishu.493k

FAQ

How does simple-deck build an HTML deck?

simple-deck copies assets/template.html to index.html, maps six :root variables from DESIGN.md, and inserts slides from eight layouts in references/layouts.md. The bundled 5-rule iframe navigation script must not be rewritten because it fixes scroller detection and position persi

When should developers choose simple-deck over other Open Design decks?

Developers should choose simple-deck when they need a plain, brand-aligned deck bound to the project DESIGN.md tokens. Pick magazine-web-ppt or replit-deck only when the brief explicitly requires those distinct visual systems instead of the host design system.

Office & Documentsworkflowpm
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.