ローカルで検証済みのブラウザ向け HTML、CSS、JavaScript を CodePen Prefill launcher に変換し、承認後に未保存の Pen を開く。フロントエンドのデモを CodePen で共有して、記事へ埋め込む準備をして、と依頼されたときに使用する。
Node.js、サーバー、CLI、ビルド、複数プロセスが必要な例には使用しない。
The English summary is being prepared. Showing the original description.
Run score Not tested
See how to installReview the instructions the agent will receive before you install.
CodePen を検証環境ではなく共有先として扱い、保存や公開範囲の決定をユーザーへ残す。
references/codepen-prefill.md を読み、次をすべて満たす場合だけ進める。
ローカル検証が不明な場合は、根拠を確認するか検証工程へ戻す。CodePen 上で動いたことを記事の主張の根拠にしない。
使用するパネルだけを分離する。
body 配下の要素だけ。doctype、html、head、body、script、style を含めないstyle タグを含めないscript タグを含めない共有のために検証済みの挙動を変えたり、不要な装飾を加えたりしない。
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 を開く、またはフォームを送信する前に、次をユーザーへ示す。
明示的な承認を得てから launcher を開き、フォームを送信する。入力済みの未保存 Pen が開いたら終了する。Save を押さず、公開範囲を選ばず、iframe を記事へ自動挿入しない。保存、公開範囲、共有 URL はユーザーが決定する。
記事へ位置を示す必要がある場合は、結果を説明した直後にコメントを置く。
<!-- CodePen: ここに「<デモ名>」の iframe を挿入する -->
launcher の場所、転送したパネル、ローカル検証の根拠、未保存であることを報告する。launcher を開けない場合はパスを渡し、フォームを送信すると未保存 Pen が開くことを説明する。
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
引数で指定した記事のレビューを行います。記事スラッグを引数に渡すと、textlint による自動校正と誤字脱字・文法的な誤りの指摘を行います。/article-review [スラッグ] の形式で呼び出してください。記事を書いた後のチェック、公開前の校正、文章の品質確認にも使用してください。
The English summary is being prepared. Showing the original description.
技術記事の内容から読者の理解度をチェックする4択クイズを指定のYAML形式で生成するスキル。ユーザーが「この記事のクイズを作って」「理解度チェックを作成して」「記事を読んだ人向けの問題を作って」「selfAssessment形式でクイズを作って」と依頼したときに必ず使う。ブログ記事、技術ドキュメント、チュートリアル、解説記事、技術書の章など、読者の学習内容を確認する問題を作る必要があるあらゆる場面で使う。記事のURL・マークダウン・テキスト・ファイルパスのいずれを渡されても動作する。
The English summary is being prepared. Showing the original description.
技術ブログ記事、チュートリアル、技術原稿を、技術的正確性、一次情報、現在の API 挙動、コード、再現性、セキュリティ、アクセシビリティ、互換性の観点からレビューする。技術的な主張、コードサンプル、対応バージョン、仕様、公開前の正確性を確認してほしいと依頼されたときに使用する。一般的な文章校正は article-review に任せ、明示的な依頼なしに原稿を変更しない。
The English summary is being prepared. Showing the original description.
記事を英語に翻訳する。記事スラッグを引数に渡すと、日本語の記事を英語に翻訳して contents/blogPost/en/ に出力する。/translate [スラッグ] の形式で呼び出す。
The English summary is being prepared. Showing the original description.
ユーザーが新しい技術を学ぶことを第一目的として、このリポジトリの文体と構成に従い、調査、構成合意、サンプル実装・検証、執筆、レビュー、理解度クイズまでを行って技術ブログ記事の下書きを作成する。ユーザーがブログ記事を書いて、新しい API や機能を紹介して、ハンズオンを作って、技術調査を記事化して、経験や意見を記事にして、と依頼したときに使用する。新しい API・Web 標準の記事では、一次情報と仕様策定の議論を調べ、実行可能なサンプルを作成して実環境で検証する。
The English summary is being prepared. Showing the original description.