Skip to content
Skillpedia
Documentation101k · #560

hps-y2k-chrome

Has your agent analyze key business metrics. It identifies what's working and which metric to move next. Useful for data teams and leadership.

What it does

This plugin creates presentations with a specific 'Y2K Chrome' design. It helps present key business data, like what's working well and which metric to focus on for improvement.

When to use it

  • ✓When creating a business report for leadership.
  • ✓When presenting customer activation and retention metrics.
  • ✓When deciding which performance indicator is most important to improve.

Example of what to ask your AI

“Create a presentation on key customer activation and retention drivers, focusing on what's working and the next metric to improve.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/nexu-io/open-design/blob/main/plugins/_official/examples/hps-y2k-chrome/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/nexu-io/open-design/blob/main/plugins/_official/examples/hps-y2k-chrome/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
How it works

You provide the data and main content. The plugin uses a predefined design template with visual elements like gradients, frosted glass, and chrome-effect text to automatically format your presentation.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add nexu-io/open-design --skill hps-y2k-chrome

Or download just the file:

curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/hps-y2k-chrome/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

Y2K Chrome (hps-y2k-chrome)

Single-theme deck plugin locked to the y2k-chrome theme from the upstream MIT-licensed lewislulu/html-ppt-skill (36 themes × 31 layouts × 27 animations — this plugin ships exactly one of those skins, fully baked into one self-contained seed: example.html).

Start from example.html. Replace content only. Never rewrite the design system or the runtime script. No colors or fonts outside this spec.

Locked token sheet (:root — do not add, remove, or recolor)

:root{
  --bg:#dfe4ec;            --bg-soft:#eef1f6;
  --surface:rgba(255,255,255,.72);   --surface-2:rgba(255,255,255,.5);
  --border:rgba(120,135,170,.32);    --border-strong:rgba(80,100,140,.55);
  --text-1:#1a1f2e;        --text-2:#4a536a;       --text-3:#8590a6;
  --accent:#8a5cff;        --accent-2:#3ccfd8;     --accent-3:#ff84c4;
  --good:#1fb98c;          --warn:#e8a13d;         --bad:#e0445a;
  --grad:linear-gradient(135deg,#b8c4d8 0%,#f5f7fb 30%,#8a9ab8 55%,#e8ecf4 80%,#6b7a95 100%);
  --grad-soft:linear-gradient(135deg,#c9e4ff,#f5d6ff 50%,#d6fffa);
  --chrome-text:linear-gradient(180deg,#f8faff 0%,#9aa8c4 50%,#4a5670 100%);
  --radius:26px;           --radius-sm:16px;       --radius-lg:36px;
  --shadow:0 12px 30px rgba(70,90,130,.22),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(80,100,140,.2);
  --shadow-lg:0 24px 60px rgba(70,90,130,.35),inset 0 2px 0 rgba(255,255,255,.95);
  --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
  --font-display:'Space Grotesk','Inter',sans-serif;
  --font-mono:'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  --letter-tight:-.03em;   --letter-normal:-.01em;
  --ease:cubic-bezier(.4,0,.2,1);
}

Fonts: Space Grotesk is both display and body type ('Noto Sans SC' fallback for CJK), JetBrains Mono for code/labels. Loaded via Google Fonts @import only — the sole permitted external resource.

Signature devices (use these, nothing else)

  1. Silver-metal canvas — body carries the full-bleed 5-stop gradient linear-gradient(135deg,#c4cfe0 0%,#f0f3f8 25%,#aab8d0 50%,#f5f7fb 75%,#b8c4d8 100%). Every slide is transparent over it. Never paint an opaque slide background.
  2. Chrome-clipped type — .h1, .chrome-text, .stat-big clip --chrome-text (white→steel→gunmetal) via background-clip:text, plus filter:drop-shadow(0 2px 3px rgba(40,55,85,.38)) so the white top stop keeps letter definition over the light canvas. Display numerals and hero words are always chrome, never flat color.
  3. Frosted-glass cards — .card = --surface (72% white) + backdrop-filter:blur(16px) saturate(140%) + --shadow. The inset 0 1px 0 rgba(255,255,255,.9) top highlight is the signature — never drop it. Mega radius --radius:26px (lg surfaces 36px).
  4. Candy accents — purple --accent leads (kickers, progress bar, checks), aqua --accent-2 and pink --accent-3 support (orbs, chart bars, eyebrow tints). Accents are for small surfaces only; large fills use --grad / --grad-soft.
  5. Glossy orbs — .orb radial-gradient candy spheres with a white specular highlight, absolutely positioned, z-index:0, decor only.
  6. Chrome sparkles — inline 4-point star SVGs (.sparkle) filled with the chrome gradient or candy accents.
  7. Chrome capsule pills — .pill = linear-gradient(180deg,#fff,#d4dcec) with --border stroke; .pill-accent tints with --accent.

Forbidden: dark mode, neon-on-black, hard offset shadows, flat untextured H1 color, any hex value or font family not listed above.

Page structure & runtime (keep verbatim from the seed)

  • One self-contained HTML file: inline <style> + inline <script>, zero build, zero external JS. Charts are pure CSS / inline SVG — never Chart.js or mermaid. Icons are inline SVG. No external images.
  • Every page is <section class="slide" data-title="…"> inside <div class="deck" id="deck"> — a horizontal scroll-snap strip, one 100vw × 100vh screen per slide, padding 72px 96px, no internal scrolling.
  • Fixed chrome: .deck-header (deck name + y2k-chrome theme chip), .deck-footer (attribution + N / total counter), .progress-bar (accent fill).
  • Keyboard runtime: ← → Space PageUp PageDown Home End navigate; #/N (1-based) hash deep-links with history.replaceState in try/catch (srcdoc-safe). The script dedupes the dual window/document

…

FAQ

What does 'Y2K Chrome' mean?

It's the name of the presentation's visual style, inspired by the year 2000 aesthetic with a modern, 'chrome' touch.

Can I change the colors and fonts?

No, the design is fixed to maintain visual consistency. You can only change the content within the defined elements.

How is content inserted?

You edit the provided HTML file, replacing the example text and data with your own content, while keeping the existing classes and structure.

Details

Original description by the author

OpenDesign's KPI decision brief: activation and retention drivers, what's working, and the one metric to move next. Built as a decision-grade data & finance deck for CRO, RevOps, leadership.

repo: nexu-io/open-design

Popularity

GitHub stars
101k
Ranking position
#560
License
Apache-2.0
Updated
10/16/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Similar skills