Agent skill

Replit Deck

by sanqiufong in sanqiufong/slides-from-anything

Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery.

Apache-2.0Auto-check passedBusiness, Finance & HR

Install Replit Deck

skills CLI
$ npx skills add sanqiufong/slides-from-anything --skill replit-deck -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sanqiufong/slides-from-anything replit-deck --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sanqiufong/slides-from-anything.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/replit-deck .claude/skills/replit-deck && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
replit-deck
GitHub stars
132
Used in
1 other repo
Token cost
~2.9k tokens
SKILL.md length
975 words
Files
11 (incl. references, assets)
Skills in repo
48
Repo updated
First seen
Licence
Apache-2.0

At a glance

Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery.

  • Works in 7 steps: Pre-flight (mandatory reads) → Commit to one theme → Plan slide rhythm before writing HTML → …
  • Explicitly wants Replit Slides style
  • SKILL.md covers Resource map, Workflow, Hard rules and When to pick replit-deck vs.…, plus 3 more sections
  • Calls curl and node

What it does

Replit Deck is an agent skill from sanqiufong/slides-from-anything. Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery. Eight distinct themes (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse) — each a complete visual system (palette + type + accent) captured from replit.com/slides. Pick one theme, do not mix. For pitch decks, board reports, brand memos, campaign reveals — when the user explicitly wants "Replit Slides style".

Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 13 other files, including reference files and assets (for example `examples/README.md`, `references/checklist.md` and `references/components.md`).

It sits in Business, Finance & HR, covering Slides and decks, OKRs and executive reporting and Fundraising and pitch decks. The repository describes itself as: Turn anything into slides. The licence is Apache-2.0.

When your agent uses it

  • Explicitly wants Replit Slides style
  • Tasks that involve Slides and decks
  • Tasks that involve OKRs and executive reporting

Example prompts

  • “Replit Slides style”
  • “/replit-deck”

Workflow steps

7 steps, taken from the step headings in SKILL.md.

  1. Pre-flight (mandatory reads)
  2. Commit to one theme
  3. Plan slide rhythm before writing HTML
  4. Copy seed, bind theme
  5. Paste layouts, fill real copy
  6. Self-check
  7. Emit artifact

What it can do on your machine

Read from SKILL.md and the folder at commit 65da4ac. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • curl
    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Replit Deck loads about 2.9k tokens when it runs, and up to ~15k if it reads all its reference files. Until then it costs about 111 tokens; SKILL.md has 975 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~111
When it runs · the whole SKILL.md, loaded when a task matches
~2.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~15k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sanqiufong/slides-from-anything at commit 65da4ac, republished under its Apache-2.0 licence (© sanqiufong). 975 words, ~2,899 tokens.

Download SKILL.mdSave it as .claude/skills/replit-deck/SKILL.md (or your agent's skills folder). This skill also uses 10 other files; get the full folder from GitHub.
name
replit-deck
description
Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery. Eight distinct themes (helix, holm, vance, bevel, world-dark, world-mint, atlas, bluehouse) — each a complete visual system (palette + type + accent) captured from replit.com/slides. Pick one theme, do not mix. For pitch decks, board reports, brand memos, campaign reveals — when the user explicitly wants "Replit Slides style".
triggers
replit deck, replit slides, replit 风格 ppt, replit style deck, helix deck, holm memo, atlas chapter, bluehouse, bevel campaign
od.mode
deck
od.scenario
product

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:

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

Show full SKILL.md (454 more words)Show less

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 skills/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 skill auto-registers with the daemon on filesystem scan (no manual wiring). Confirmed against a running daemon on localhost:7456 after adding this skill:

bash
$ curl -s localhost:7456/api/skills \
    | node -e "const d=JSON.parse(require('fs').readFileSync(0,'utf-8')); \
               console.log(JSON.stringify(d.skills.find(s=>s.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.

© sanqiufong, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files (references, assets) in skills/replit-deck of sanqiufong/slides-from-anything.

  • SKILL.md
  • assets/template.html
  • examples/README.md
  • examples/example-atlas.html
  • examples/example-bluehouse.html
  • examples/example-helix.html
  • examples/example-holm.html
  • references/checklist.md
  • references/components.md
  • references/layouts.md
  • references/themes.md

Open the folder on GitHubat commit 65da4ac

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in sanqiufong/slides-from-anything, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Replit Deck next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Replit Deck compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Replit Deck this skillsanqiufong/slides-from-anything1321 repos~2.9kAutomated safety check: PassApache-2.0
Presentation Designcbrock84/headcount2k—~1.2kAutomated safety check: PassMIT
Pitch Deckagentii-ai/agentii-investment-intelligence206—~2kAutomated safety check: PassApache-2.0
Executive CommunicatorFerroxLabs/wayland608—~5.1kAutomated safety check: PassApache-2.0
Pitch Deckericrisco/rsc-harness156—~3.4kAutomated safety check: PassMIT
Metric Gaslighting Detectormohitagw15856/pm-claude-skills1.4k—~1.1kAutomated safety check: PassMIT

Similar skills

  • Presentation Design

    cbrock84/headcount

    Designs slide decks and one-pagers that carry an argument rather than decorate one — deck structure, headlines that state the takeaway, charts that make a single point, and the different rules board…

    2k GitHub stars~1.2k tokensUpdated 20 days ago
    Business, Finance & HRAuto-check passed
  • Pitch Deck

    agentii-ai/agentii-investment-intelligence

    Investment pitch deck, investment committee presentation, buy-side pitch, sell-side pitch, investment thesis slides, executive summary presentation, financial presentation, board deck, investor…

    206 GitHub stars~2k tokensUpdated 8 days ago
    Business, Finance & HRAuto-check passed
  • Executive Communicator

    FerroxLabs/wayland

    Becomes a senior communications strategist who crafts investor updates, board presentations, strategic summaries, and leadership communications using the pyramid principle and audience-calibrated…

    608 GitHub stars~5.1k tokensUpdated yesterday
    Business, Finance & HRAuto-check passed
  • Pitch Deck

    ericrisco/rsc-harness

    A skill your agent uses when building or fixing an investor fundraising deck — the narrative arc, the slide-by-slide story, and the few numbers that actually move an investment decision, for a…

    156 GitHub stars~3.4k tokensUpdated yesterday
    Business, Finance & HRAuto-check passed
  • Metric Gaslighting Detector

    mohitagw15856/pm-claude-skills

    Find out how a dashboard, KPI report, or metrics slide is lying to you — before you repeat its story in a bigger room.

    1.4k GitHub stars~1.1k tokensUpdated yesterday
    Business, Finance & HRAuto-check passed
  • Claude Design

    jiji262/claude-design-skill

    Produce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations.

    200 GitHub stars~3.6k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

More from sanqiufong/slides-from-anything

All 48 skills in this repo
  • PPTX HTML Fidelity Audit

    sanqiufong/slides-from-anything

    Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with…

    132 GitHub starsUsed in 1 repo~3.5k tokens
    Auto-check passed
  • Mobile App

    sanqiufong/slides-from-anything

    A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page.

    132 GitHub starsUsed in 1 repo~942 tokens
    Auto-check passed
  • Live Artifact

    sanqiufong/slides-from-anything

    Create refreshable, auditable Open Design artifacts backed by connector or local data.

    132 GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed
  • Open Design Landing

    sanqiufong/slides-from-anything

    Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own…

    132 GitHub starsUsed in 1 repo~3.3k tokens
    Auto-check passed
  • Web Prototype

    sanqiufong/slides-from-anything

    General-purpose desktop web prototype. An agent skill from sanqiufong/slides-from-anything.

    132 GitHub starsUsed in 3 repos~1k tokens
    Auto-check passed
  • Tweaks

    sanqiufong/slides-from-anything

    Wrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties in real time and persist to…

    132 GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check passed

Questions about Replit Deck

What does Replit Deck do?

Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery. Replit Deck is an agent skill from sanqiufong/slides-from-anything. Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery.

When should I use Replit Deck?

Replit Deck fits situations like: explicitly wants Replit Slides style; tasks that involve Slides and decks; tasks that involve OKRs and executive reporting.

How do I install Replit Deck in Claude Code?

Run `npx skills add sanqiufong/slides-from-anything --skill replit-deck -a claude-code`. Or copy the skill folder (skills/replit-deck in sanqiufong/slides-from-anything) into .claude/skills/replit-deck in your project. Claude Code loads it when a task matches its description.

How do I install Replit Deck in Codex?

Run `npx skills add sanqiufong/slides-from-anything --skill replit-deck -a codex`. Or copy the skill folder (skills/replit-deck in sanqiufong/slides-from-anything) into .agents/skills/replit-deck in your project. Codex loads it when a task matches its description.

Can I use Replit Deck in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sanqiufong/slides-from-anything --skill replit-deck -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/replit-deck, .gemini/skills/replit-deck, .github/skills/replit-deck and .opencode/skills/replit-deck in your project.

What does Replit Deck need to run?

Going by SKILL.md and its folder, Replit Deck needs the command-line tools its instructions call (curl and node).

Does Replit Deck access the network?

SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Replit Deck safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Replit Deck use?

Replit Deck is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Replit Deck use?

About 2.9k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 12k tokens, read only when the agent opens those files.

What are the alternatives to Replit Deck?

Skills that share tags, products or a category with Replit Deck: Presentation Design (cbrock84/headcount, 2k stars), Pitch Deck (agentii-ai/agentii-investment-intelligence, 206 stars), Executive Communicator (FerroxLabs/wayland, 608 stars) and Pitch Deck (ericrisco/rsc-harness, 156 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Replit Deck?

sanqiufong (a GitHub user) maintains it in sanqiufong/slides-from-anything, which has 132 GitHub stars. The repository holds 48 skills in this directory. The repository was last updated on October 6, 2026.

Source: sanqiufong/slides-from-anything on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.