New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Replit Deck

Free

Create visually cohesive decision decks with ease.

by nexu-io84.9k stars on nexu-io/open-design
2 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Replit Deck does

The Replit Deck skill enables users to generate a single-file horizontal-swipe HTML presentation deck using one of eight distinct themes. This tool is tailored for product and technical management professionals who need to convert various documents such as Product Requirement Documents (PRDs), roadmaps, and architecture reviews into visually appealing decision documents. Each theme is a complete visual system, ensuring that users maintain a consistent aesthetic throughout their presentations by using predefined tokens specific to the chosen theme.

To begin, users must select a theme that aligns with their project's brief. The skill provides a structured workflow that guides users through the process of creating their deck, starting from theme selection to slide layout planning and final content insertion. The templates are designed to accommodate a variety of content types, including metrics, insights, and narratives, allowing for a flexible presentation format that can cater to different audiences and purposes.

The Replit Deck skill is particularly useful for teams looking to present data-driven insights or strategic proposals in a visually engaging manner. By leveraging the provided layouts and components, users can create professional-looking decks that enhance their communication and decision-making processes. The skill emphasizes the importance of theme consistency and encourages users to adhere to a checklist before finalizing their decks, ensuring high-quality outputs.

This skill is ideal for product managers, technical leads, and anyone involved in decision-making processes that require clear visual communication. It streamlines the creation of presentation decks, saving time and effort while ensuring that the final product is polished and ready for stakeholder review.

When to use it

Use the Replit Deck skill when you need to create a presentation that aligns with the Replit Slides aesthetic or requires a specific theme for clarity and engagement.

When not to use it

This skill may not be suitable if you need a simple deck that adheres to an existing design system or if you require a more editorial-style presentation format.

What you can build with it

Creating a Product Roadmap Presentation

Use Replit Deck to transform your product roadmap into a visually engaging presentation for stakeholders.

Preparing an Architecture Review

Convert your architecture review documents into a cohesive presentation deck that clearly outlines decisions and insights.

Developing a Retrospective Deck

Easily create a retrospective presentation that summarizes team performance and highlights key takeaways.

How to install Replit Deck

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/replit-deck --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Replit Deck Skill

Produce a single-file horizontal-swipe HTML deck in one of eight Replit-Slides themes. Every theme is a complete visual system — do not mix tokens across themes.

Resource map

replit-deck/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: 8 themes via [data-theme=*], proven iframe-nav script (READ FIRST)
├── references/
│   ├── themes.md           ← 8 themes: when-to-pick / do / don't / primary layouts
│   ├── layouts.md          ← 10 paste-ready slide layouts, cross-theme
│   ├── components.md       ← shared primitives (eyebrow, kpi-row, image-grid, meta-bar)
│   └── checklist.md        ← P0/P1/P2 self-review + theme lock-in gate
└── examples/               ← four reference decks across the most contrasting themes
    ├── example-helix.html       (SaaS board update · light minimal)
    ├── example-holm.html        (legal fintech memo · cream editorial serif)
    ├── example-atlas.html       (quarterly history chapter · black + vermilion)
    └── example-bluehouse.html   (real estate ROI · navy + gradient cards)

Workflow

Step 0 — Pre-flight (mandatory reads)

  1. Read assets/template.html end-to-end. The [data-theme] blocks carry the tokens; the <script> at the bottom solves five iframe nav bugs — do not rewrite it.
  2. Read references/themes.md → pick one theme that matches the user's brief. If the user already picked a theme via od.inputs.theme, use that.
  3. Read references/layouts.md → you'll copy <section> blocks from here.
  4. Read references/checklist.md → P0 must pass before emit.

Step 1 — Commit to one theme

Write out loud (in the TodoWrite or plan section) which theme and why. Once picked, every slide uses that theme's tokens only. No swapping mid-deck. The <body data-theme="helix"> attribute is the single source of truth.

ThemePick when
helixSaaS board update, product metrics, neutral modern
holmLegal memo, investor pre-read, serious / institutional
vanceArt portfolio, design catalog, photographer / sculptor
bevelFashion campaign, lookbook, Y2K / editorial attitude
world-darkPolicy report, finance analysis, premium dark
world-mintLighter companion of world-dark — ESG, wellness finance, sustainability
atlasLong-form narrative, chapter deck, museum / archive aesthetic
bluehouseConsumer product, real estate, lifestyle, colorful cards

Step 2 — Plan slide rhythm before writing HTML

Default 6 slides. Write the rhythm BEFORE any HTML, for example (helix, 6 slides):

01  cover           hero + title + subtitle
02  kpi-row-6       6 metrics with ▲/▼ deltas
03  split-insight   left stat + right paragraph
04  chapter-plate   section divider
05  three-up        three parallel columns
06  closing         one bold number or CTA

Show this to the user. Redirecting at this stage is cheap.

Step 3 — Copy seed, bind theme

  1. Copy assets/template.html to project root as index.html.
  2. Set <body data-theme="<chosen>">.
  3. Replace <title>.
  4. Delete the placeholder slides in the body (the seed ships with 3 demo slides). Keep the chrome (counter / progress / hint).

Step 4 — Paste layouts, fill real copy

For each planned slide, copy the matching <section> from references/layouts.md. Replace every [REPLACE] with specific copy — never leave placeholders, never use lorem. If a slide feels empty, pick a different layout.

Tag each slide with data-screen-label="01 Cover", "02 Metrics", etc., in presentation order.

Step 5 — Self-check

Run references/checklist.md silently before emit: the P0 theme-lock gate plus the five-dimension 1–5 critique (Philosophy / Hierarchy / Execution / Specificity / Restraint). Any dimension ≤ 3 → re-do before emit.

The P0 theme-lock grep is non-negotiable:

grep -E 'data-theme|style="--' index.html | head

If any style="--accent:..." or theme override appears on individual slides, revert. One theme per deck.

Step 6 — Emit 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

  • One theme per deck. data-theme set on <body> — never override per-slide.
  • Numbers are real or absent. No invented metrics. Use — or a grey block as an honest placeholder.
  • Display face follows theme. helix/world-dark/world-mint/bluehouse use the sans Display; holm/vance/atlas use the serif Display; bevel uses the Y2K display. Do not swap. (Authoritative source: the --font-display token of each theme in assets/template.html — if this list ever disagrees with the template, the template wins.)
  • Accent appears 1–2× per slide max. Never a gradient-spam.
  • Never rewrite the nav script. Five iframe bugs it solves are not obvious.
  • Keep it one HTML file. Inline all CSS. No external fonts — the system stack in each theme is deliberate.
  • data-screen-label on every slide.
  • No Replit logo / brand lockup. These are template styles, not a Replit-brand deck.

When to pick replit-deck vs. peer skills

SkillPick when
simple-deckPlain, single-theme deck bound to the project's DESIGN.md tokens. When the deck should match the host brand, not assert its own. (designSystemRequired: true.)
magazine-web-pptEditorial "magazine × e-ink" aesthetic (WebGL fluid background, serif titles, chapter plates). When the brief asks for a keynote / launch / sharing-style deck and calls out Monocle / WIRED / Kinfolk / Domus.
replit-deckThe brief explicitly asks for Replit-Slides gallery aesthetic, or needs one of the 8 token-frozen visual identities (SaaS board, editorial memo, gallery catalog, Y2K campaign, policy report, museum chapter, consumer cards). No dependency on DESIGN.md.

If the user just says "make me a deck" without further guidance, default to simple-deck — it respects their design system. Pick replit-deck only when the brief is explicit about the aesthetic or names a theme.

Scope & provenance

  • Eight themes = the full replit.com/slides landing-page gallery at the time of snapshot. Not a curated subset — every theme card currently published on replit.com/slides is represented here (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse). If Replit ships a ninth template, it is not automatically reflected in this skill.
  • Snapshot date: 2026-04-29. All hex values were sampled from the actual replit.com/slides PNGs on that date with ImageMagick — no guessed colors, no memory substitutions. See references/themes.md → Contributing a new theme for the exact sampling procedure.
  • Maintenance: one-time snapshot, not tracked. Replit Slides is a live product and may drift. This skill does not auto-sync. If you notice Replit has updated colors or added a theme and want it reflected here, open an issue on nexu-io/open-design titled replit-deck: re-sync to replit.com/slides (YYYY-MM-DD) and attach the updated screenshots. There is no designated owner monitoring the upstream.
  • No Replit branding. These are gallery-style templates, not a Replit-brand deck. The checklist (P0) forbids inserting a Replit logo or wordmark.

Browser / runtime support

  • Target: modern evergreen desktop browsers (Chrome 110+ / Safari 16+ / Firefox 115+) and modern mobile Safari / Chrome.
  • Features used: CSS scroll-snap (horizontal), color-mix(), CSS custom properties, text-wrap: balance. All ≥ 93% Baseline.
  • Not supported: IE 11, Safari < 15, any browser without color-mix() (would need a fallback --accent-soft if you want to support older Safari; out of scope for this skill).
  • Mobile: horizontal scroll-snap works on iOS Safari 16+ and Android Chrome. Keyboard nav is desktop-only by design.
  • Nav script behavior: reused verbatim from design-templates/simple-deck — survives iframe embedding (the daemon preview surface), dual listener races, focus loss, and position persistence across reloads. Do not rewrite it.

Verification

The design template auto-registers with the daemon on filesystem scan (no manual wiring). Confirmed against a running daemon on localhost:7456 after adding this template:

$ curl -s localhost:7456/api/design-templates \
    | node -e "const d=JSON.parse(require('fs').readFileSync(0,'utf-8')); \
               console.log(JSON.stringify(d.designTemplates.find(t=>t.id==='replit-deck'), null, 2));"
{
  "id": "replit-deck",
  "name": "replit-deck",
  "description": "Single-file horizontal-swipe HTML deck in the style of Replit Slides's\nlanding-page template gallery. Eight distinct themes …",
  "triggers": [
    "replit deck",
    "replit slides",
    "replit 风格 ppt",
    "replit style deck",
    "helix deck",
    "holm memo",
    "atlas chapter",
    "bluehouse",
    "bevel campaign"
  ],
  "mode": "deck",
  "platform": null,
  "scenario": "product",
  "previewType": "html",
  "designSystemRequired": false,
  "defaultFor": [],
  "upstream": null,
  "featured": null,
  "fidelity": null,
  "speakerNotes": null,
  "animations": null,
  "examplePrompt": "Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery.",
  "hasBody": true
}

All four example decks (examples/example-{helix,holm,atlas,bluehouse}.html) open directly in a browser. Keyboard nav (← / → / Space / Home / End) and horizontal scroll-snap work in Chrome 129 and Safari 18.

Frequently asked questions about Replit Deck

Similar skills

PPTX HTML Fidelity Audit

Ensure your PPTX matches its HTML source perfectly.

HTML PPT Studio

Create professional HTML presentations effortlessly.

Humanize PPT

Transform raw material into presentation-ready outlines.

Open Design Landing Deck

Create engaging marketing decks with a magazine-style format.

Magazine Web Presentation

Create visually striking HTML presentations with ease.

PPT Template Creator

Transform PowerPoint templates into reusable skills.