How to install html-ppt-retro-quarterly-review
npx skills add https://github.com/nexu-io/open-design --skill html-ppt-retro-quarterly-reviewFull 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.
ui-ux-pro-max
|
web-design-guidelines
|
frontend-design
|
design-brief
|
pptx-html-fidelity-audit
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 strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export — including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair. Also trigger when the user shows you a deck.html and a deck.pptx side by side and is debugging visual differences.
hatch-pet
Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.