Chrome CDP Browser Control
zenstory-ai/oh-story-claudecode
Drives a Chrome window over the DevTools Protocol with the agent-browser CLI, so the agent can reuse your logged-in sessions, read pages and pull tokens.
ローカルで検証済みのブラウザ向け HTML、CSS、JavaScript を CodePen Prefill launcher に変換し、承認後に未保存の Pen を開く。フロントエンドのデモを CodePen で共有して、記事へ埋め込む準備をして、と依頼されたときに使用する。Node.js、サーバー、CLI、ビルド、複数プロセスが必要な例には使用しない。
MITAuto-check passed
Install Codepen Share
$ npx skills add azukiazusa1/sapper-blog-app --skill codepen-share -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install azukiazusa1/sapper-blog-app codepen-share --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/azukiazusa1/sapper-blog-app.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/codepen-share .claude/skills/codepen-share && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "codepen-share" agent skill from https://github.com/azukiazusa1/sapper-blog-app/tree/main/.claude/skills/codepen-share into .claude/skills/codepen-share/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codepen-share", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/azukiazusa1/sapper-blog-app/tree/main/.claude/skills/codepen-shareType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add azukiazusa1/sapper-blog-app --skill codepen-share -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install azukiazusa1/sapper-blog-app codepen-share --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/azukiazusa1/sapper-blog-app.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/codepen-share .agents/skills/codepen-share && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "codepen-share" agent skill from https://github.com/azukiazusa1/sapper-blog-app/tree/main/.claude/skills/codepen-share into .agents/skills/codepen-share/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codepen-share", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add azukiazusa1/sapper-blog-app --skill codepen-share -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install azukiazusa1/sapper-blog-app codepen-share --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/azukiazusa1/sapper-blog-app.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/codepen-share .cursor/skills/codepen-share && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "codepen-share" agent skill from https://github.com/azukiazusa1/sapper-blog-app/tree/main/.claude/skills/codepen-share into .cursor/skills/codepen-share/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codepen-share", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/azukiazusa1/sapper-blog-app.git --path .claude/skills/codepen-share--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add azukiazusa1/sapper-blog-app --skill codepen-share -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install azukiazusa1/sapper-blog-app codepen-share --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/azukiazusa1/sapper-blog-app.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/codepen-share .gemini/skills/codepen-share && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "codepen-share" agent skill from https://github.com/azukiazusa1/sapper-blog-app/tree/main/.claude/skills/codepen-share into .gemini/skills/codepen-share/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codepen-share", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install azukiazusa1/sapper-blog-app codepen-shareInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add azukiazusa1/sapper-blog-app --skill codepen-share -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/azukiazusa1/sapper-blog-app.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/codepen-share .github/skills/codepen-share && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "codepen-share" agent skill from https://github.com/azukiazusa1/sapper-blog-app/tree/main/.claude/skills/codepen-share into .github/skills/codepen-share/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codepen-share", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add azukiazusa1/sapper-blog-app --skill codepen-share -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install azukiazusa1/sapper-blog-app codepen-share --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/azukiazusa1/sapper-blog-app.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/codepen-share .opencode/skills/codepen-share && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "codepen-share" agent skill from https://github.com/azukiazusa1/sapper-blog-app/tree/main/.claude/skills/codepen-share into .opencode/skills/codepen-share/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "codepen-share", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
codepen-share- GitHub stars
- 189
- Token cost
- ~438 tokens
- SKILL.md length
- 70 words
- Files
- 4 (incl. scripts, references)
- Skills in repo
- 6
- Repo updated
- First seen
- Licence
- MIT
At a glance
ローカルで検証済みのブラウザ向け HTML、CSS、JavaScript を CodePen Prefill launcher に変換し、承認後に未保存の Pen を開く。フロントエンドのデモを CodePen で共有して、記事へ埋め込む準備をして、と依頼されたときに使用する。Node.js、サーバー、CLI、ビルド、複数プロセスが必要な例には使用しない。
- SKILL.md covers 適合性を確認する, パネル用ファイルを準備する, launcher を生成する and 外部転送前に承認を得る, plus 1 more section
- Runs Python scripts from its folder; calls python3
What it does
Codepen Share is an agent skill from azukiazusa1/sapper-blog-app. ローカルで検証済みのブラウザ向け HTML、CSS、JavaScript を CodePen Prefill launcher に変換し、承認後に未保存の Pen を開く。フロントエンドのデモを CodePen で共有して、記事へ埋め込む準備をして、と依頼されたときに使用する。Node.js、サーバー、CLI、ビルド、複数プロセスが必要な例には使用しない。
Its SKILL.md is about 440 tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including scripts and reference files (for example `agents/openai.yaml`, `references/codepen-prefill.md` and `scripts/create-codepen-prefill.py`).
It works with JavaScript and Node.js. The licence is MIT.
Example prompts
- “/codepen-share”
Requirements
- Python 3
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit 0ec7abd. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 1 file in scripts/ (Python), which the agent can run.
Shell commands in SKILL.md call:
python3
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Codepen Share loads about 438 tokens when it runs, and up to ~831 if it reads all its reference files. Until then it costs about 48 tokens; SKILL.md has 70 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from azukiazusa1/sapper-blog-app at commit 0ec7abd, republished under its MIT licence (© azukiazusa1). 70 words, ~438 tokens.
Download SKILL.mdSave it as
.claude/skills/codepen-share/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- codepen-share
- description
- ローカルで検証済みのブラウザ向け HTML、CSS、JavaScript を CodePen Prefill launcher に変換し、承認後に未保存の Pen を開く。フロントエンドのデモを CodePen で共有して、記事へ埋め込む準備をして、と依頼されたときに使用する。Node.js、サーバー、CLI、ビルド、複数プロセスが必要な例には使用しない。
検証済みサンプルを CodePen で共有する
CodePen を検証環境ではなく共有先として扱い、保存や公開範囲の決定をユーザーへ残す。
適合性を確認する
references/codepen-prefill.md を読み、次をすべて満たす場合だけ進める。
- ブラウザの HTML、CSS、JavaScript だけで動作する
- 中心的な挙動をローカルで検証済みである
- Node.js、サーバー、CLI、ビルド、複数プロセスを必要としない
- API キー、トークン、Authorization ヘッダー、非公開 URL、個人情報、本番認証情報を含まない
ローカル検証が不明な場合は、根拠を確認するか検証工程へ戻す。CodePen 上で動いたことを記事の主張の根拠にしない。
パネル用ファイルを準備する
使用するパネルだけを分離する。
- HTML:
body配下の要素だけ。doctype、html、head、body、script、styleを含めない - CSS: CSS だけ。
styleタグを含めない - JavaScript: JavaScript だけ。
scriptタグを含めない
共有のために検証済みの挙動を変えたり、不要な装飾を加えたりしない。
launcher を生成する
python3 .claude/skills/codepen-share/scripts/create-codepen-prefill.py \
--title "デモのタイトル" \
--description "記事用の検証済みサンプル" \
--html examples/<slug>/codepen.html \
--css examples/<slug>/codepen.css \
--js examples/<slug>/codepen.js \
--output examples/<slug>/open-in-codepen.html使用するパネルだけを渡す。既存の出力を置き換える必要がある場合だけ、対象を確認して --force を使う。launcher はローカルの HTML フォームであり、作成しただけではコードを外部へ転送しない。
外部転送前に承認を得る
launcher を開く、またはフォームを送信する前に、次をユーザーへ示す。
- Pen のタイトルと説明
- 転送する正確なファイル一覧
- 機密情報が含まれないこと
- コードはローカルで検証し、CodePen を検証環境にしていないこと
- 開く Pen は未保存であること
明示的な承認を得てから launcher を開き、フォームを送信する。入力済みの未保存 Pen が開いたら終了する。Save を押さず、公開範囲を選ばず、iframe を記事へ自動挿入しない。保存、公開範囲、共有 URL はユーザーが決定する。
記事へ位置を示す必要がある場合は、結果を説明した直後にコメントを置く。
<!-- CodePen: ここに「<デモ名>」の iframe を挿入する -->完了を報告する
launcher の場所、転送したパネル、ローカル検証の根拠、未保存であることを報告する。launcher を開けない場合はパスを渡し、フォームを送信すると未保存 Pen が開くことを説明する。
© azukiazusa1, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 3 other files (scripts, references) in .claude/skills/codepen-share of azukiazusa1/sapper-blog-app.
- SKILL.md
- agents/openai.yaml
- references/codepen-prefill.md
- scripts/create-codepen-prefill.py
Open the folder on GitHubat commit 0ec7abd
Compare with similar skills
Codepen Share next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Codepen Share this skillazukiazusa1/sapper-blog-app | 189 | — | ~438 | Automated safety check: Pass | MIT | |
| Chrome CDP Browser Controlzenstory-ai/oh-story-claudecode | 7.4k | 2 repos | ~1.2k | Automated safety check: Pass | MIT | |
| Bun DevelopmentGabrielMartinMoran/mind | 148 | 12 repos | ~3.5k | Automated safety check: Notes | MIT | |
| Generate Release Notesteambit/bit | 18k | — | ~2.2k | Automated safety check: Pass | Custom licence | |
| Compromise NLP Libraryspencermountain/compromise | 12k | — | ~2k | Automated safety check: Pass | MIT | |
| Ego Browserkwakseongjae/oh-my-design | 533 | 1 repos | ~4.9k | Automated safety check: Pass | MIT |
Similar skills
Bun Development
GabrielMartinMoran/mind
Modern JavaScript/TypeScript development with Bun runtime. An agent skill from GabrielMartinMoran/mind.
Generate Release Notes
teambit/bit
Generate comprehensive release notes for Bit from git commits and pull requests.
Compromise NLP Library
spencermountain/compromise
Helps write and debug JavaScript or TypeScript that uses the compromise English NLP library for matching, entity extraction, tagging and sentence transforms.
Ego Browser
kwakseongjae/oh-my-design
When you need a browser, read this Skill by default. An agent skill from kwakseongjae/oh-my-design.
ast-grep Codemod Reference
warp-drive-data/warp-drive
Reference for writing and debugging TypeScript and JavaScript codemods with @ast-grep/napi: parsing, node queries, meta-variables, rule objects and editing.
More from azukiazusa1/sapper-blog-app
Tech Review
azukiazusa1/sapper-blog-app
技術ブログ記事、チュートリアル、技術原稿を、技術的正確性、一次情報、現在の API 挙動、コード、再現性、セキュリティ、アクセシビリティ、互換性の観点からレビューする。技術的な主張、コードサンプル、対応バージョン、仕様、公開前の正確性を確認してほしいと依頼されたときに使用する。一般的な文章校正は article-review に任せ、明示的な依頼なしに原稿を変更しない。
Write Blog Article
azukiazusa1/sapper-blog-app
ユーザーが新しい技術を学ぶことを第一目的として、このリポジトリの文体と構成に従い、調査、構成合意、サンプル実装・検証、執筆、レビュー、理解度クイズまでを行って技術ブログ記事の下書きを作成する。ユーザーがブログ記事を書いて、新しい API や機能を紹介して、ハンズオンを作って、技術調査を記事化して、経験や意見を記事にして、と依頼したときに使用する。新しい API・Web…
Q
azukiazusa1/sapper-blog-app
技術記事の内容から読者の理解度をチェックする4択クイズを指定のYAML形式で生成するスキル。ユーザーが「この記事のクイズを作って」「理解度チェックを作成して」「記事を読んだ人向けの問題を作って」「selfAssessment形式でクイズを作って」と依頼したときに必ず使う。ブログ記事、技術ドキュメント、チュートリアル、解説記事、技術書の章など、読者の学習内容を確認する問題を作る必要があるあらゆる場…
Article Review
azukiazusa1/sapper-blog-app
引数で指定した記事のレビューを行います。記事スラッグを引数に渡すと、textlint による自動校正と誤字脱字・文法的な誤りの指摘を行います。/article-review [スラッグ] の形式で呼び出してください。記事を書いた後のチェック、公開前の校正、文章の品質確認にも使用してください。
Translate
azukiazusa1/sapper-blog-app
記事を英語に翻訳する。記事スラッグを引数に渡すと、日本語の記事を英語に翻訳して contents/blogPost/en/ に出力する。/translate [スラッグ] の形式で呼び出す。
Related
Works with
Questions about Codepen Share
What does Codepen Share do?
ローカルで検証済みのブラウザ向け HTML、CSS、JavaScript を CodePen Prefill launcher に変換し、承認後に未保存の Pen を開く。フロントエンドのデモを CodePen で共有して、記事へ埋め込む準備をして、と依頼されたときに使用する。Node.js、サーバー、CLI、ビルド、複数プロセスが必要な例には使用しない。. Codepen Share is an agent skill from azukiazusa1/sapper-blog-app.
How do I install Codepen Share in Claude Code?
Run `npx skills add azukiazusa1/sapper-blog-app --skill codepen-share -a claude-code`. Or copy the skill folder (.claude/skills/codepen-share in azukiazusa1/sapper-blog-app) into .claude/skills/codepen-share in your project. Claude Code loads it when a task matches its description.
How do I install Codepen Share in Codex?
Run `npx skills add azukiazusa1/sapper-blog-app --skill codepen-share -a codex`. Or copy the skill folder (.claude/skills/codepen-share in azukiazusa1/sapper-blog-app) into .agents/skills/codepen-share in your project. Codex loads it when a task matches its description.
Can I use Codepen Share in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add azukiazusa1/sapper-blog-app --skill codepen-share -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/codepen-share, .gemini/skills/codepen-share, .github/skills/codepen-share and .opencode/skills/codepen-share in your project.
What does Codepen Share need to run?
Going by SKILL.md and its folder, Codepen Share needs Python for the scripts in its folder and the command-line tools its instructions call (python3). Our summary lists: Python 3; Node.js.
Does Codepen Share access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Codepen Share safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Codepen Share use?
Codepen Share is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Codepen Share use?
About 438 tokens (SKILL.md is roughly 1.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 393 tokens, read only when the agent opens those files.
What are the alternatives to Codepen Share?
Skills that share tags, products or a category with Codepen Share: Chrome CDP Browser Control (zenstory-ai/oh-story-claudecode, 7.4k stars), Bun Development (GabrielMartinMoran/mind, 148 stars), Generate Release Notes (teambit/bit, 18k stars) and Compromise NLP Library (spencermountain/compromise, 12k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Codepen Share?
azukiazusa1 (a GitHub user) maintains it in azukiazusa1/sapper-blog-app, which has 189 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 6, 2026.
Source: azukiazusa1/sapper-blog-app on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.