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-marketplaceThis skill uses the workspace's default tool permissions.
Generate self-contained, copy-paste ready code for CodePen 2.0's file-based editor.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
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.