html-ppt-retro-quarterly-review
nexu-io/open-design
Bold retro blue + orange quarterly review deck with cinematic three-slide layout and premium motion.
What is html-ppt-retro-quarterly-review?
A print-inspired presentation template for quarterly reviews and roadmaps featuring a striking blue and orange editorial aesthetic. Use when you need a high-impact deck with heavyweight typography, structured grids, and fast-paced video transitions that keep each slide under 3 seconds.
- Three-slide cinematic layout: cover, priorities triptych, and roadmap + KPI strip
- Keyboard shortcuts (1/2/3 to jump, R to restart) and premium wipe transitions with staggered reveals
- Self-contained single HTML file with inline CSS and JavaScript—no framework dependencies
- Retro editorial design language with cream paper sections and bold slab headlines
- Debounce-100 live preview and real-time token/CSS variable mapping from design specs
How to install html-ppt-retro-quarterly-review
npx skills add https://github.com/nexu-io/open-design --skill html-ppt-retro-quarterly-reviewHow to use html-ppt-retro-quarterly-review
- 1.Start from assets/template.html as your base—do not rebuild from scratch
- 2.Map any requested design token changes (colors, fonts) into CSS variables while preserving the blue/orange/cream visual grammar
- 3.Adapt the three-slide structure: cover lockup, three priorities grid, and roadmap timeline + KPI strip with your content
- 4.Verify keyboard interactions work (1/2/3 to jump slides, R to restart) and transitions are smooth
- 5.Validate your output against references/checklist.md before finalizing
- 6.Emit the completed artifact as a single self-contained HTML file with inline CSS and JavaScript
Use cases
- Creating a quarterly business review presentation with visual impact and fast pacing
- Building a product roadmap deck that emphasizes priorities and KPIs in a premium format
- Adapting a retro-styled template to match brand colors and messaging without rebuilding from scratch
- Presenting strategic initiatives or team retrospectives with cinematic slide transitions
- Generating a self-contained HTML presentation that works offline and requires no external dependencies
- Product managers and strategy leads presenting quarterly reviews
- Design teams creating high-impact internal decks
- Founders and executives building roadmap presentations
- Anyone needing a premium, print-inspired presentation template with retro aesthetics
html-ppt-retro-quarterly-review FAQ
Yes. Map token changes into CSS variables at the top of the template while preserving the retro blue/orange/cream editorial grammar. The workflow guides you to read DESIGN.md first and apply changes consistently.
No. The output is a single self-contained HTML file with inline CSS and JavaScript. No framework runtime or external dependencies are needed.
Three slides: a cover with hero title lockup, a three-priority triptych grid, and a roadmap timeline with KPI strip. Each slide is designed to hold under 3 seconds in video mode.
Press 1, 2, or 3 to jump to that slide, and R to restart the presentation. Page indicators update automatically as you navigate.
Yes. The three-slide structure and retro aesthetic work well for roadmaps, strategic initiatives, and any high-impact presentation that benefits from bold typography and cinematic pacing.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: html-ppt-retro-quarterly-review description: | Retro Quarterly Review presentation template in a bold blue + orange editorial language. Use when users ask for a high-impact quarterly review / roadmap deck with heavyweight slab headlines, clean cream paper sections, structured grids, and fast premium motion pacing (3 slides, each hold under 3s in video mode). triggers:
- "retro quarterly review"
- "quarterly review template"
- "roadmap slide style"
- "blue orange presentation"
- "vintage business deck"
- "季度复盘复古风"
- "蓝橙复古汇报模板"
od:
mode: template
surface: video
type: hyperframes
platform: desktop
preview:
type: html
entry: index.html
reload: debounce-100
outputs:
primary: index.html
secondary:
- template.html
- example.html capabilities_required:
- file_write
Retro Quarterly Review Template
A high-contrast, print-inspired quarterly review template with three cinematic slides:
- Cover (hero title lockup)
- Three priorities (triptych grid)
- Roadmap timeline + KPI strip
Resource map
html-ppt-retro-quarterly-review/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html
Workflow
- Read active
DESIGN.mdfirst and map any requested token changes into CSS variables while preserving the retro blue/orange/cream visual grammar. - Start from
assets/template.html; do not rebuild from scratch. - Preserve the three-slide information architecture and typographic hierarchy.
- Keep interactions and motion quality:
- keyboard
1/2/3quick jump Rrestart- page indicator updates per scene
- premium wipe transitions and staggered reveals
- keyboard
- Keep output self-contained (single HTML, inline CSS + JS, no framework runtime).
- If adapting copy/data, keep content realistic and internally consistent.
- Validate against
references/checklist.mdbefore emitting artifact.
Output contract
Emit one short orientation sentence and then the artifact:
<artifact identifier="retro-quarterly-review" type="text/html" title="Retro Quarterly Review">
<!doctype html>
<html>...</html>
</artifact>
Related skills
More from nexu-io/open-design and the wider catalog.
image-enhancer
Enhance image resolution, sharpness, and clarity for professional presentations and documentation.
imagegen
Generate and edit images using OpenAI's Image API for UI mockups, icons, illustrations, and visual assets.
imagen
Generate images using Google Gemini's image generation API for UI mockups, icons, and illustrations.
impeccable-design-polish
|
login-flow
Mobile-first login and authentication flow screens with phone, password, and SSO options.
marketing-psychology
Apply psychological principles and behavioral science to copy, design, and pricing.