nexu-io/open-design
For product and technical management work: turn PRDs, roadmaps, RFCs, architecture reviews, and retros into decision documents. Built around the core query "pm-feature-business-case-deck", with product strategy lead judgment, buyer-ready proof, and this outcome: approve the feature, architecture, roadmap, or incident follow-up.
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/replit-deck"Source checked Jul 28, 2026·Refresh due Oct 26, 2026
Reorganized from the pinned upstream SKILL.md
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.
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/replit-deck"The pinned source contains enough sections and task detail for a source-grounded deep guide; automated content is still not an independent test.
1,283 source words · 14 usable sections
Design outputs
Design process
Sections are extracted automatically from the pinned SKILL.md and link back to the source.
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…
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…
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.
Default 6 slides. Write the rhythm BEFORE any HTML, for example (helix, 6 slides):
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).
SkillSignal prompt templates
These prompts were written by SkillSignal from the source structure; they are not upstream text.
Source-grounded prompt
Use for a design task while explicitly checking the source sections.
Use replit-deck for this design task: [task]. Inputs and constraints: [details]. Work through these pinned SKILL.md sections: “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”. Cite the concrete requirements that shape each step, do not invent capabilities absent from the source, and verify the result against: [acceptance criteria].
Design checklist
The source section “Workflow” has been checked.
The source section “Step 0 — Pre-flight (mandatory reads)” has been checked.
The source section “Step 1 — Commit to one theme” has been checked.
The source section “Step 2 — Plan slide rhythm before writing HTML” has been checked.
Source output checked: 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:
Source output checked: 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.
Static permission evidence
These are source excerpts matched by deterministic rules, not findings of malicious behavior, safety, or actual execution.
SKILL.md · L148
$ curl -s localhost:7456/api/design-templates \The documentation includes network, browsing, or remote request actions.
SKILL.md · L149
| node -e "const d=JSON.parse(require('fs').readFileSync(0,'utf-8')); \The documentation asks the agent to read local files, directories, or repositories.
Choose a different workflow
Medicinal chemistry filters for compound triage. Apply drug-likeness rules (Lipinski, Veber, CNS), structural alert catalogs (PAINS, NIBR, ChEMBL), complexity metrics, and the medchem query language for library filtering.
A separate implementation from K-Dense-AI/scientific-agent-skills; compare its source, maintenance signals, and permission requirements.
Open source detailWhen the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nurture sequence," "onboarding emails," "welcome sequence," "re-engagement emails," "email automation," "lifecycle emails," "trigger-based emails," "email funnel," "email workflow," "what emails should I send," "welcome series," or "email cadence." Use this for any multi-email automated flow. For cold out
A separate implementation from coreyhaines31/marketingskills; compare its source, maintenance signals, and permission requirements.
Open source detailStructured messaging protocols for agent team communication including message type selection, plan approval, shutdown procedures, and anti-patterns to avoid. Use this skill when establishing communication norms for a newly spawned team, when deciding whether to send a direct message or a broadcast, when a team-lead needs to review and approve an implementer's plan before work begins, when orchestrating a graceful team shutdown after all tasks are complete, or when debugging why teammates are not
A separate implementation from wshobson/agents; compare its source, maintenance signals, and permission requirements.
Open source detailFAQ
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.
The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "design-templates/replit-deck". Inspect the command and pinned source before running it.
Static rules flagged network, read-files in the source; the page lists the matching lines and excerpts.
Quality breakdown
Based on traceable docs and repository signals; stars are not treated as quality.
Compare before choosing
These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.
Medicinal chemistry filters for compound triage. Apply drug-likeness rules (Lipinski, Veber, CNS), structural alert catalogs (PAINS, NIBR, ChEMBL), complexity metrics, and the medchem query language for library filtering.
When the user wants to create or optimize an email sequence, drip campaign, automated email flow, or lifecycle email program. Also use when the user mentions "email sequence," "drip campaign," "nurture sequence," "onboarding emails," "welcome sequence," "re-engagement emails," "email automation," "lifecycle emails," "trigger-based emails," "email funnel," "email workflow," "what emails should I send," "welcome series," or "email cadence." Use this for any multi-email automated flow. For cold out
Structured messaging protocols for agent team communication including message type selection, plan approval, shutdown procedures, and anti-patterns to avoid. Use this skill when establishing communication norms for a newly spawned team, when deciding whether to send a direct message or a broadcast, when a team-lead needs to review and approve an implementer's plan before work begins, when orchestrating a graceful team shutdown after all tasks are complete, or when debugging why teammates are not
Plans free tools, calculators, generators, and interactive widgets that attract target audience through search and social sharing. Engineering as marketing — build something useful, capture leads. Use when someone wants to build a free tool for marketing, says 'free tool', 'calculator', 'generator', 'engineering as marketing', 'side project marketing', 'interactive widget', 'lead generation tool', 'SEO tool', 'growth hack', 'build something to attract users', or wants to attract users through ut
Generate enriched ICP-based lead lists with Exa Agent, including structured scoring and CSV output. Use when generating leads, building prospect lists, finding companies to sell to, outbound research, or ICP-based company discovery. Triggers on leads, lead gen, prospect list, find companies, ICP, outbound list. Distinct from lead-magnet (content asset that captures emails).
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.
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)
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.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.references/layouts.md → you'll copy <section> blocks from here.references/checklist.md → P0 must pass before emit.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 |
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.
assets/template.html to project root as index.html.<body data-theme="<chosen>">.<title>.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.
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.
<artifact identifier="deck-<slug>" type="text/html" title="<Deck title>">
<!doctype html>
<html>...</html>
</artifact>
One sentence before the artifact. Stop after </artifact>.
data-theme set on <body> — never override per-slide.— or a grey block as an honest placeholder.--font-display token of each theme in assets/template.html — if this list ever disagrees with the template, the template wins.)data-screen-label on every slide.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.
references/themes.md → Contributing a new theme for the exact sampling procedure.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.color-mix(), CSS custom properties, text-wrap: balance. All ≥ 93% Baseline.color-mix() (would need a fallback --accent-soft if you want to support older Safari; out of scope for this skill).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.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.