Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

html-ppt-retro-quarterly-review — Claude Code skill for retro HTML

A quarterly review template in bold blue-and-orange editorial style: three cinematic slides with slab headlines and a cream paper feel. No frameworks, one self-contained HTML file.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add nexu-io/open-design --skill html-ppt-retro-quarterly-review -a claude-code
Open on GitHub

What html-ppt-retro-quarterly-review does

The skill ships a ready-made HTML deck with three screens: a cover with a hero title lockup, a triptych grid of three priorities, and a roadmap timeline with a KPI strip. The visual grammar is high-contrast blue and orange over cream paper sections.

The template is fully self-contained — inline CSS and JS, no runtime dependencies. Keyboard shortcuts 1/2/3 jump between slides, R restarts, a page indicator tracks the scene, and wipe transitions with staggered reveals handle the motion. In video mode each slide holds under three seconds.

Before generating, the skill reads the active DESIGN.md and maps token changes into CSS variables without breaking the retro palette. It then starts from assets/template.html and validates against references/checklist.md before emitting the artifact. Rebuilding from scratch is off the table — that would lose the baked-in animations and typographic hierarchy.

What it helps with

  • build a quarterly review deck as a single HTML file
  • get a retro blue-and-orange visual style ready to use
  • add keyboard navigation and animated transitions
  • validate the template against a checklist before output
  • map DESIGN.md token changes into CSS variables

Example prompts for the agent

  • Make a retro quarterly review using this template
  • I need a roadmap slide in the blue-and-orange style
  • Build an HTML deck with three priorities and a KPI strip

How to install html-ppt-retro-quarterly-review

1Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill html-ppt-retro-quarterly-review -a claude-code

2Manually: put the files in place

~/.claude/skills/html-ppt-retro-quarterly-review/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/html-ppt-retro-quarterly-review/

From the same set106

The whole set →
ui-ux-pro-max nexu-io A discovery catalog entry for the UI/UX Pro Max skill in OpenDesign. It registers design system triggers so agents recognize interface usability requests. Claude Code CX Codex Cursor +1 5,400installs frontend-design nexu-io Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs threejs nexu-io Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js. Claude Code CX Codex Cursor +1 3,400installs creative-director nexu-io This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique. Claude Code CX Codex Cursor +1 3,400installs design-brief nexu-io Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional." Claude Code CX Codex Cursor +1 3,400installs apple-hig nexu-io Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning. Claude Code CX Codex Cursor +1 3,200installs hatch-pet nexu-io Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions. Claude Code CX Codex Cursor +1 3,100installs design-md nexu-io Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system. Claude Code CX Codex Cursor +1 3,100installs

Similar

expo-data-fetching expo Configures data fetching, caching, and screen states in Expo apps. Guides network calls with expo/fetch and TanStack Query. Claude Code CX Codex Cursor +1 27,200installs playwright-skill lackeyjb Write and run Playwright scripts directly in your IDE. Auto-detects dev servers, takes screenshots, checks responsive layouts, tests login flows, and validates web functionality. Claude Code CX Codex Cursor +1 6,900installs angular-migration Seth Hobson Helps move AngularJS applications to Angular through a full rewrite or staged migration. Use it for hybrid apps, component conversion, and dependency injection changes. Claude Code CX Codex Cursor 10,900installs mcp vercel-labs This skill helps build MCP servers that render interactive json-render UIs in Claude, ChatGPT, Cursor, and VS Code. Claude Code CX Codex Cursor +1 5,800installs antislop miqdadbadjuber A rule-based filter for generic AI output in interfaces and code. Use it when an agent needs explicit checks for UI, copy, accessibility, or mobile layout. Claude Code CX Codex Cursor +1 7,300installs material-ui-styling mui Helps the agent pick the right Material UI styling layer: sx, styled(), theme components, or global CSS. Use it when edits pile up and you need to avoid extra wrapper nesting. Claude Code CX Codex Cursor +1 685installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about html-ppt-retro-quarterly-review

How do I install html-ppt-retro-quarterly-review in Claude Code?

Run npx skills add nexu-io/open-design --skill html-ppt-retro-quarterly-review -a claude-code. The skill lands in ~/.claude/skills/html-ppt-retro-quarterly-review/SKILL.md.

What does html-ppt-retro-quarterly-review do?

It provides a three-slide HTML presentation template: a cover, a priority grid, and a roadmap timeline with KPIs. The style is a bold blue-and-orange retro editorial look.

Does it need any dependencies?

No. The output is one self-contained HTML file with inline CSS and JS. The skill only needs file write access.

Source text

SKILL.md · Apache-2.0 
---
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:

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>
```

© nexu-io · Apache-2.0 · nexu-io/open-design

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor