Html Ppt Retro Quarterly Review
Generate a bold blue-and-orange retro quarterly review HTML deck with three cinematic slides for stakeholder or video export.
Overview
html-ppt-retro-quarterly-review is an agent skill for the Grow phase that fills a retro blue-orange HTML quarterly review template with three structured slides.
Install
npx skills add https://github.com/nexu-io/open-design --skill html-ppt-retro-quarterly-reviewWhat is this skill?
- Retro Quarterly Review template: slab headlines, cream paper sections, blue + orange editorial grammar
- Exactly 3 slides—cover, three-priority triptych, roadmap timeline + KPI strip
- Video-mode pacing: each slide hold under 3s; hyperframes on desktop with HTML preview (debounce-100 reload)
- Workflow starts from assets/template.html and active DESIGN.md token mapping—no scratch rebuild
- 3-slide deck structure
- Video mode: each slide hold under 3 seconds
Adoption & trust: 837 installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need a credible quarterly review or roadmap deck fast but only have markdown notes and no presentation toolchain.
Who is it for?
Indie operators recording quarterly updates or investor-style roadmaps with a fixed three-slide retro template.
Skip if: Full corporate PowerPoint libraries, mobile-first slide apps, or decks needing more than three slides without extending the template.
When should I use this skill?
User asks for retro quarterly review, quarterly review template, roadmap slide style, blue orange presentation, or related Chinese triggers.
What do I get? / Deliverables
You get index.html (and template/example companions) with three on-brand slides mapped from DESIGN.md, ready for browser preview or video-mode export.
- index.html primary output
- template.html and example.html secondary outputs
Recommended Skills
Journey fit
Quarterly reviews and roadmap storytelling land in Grow when you communicate progress and plans—not when you wire backend APIs. Content subphase fits polished narrative decks, KPI strips, and roadmap slides rather than app UI components.
How it compares
HTML hyperframe design template—not a generic chart generator or slide-deck MCP.
Common Questions / FAQ
Who is html-ppt-retro-quarterly-review for?
Solo builders and small teams who want a styled quarterly review or roadmap in HTML for desktop preview or short-form video, using Open Design conventions.
When should I use html-ppt-retro-quarterly-review?
Use it in Grow when preparing stakeholder retros, roadmap recaps, or vintage-styled business decks; trigger when you ask for retro quarterly review, blue orange presentation, or 季度复盘复古风.
Is html-ppt-retro-quarterly-review safe to install?
It mainly writes local HTML assets; review Security Audits on this Prism page and inspect generated files before publishing externally.
SKILL.md
READMESKILL.md - Html Ppt Retro Quarterly Review
# Retro Quarterly Review Template A high-contrast, print-inspired quarterly review template with three cinematic slides: 1. Cover (hero title lockup) 2. Three priorities (triptych grid) 3. Roadmap timeline + KPI strip ## Resource map ```text html-ppt-retro-quarterly-review/ ├── SKILL.md ├── assets/ │ └── template.html ├── references/ │ └── checklist.md └── example.html ``` ## Workflow 1. Read active `DESIGN.md` first and map any requested token changes into CSS variables while preserving the retro blue/orange/cream visual grammar. 2. Start from `assets/template.html`; do not rebuild from scratch. 3. Preserve the three-slide information architecture and typographic hierarchy. 4. Keep interactions and motion quality: - keyboard `1/2/3` quick jump - `R` restart - page indicator updates per scene - premium wipe transitions and staggered reveals 5. Keep output self-contained (single HTML, inline CSS + JS, no framework runtime). 6. If adapting copy/data, keep content realistic and internally consistent. 7. Validate against `references/checklist.md` before emitting artifact. ## Output contract Emit one short orientation sentence and then the artifact: ```xml <artifact identifier="retro-quarterly-review" type="text/html" title="Retro Quarterly Review"> <!doctype html> <html>...</html> </artifact> ``` # Checklist ## P0 - `assets/template.html` exists and opens directly from disk. - `example.html` is complete and matches the same visual language as the template. - Skill frontmatter uses `od.mode: template` and `od.scenario: live-artifacts`. - Three-slide structure is preserved: cover, priorities, roadmap. - Headline hierarchy remains bold slab-serif with blue/orange retro treatment. - Timeline + KPI strip is present on slide 3. - No sandbox-hostile APIs are used unguarded (`localStorage`, `alert`, `confirm`, `prompt`). ## P1 - Motion pacing feels premium and controlled; scene transitions are legible. - Scene indicator updates correctly across slides. - Keyboard interactions (`1/2/3`, `R`) work in local preview. - Layout keeps clean alignment and readable density at 1920x1080. ## P2 - Decorative effects (grain/shadows) stay subtle enough to avoid visual fatigue. - Color contrast remains readable for body copy over cream/blue regions. <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=1920, height=1080" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bebas+Neue&family=Inter:wght@500;700;800;900&family=Permanent+Marker&display=swap" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <style> :root { --blue:#1537ff; --cream:#f4f0e3; --ink:#0e0e0f; --orange:#ffb34a; --red-shadow:#f05a3a; } * { box-sizing:border-box; margin:0; padding:0; } html,body { width:1920px; height:1080px; overflow:hidden; background:var(--cream); font-family:Inter,sans-serif; color:va