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
Ready-to-paste message
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-chromeOr 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.mdTechnical 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)
- Silver-metal canvas —
bodycarries the full-bleed 5-stop gradientlinear-gradient(135deg,#c4cfe0 0%,#f0f3f8 25%,#aab8d0 50%,#f5f7fb 75%,#b8c4d8 100%). Every slide is transparent over it. Never paint an opaque slide background. - Chrome-clipped type —
.h1,.chrome-text,.stat-bigclip--chrome-text(white→steel→gunmetal) viabackground-clip:text, plusfilter: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. - Frosted-glass cards —
.card=--surface(72% white) +backdrop-filter:blur(16px) saturate(140%)+--shadow. Theinset 0 1px 0 rgba(255,255,255,.9)top highlight is the signature — never drop it. Mega radius--radius:26px(lg surfaces 36px). - Candy accents — purple
--accentleads (kickers, progress bar, checks), aqua--accent-2and pink--accent-3support (orbs, chart bars, eyebrow tints). Accents are for small surfaces only; large fills use--grad/--grad-soft. - Glossy orbs —
.orbradial-gradient candy spheres with a white specular highlight, absolutely positioned,z-index:0, decor only. - Chrome sparkles — inline 4-point star SVGs (
.sparkle) filled with the chrome gradient or candy accents. - Chrome capsule pills —
.pill=linear-gradient(180deg,#fff,#d4dcec)with--borderstroke;.pill-accenttints 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, one100vw × 100vhscreen per slide, padding72px 96px, no internal scrolling. - Fixed chrome:
.deck-header(deck name +y2k-chrometheme chip),.deck-footer(attribution +N / totalcounter),.progress-bar(accent fill). - Keyboard runtime:
←→SpacePageUpPageDownHomeEndnavigate;#/N(1-based) hash deep-links withhistory.replaceStatein 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
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
architecture-decision-records
Has your agent record important project structure decisions. It helps to understand the reasoning behind choices and maintain a clear history of changes.
affaan-m/ECC
code-tour
Lets your agent create step-by-step code walkthroughs with exact file and line anchors. It's useful for project introductions, code explanations, or change reviews. Helps understand how a system works.
affaan-m/ECC
codebase-onboarding
Helps your agent analyze unfamiliar code and create an onboarding guide. It includes an architecture map, entry points, and conventions. Ideal for starting on a new project.
affaan-m/ECC