Creates CodePen 2.0 demos with copy-paste ready code. Use when creating interactive demos, code examples, or browser API demonstrations for CodePen.
npx claudepluginhub kkhys/claude-code-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
example.mdGenerate copy-paste ready code for CodePen 2.0.
CodePen 2.0 uses a file-based structure. Output each file with its filename:
**index.html**
[code block]
**style.css**
[code block]
**script.ts**
[code block]
Title: `{title}`
index.html is a complete HTML document (<!doctype html> from the top).ts extensionindex.html, style.css, script.ts<p> instructionSee example.md for a full demo (Screen Wake Lock API).
.ts files if file count allows, otherwise use inline Blob:const blob = new Blob([code], { type: "application/javascript" });
const worker = new Worker(URL.createObjectURL(blob));
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.