open-design-landing-deck

Generate a single-file HTML slide deck with horizontal swipe pagination from typed JSON inputs.

Updated May 20, 2026
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill open-design-landing-deck-keimoshi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: open-design-landing-deck
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/open-design-landing-deck
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill open-design-landing-deck-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tsx, and includes scripts (resource) components.

What problem does it solve? Turning a brand brief into a polished, presentation-ready slide deck normally requires manual layout work in presentation software; this Skill compiles a typed JSON brief directly into a self-contained HTML deck in the Atelier Zero visual language. ## Core Features & Use Cases - Typed slide composition: Seven slide kinds (cover, section, content, stats, quote, cta, end) defined in schema.ts and rendered by scripts/compose.ts into one HTML file. - Magazine-style navigation: Horizontal swipe pagination with keyboard, wheel, and touch controls, dot indicator, coral progress bar, and an ESC overview grid of slide thumbnails. - Shared brand assets: Reuses the canonical Atelier Zero stylesheet and 16-slot collage image library from the sister open-design-landing skill, so decks and landing pages stay visually consistent. - Use Case: A founder needs an 11-slide pitch deck for a conference talk. They fill in inputs.json with brand details and slide content, run the composer, and open a single HTML file that works offline in any browser. ## Quick Start Ask the agent to build a pitch deck from your brief using the open-design-landing-deck skill, for example: create an 11-slide deck with a cover, two section dividers, content slides, a stats slide, a quote, and a closing CTA.

Frequently Asked Questions about open-design-landing-deck

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an HTML slide deck from a JSON file?

Author an inputs.json file following the typed schema (brand, deck_title, slides array), then run `npx tsx scripts/compose.ts inputs.json out/index.html`. The composer inlines the Atelier Zero stylesheet and runtime navigation script into one self-contained HTML file.

What slide types can I use in a pitch deck?

Seven kinds are supported: cover, section, content, stats, quote, cta, and end. Each kind has typed fields in schema.ts, and you can mix them freely in the slides array; 8-15 slides is the recommended range.

Does the deck support keyboard and touch navigation?

Yes. The generated deck supports arrow keys, PageUp/PageDown, Space, Home/End, mouse wheel, and touch swipes. Pressing ESC opens an overview grid with scaled thumbnails of every slide for quick jumping.

Can I use custom images in the slides?

Yes. Set `imagery.assets_path` in inputs.json to point at your image directory; slides reference images by slot id. By default it reuses the 16-slot collage library from the sister open-design-landing skill, which also provides generation and placeholder scripts.

What are the limitations of a single-file HTML deck?

Each slide must fit within one viewport (100vh x 100vw at 1280x800) or content overflows. The deck is a single-file artifact with no router, so multi-page decks require rendering separate files and linking them from a parent index.