replit-deck by nexu-io

Decision brief

What it does—and where it fits

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.

Best for

Not for

Tasks that require unconfirmed production actions or broad system permissions.
Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

Platform	Status	Evidence	What to check
Codex	Not declared	No explicit evidence	Portability before use
Claude Code	Not declared	No explicit evidence	Portability before use
Cursor	Not declared	No explicit evidence	Portability before use
Gemini CLI	Not declared	No explicit evidence	Portability before use

Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource

npx skills add https://github.com/nexu-io/open-design --skill "design-templates/replit-deck"

Safe inspection promptEditorial

Inspect the Agent Skill "replit-deck" from https://github.com/nexu-io/open-design/blob/89d6d4ef21baf80f871595abdf6f7de6e941dd44/design-templates/replit-deck/SKILL.md at commit 89d6d4ef21baf80f871595abdf6f7de6e941dd44. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

01
Workflow
1. Read assets/template.html end-to-end. The [data-theme] blocks carry the tokens; the 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.the…
Read assets/template.html end-to-end. The [data-theme] blocks carry the tokens; the at the bottom solves five iframe nav bugs — do not rewrite it.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.Read references/layouts.md → you'll copy blocks from here.
02
Step 0 — Pre-flight (mandatory reads)
1. Read assets/template.html end-to-end. The [data-theme] blocks carry the tokens; the 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.the…
Read assets/template.html end-to-end. The [data-theme] blocks carry the tokens; the at the bottom solves five iframe nav bugs — do not rewrite it.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.Read references/layouts.md → you'll copy blocks from here.
03
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 attribute is the single source of truth.
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 attribute is the single source of truth.
04
Step 2 — Plan slide rhythm before writing HTML
Default 6 slides. Write the rhythm BEFORE any HTML, for example (helix, 6 slides):
Default 6 slides. Write the rhythm BEFORE any HTML, for example (helix, 6 slides):Show this to the user. Redirecting at this stage is cheap.
05
Step 3 — Copy seed, bind theme
1. Copy assets/template.html to project root as index.html. 2. Set ". 3. Replace . 4. Delete the placeholder slides in the body (the seed ships with 3 demo slides). Keep the chrome (counter / progress / hint).
Copy assets/template.html to project root as index.html.Set ".Replace .

Permission review

Static risk signals and limitations

Network access

medium · line 148

The documentation includes network, browsing, or remote request actions.

$ curl -s localhost:7456/api/design-templates \

Reads files

low · line 149

The documentation asks the agent to read local files, directories, or repositories.

| node -e "const d=JSON.parse(require('fs').readFileSync(0,'utf-8')); \

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial

Signal	Value	Evidence type	Meaning
Quality score	88/100	Computed	Documentation, specificity, maintenance, and trust rules
Repository stars	82,073	Source	Repository attention, not individual Skill quality
Compatibility	0 platforms	Source	Declared in the catalog source record
Usage guide	automated source guide	Editorial	Generated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository: nexu-io/open-design
Skill path: design-templates/replit-deck/SKILL.md
Commit: 89d6d4ef21baf80f871595abdf6f7de6e941dd44
License: Apache-2.0
Collected: 2026-07-28
Default branch: main

View the original SKILL.md

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)

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.
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.
Read references/layouts.md → you'll copy <section> blocks from here.
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.

Theme	Pick when
`helix`	SaaS board update, product metrics, neutral modern
`holm`	Legal memo, investor pre-read, serious / institutional
`vance`	Art portfolio, design catalog, photographer / sculptor
`bevel`	Fashion campaign, lookbook, Y2K / editorial attitude
`world-dark`	Policy report, finance analysis, premium dark
`world-mint`	Lighter companion of world-dark — ESG, wellness finance, sustainability
`atlas`	Long-form narrative, chapter deck, museum / archive aesthetic
`bluehouse`	Consumer 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

Copy assets/template.html to project root as index.html.
Set <body data-theme="<chosen>">.
Replace <title>.
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

Skill	Pick when
`simple-deck`	Plain, 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-ppt`	Editorial "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-deck`	The 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.

replit-deck

What it does—and where it fits

Best for

Not for

Platform support, with evidence labels

Inspect first. Install second.

What the source asks the agent to do

Workflow

Step 0 — Pre-flight (mandatory reads)

Step 1 — Commit to one theme

Step 2 — Plan slide rhythm before writing HTML

Step 3 — Copy seed, bind theme

Static risk signals and limitations

Network access

Reads files

Why each signal appears

Provenance and original SKILL.md

Replit Deck Skill

Resource map

Workflow

Step 0 — Pre-flight (mandatory reads)

Step 1 — Commit to one theme

Step 2 — Plan slide rhythm before writing HTML

Step 3 — Copy seed, bind theme

Step 4 — Paste layouts, fill real copy

Step 5 — Self-check

Step 6 — Emit artifact

Hard rules

When to pick `replit-deck` vs. peer skills

Scope & provenance

Browser / runtime support

Verification

Compare before choosing

medchem

emails

team-communication-protocols

free-tool-strategy

What it does—and where it fits

Best for

Not for

Platform support, with evidence labels

Inspect first. Install second.

What the source asks the agent to do

Workflow

Step 0 — Pre-flight (mandatory reads)

Step 1 — Commit to one theme

Step 2 — Plan slide rhythm before writing HTML

Step 3 — Copy seed, bind theme

Static risk signals and limitations

Network access

Reads files

Why each signal appears

Provenance and original SKILL.md

Replit Deck Skill

Resource map

Workflow

Step 0 — Pre-flight (mandatory reads)

Step 1 — Commit to one theme

Step 2 — Plan slide rhythm before writing HTML

Step 3 — Copy seed, bind theme

Step 4 — Paste layouts, fill real copy

Step 5 — Self-check

Step 6 — Emit artifact

Hard rules

When to pick replit-deck vs. peer skills

Scope & provenance

Browser / runtime support

Verification

Compare before choosing

medchem

emails

team-communication-protocols

free-tool-strategy

When to pick `replit-deck` vs. peer skills