From kapil-agent-skills
Archive, sync, and organize a user's CodePen pens and collections into a local folder. Use when the user wants to scrape/download/export CodePen pens, back up CodePen collections, re-run a CodePen archive sync, classify pens by collection and pen name, preserve raw CodePen exports, or create a resumable local CodePen backup from profile, collection, or pen URLs.
How this skill is triggered — by the user, by Claude, or both
Slash command
/kapil-agent-skills:codepen-archiverThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill to create or update a local archive of CodePen pens. The agent should run the bundled `scripts/codepen-archive.mjs` script on the user's behalf so users do not need to manually run CLI commands.
Use this skill to create or update a local archive of CodePen pens. The agent should run the bundled scripts/codepen-archive.mjs script on the user's behalf so users do not need to manually run CLI commands.
CodePen does not provide a traditional public REST or GraphQL API. Treat CodePen pages and export URLs as web surfaces that may change. Preserve raw exports first, then organize derived copies.
This skill should activate when users say phrases like:
When triggered, start a short intake and then execute the workflow directly.
Ask exactly these:
Ask exactly these:
--force)If profile discovery fails or is blocked, ask for either:
Do not ask the user for an output path; the script defaults to the user's system Downloads folder in a CodePen Archive subfolder when --output is not provided.
If private content or 403 responses appear, guide the user:
codepen.io.cookie request header value.CODEPEN_COOKIE.Never ask for password. Never store the cookie in source files.
The agent should run the script itself. Use this command pattern:
node skills/codepen-archiver/scripts/codepen-archive.mjs --username CODEPEN_USERNAME --output "/absolute/path/CodePen Archive"
If private access is needed, set env in the same command/session:
CODEPEN_COOKIE='session-cookie-from-browser' node skills/codepen-archiver/scripts/codepen-archive.mjs --username CODEPEN_USERNAME --output "/absolute/path/CodePen Archive"
For a fully automated agent-driven run (recommended when Cloudflare blocks direct discovery), use the bundled Puppeteer scraper to collect all pen URLs from a signed-in browser context and then archive them.
cd skills/codepen-archiver
npm ci
CODEPEN_COOKIE if required for private pens.# with cookie in env
CODEPEN_COOKIE='PASTE_FULL_COOKIE_HERE' npm run run-full -- --username CODEPEN_USERNAME
# or without cookie for public profiles (may still be blocked by anti-bot protections)
npm run run-full -- --username CODEPEN_USERNAME
The runner writes a pen list to skills/codepen-archiver/scraped-pens.txt and then runs the archiver against that list.
If the user omits --output, the script will default to the current user's system Downloads folder inside a CodePen Archive subfolder. On Linux it attempts to respect the XDG XDG_DOWNLOAD_DIR setting when present.
If the user has collection URLs, prefer explicit URLs because they are more reliable than profile discovery:
node scripts/codepen-archive.mjs \
--collection-url "https://codepen.io/USER/collection/ABCxyz" \
--collection-url "https://codepen.io/USER/collection/DEFuvw" \
--output "/absolute/path/CodePen Archive"
If the user has a file of pen URLs:
node skills/codepen-archiver/scripts/codepen-archive.mjs --pen-list "/absolute/path/pens.txt" --output "/absolute/path/CodePen Archive"
CODEPEN_COOKIE and re-run.manifest.json and summarize:
--force only if user asks to refresh existing exports.Dry-run command:
node skills/codepen-archiver/scripts/codepen-archive.mjs --username CODEPEN_USERNAME --output "/absolute/path/CodePen Archive" --dry-run
The script writes:
CodePen Archive/
manifest.json
raw/
Collection Name/
Pen Title/
src/
dist/
metadata.json
organized/
html/
css/
javascript/
typescript/
react/
vue/
svelte/
animation/
svg/
webgl/
p5/
threejs/
d3/
accessibility/
misc/
_downloads/
raw/ is the source of truth. Do not refactor files in raw/.
organized/ is a derived view. It copies each pen's src/ folder and creates a normalized entry file when possible, such as App.jsx, script.js, or index.html.
Classification tries to preserve the user's intent by preferring explicit collection names first (if a collection name clearly matches a known category). If a collection name is not mappable, the script inspects the exported source files and metadata for framework, language, or tooling hints.
Primary categories detected (in order of preference): react, vue, svelte, typescript, javascript, css, html, animation, svg, webgl, p5, threejs, d3, accessibility, misc.
Heuristics used:
react or threejs), that category is used..tsx, ReactDOM, createRoot → react; .ts → typescript; .js/babel → javascript; scss/sass → css; <svg → svg; three.js/webgl → webgl).misc.CODEPEN_COOKIE and CODEPEN_TOKEN.manifest.json so syncs can resume and skip already archived pens.--dry-run before downloading hundreds of pens.--force only with user approval because it replaces archived pen folders inside the output folder.Read references/codepen-export-notes.md when you need CodePen-specific constraints, export behavior, or current source links.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub kapilraghuwanshi/skills --plugin kapil-agent-skills