Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From base
Generate CodePen 2.0 demos with copy-paste ready code. Use when the user wants to create interactive demos, playground examples, UI component showcases, browser API demonstrations, CSS animations, or any front-end experiment for CodePen. Also trigger when the user mentions "CodePen", "pen", "playground demo", or wants to share a working code snippet that runs in the browser.
npx claudepluginhub kkhys/claude-code-marketplaceHow this skill is triggered — by the user, by Claude, or both
Slash command
/base:creating-codepen-demoThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate self-contained, copy-paste ready code for CodePen 2.0's file-based editor.
Generates self-contained HTML playgrounds with controls, live previews, and copyable prompts for interactive exploration of design, data, code review, and architecture topics.
Creates self-contained interactive HTML playgrounds with controls, live previews, and copyable prompts for visual exploration of design, data, code, and documents.
Builds production-ready React/Next.js components for premium interactive experiences: canvas visualizations, glassmorphism, Framer Motion/GSAP animations, Three.js/Spline 3D, micro-interactions, particles, and sound design.
Share bugs, ideas, or general feedback.
Generate self-contained, copy-paste ready code for CodePen 2.0's file-based editor.
Classic CodePen had three fixed panes (HTML fragment, CSS, JS). CodePen 2.0 uses a file-based model — you create actual files like index.html, style.css, script.ts. The HTML is a full document starting from <!doctype html>, not a fragment injected into <body>. This matters because the user copies each file into a separate tab in the editor.
Default to 3 files — this keeps demos simple, portable, and within free-plan limits:
index.html — Full HTML document (<!doctype html> at the top)style.css — Stylesscript.ts — Logic (TypeScript is natively supported; no build config needed)Link them with relative paths in index.html:
<link rel="stylesheet" href="./style.css" />
<script src="./script.ts"></script>
Add more files only when the demo genuinely requires separation (e.g., a Web Worker).
Present each file as a labeled code block, then a suggested title:
index.html
<!doctype html>
...
style.css
body { ... }
script.ts
// logic here
Title: Descriptive Title Here
A viewer should open the pen and grasp what's happening within seconds. The code is the star — everything else gets out of the way.
#0a0a0a), light text (#e0e0e0), monospace font (ui-monospace, Menlo, monospace)<p> explaining what to doThis aesthetic keeps demos visually consistent and focuses attention on behavior, not chrome.
Browser API (Wake Lock, Clipboard, Geolocation, etc.):
UI component (toggle, modal, accordion, etc.):
Animation (CSS transitions, Web Animations API, requestAnimationFrame, etc.):
as HTMLButtonElement) for DOM queries. No tsconfig.json needed — CodePen auto-detects .ts and .tsx extensions.package.json, pen.config.json, etc.) don't count toward the file limit, so the 3-file budget is entirely for your code.import confetti from "canvas-confetti") — CodePen auto-generates package.json and import maps. Use sparingly; vanilla is preferred..ts file if you have room, otherwise inline with Blob:const blob = new Blob([workerCode], { type: "application/javascript" });
const worker = new Worker(URL.createObjectURL(blob));
See references/example.md for a complete Screen Wake Lock API demo showing the expected file structure and style.