algorithmic-art（p5.js のジェネラティブアート）

コードでアートを作りたい、ジェネラティブアート、アルゴリズミックアート、フローフィールド、パーティクルシステム、といった依頼で使われるスキルです。description には、既存のアーティストの作品を写すのではなく、著作権侵害を避けるためにオリジナルの作品を作るよう書かれています。

進め方は二段階です。まず架空の「ジェネラティブアートの運動」に名前を付け、その考え方を 4〜6 段落の文章（Markdown）にまとめます。次に、その文章を p5.js のコードで表現し、シード値の切り替えとパラメータのスライダーを備えた HTML ファイルとして出力します。

HTML は同梱のテンプレート templates/viewer.html を土台にするよう強く指示されており、画面の骨組み・Anthropic の配色と書体・シード操作・ボタン類は固定、アルゴリズムとパラメータの部分だけを毎回作り替える、という分担になっています。

第1段階：アルゴリズムの哲学を書く

最初に作るのは画像ではなく、計算の過程・ノイズ・粒子・力の場・パラメータの揺らぎなどを通じて表現される「考え方」です。手順は次のとおりです。

• 運動に1〜2語の名前を付ける（例として「Organic Turbulence」「Quantum Harmonics」など）
• その考え方を 4〜6 段落で書く。計算の仕組み、ノイズと乱数、粒子と場の振る舞い、時間による変化、パラメータと複雑さの生まれ方などに触れる
• 同じ概念を何度も繰り返さない
• 次の工程で実装する側に解釈の余地を残す

この文章の中で「長い時間をかけて磨き上げた、第一人者による精緻なアルゴリズムである」ことを繰り返し強調するよう、はっきり求めているのも特徴です。SKILL.md には5つの短い例（乱流のフローフィールド、位相の干渉、再帰的な枝分かれ、ベクトル場、ボロノイ分割のような結晶化）が載っていますが、実際にはもっと長く書くよう注記されています。完成した文章は .md ファイルとして出力します。

依頼に潜む「概念の種」

実装の前に、元の依頼から控えめなテーマを読み取り、それをパラメータや振る舞いの中にさりげなく織り込むよう指示しています。知っている人だけが気づく引用のように、表に出しすぎないことが大事だとされています。

第2段階：p5.js で実装する

最初の手順として、templates/viewer.html を必ず読み、それをそのまま出発点にするよう求めています。一から HTML を作る、独自の配色や暗いテーマにする、サイドバーの構造を変える、といったことは避けるよう明記されています。

技術的な決まりは次のとおりです。

• シード付き乱数：randomSeed と noiseSeed に同じシードを渡し、同じシードなら必ず同じ結果になるようにする
• パラメータ：数・大きさ・速さ・確率・比率・角度・しきい値など、そのアルゴリズムで調整すべき性質を一つのオブジェクトにまとめる。「どの模様にするか」ではなく「何を調整できるべきか」で考える
• アルゴリズム：哲学の内容から作るものを決める。有機的な生成なら成長や蓄積、数学的な美しさなら幾何や三角関数、制御された混沌なら境界内のランダムさ、といった方向が例示されています
• 品質：複雑でも雑然としない、配色に調和がある、乱数の中にも構図と流れがある、アニメーションなら滑らかに動く

テンプレートの固定部分と可変部分

固定部分は、ヘッダー・サイドバー・キャンバスの配置、Anthropic の UI の配色と書体（Poppins と Lora）、シード操作（表示、前へ・次へ、ランダム、番号を指定して移動）、操作ボタン（再生成、リセット、PNG 保存）です。可変部分は、p5.js のアルゴリズム全体、パラメータの定義と数、スライダーの範囲、必要に応じた色の選択欄です。

templates/generator_template.js は、パラメータの整理やシード付き乱数、クラスの組み立て方といった書き方の手本です。模様の見本帳ではないこと、作品ではコードを HTML の中に直接書き、別の .js ファイルに分けないことが書かれています。

出力の形

1. アルゴリズムの哲学（Markdown）
2. 単体で動く HTML ファイル1つ。p5.js は CDN（テンプレートでは cdnjs の 1.7.0）から読み込み、それ以外のコード・スタイル・UI はすべて同じファイルの中に入れる

Claude.ai のアーティファクトとしても、保存したファイルをブラウザで開いても動く、という想定です。特定のバリエーションを見せたいときは、シードのプリセットボタンや複数シードを並べるギャラリー表示を同じ HTML の中に加える方法が案内されています。

Claude Code（プラグインマーケットプレイスから）

リポジトリの README によると、このリポジトリ自体を Claude Code のプラグインマーケットプレイスとして登録できます。

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

/plugin の画面から「Browse and install plugins」→「anthropic-agent-skills」→「example-skills」→「Install now」と選んでも入ります。example-skills プラグインには、このスキルを含む複数のスキルがまとめて入っています。

Claude Code（フォルダを置く）

公式ドキュメントでは、スキルは ~/.claude/skills/<スキル名>/SKILL.md（自分の全プロジェクト）か .claude/skills/<スキル名>/SKILL.md（そのプロジェクトだけ）に置けば使えるとされています。リポジトリのフォルダを付属ファイルごとコピーします。入れたあとは、依頼内容が description に合えば自動で読み込まれるほか、/スキル名 で直接呼び出すこともできます（プラグイン経由のときは /プラグイン名:スキル名 の形）。

Claude（アプリ）と Claude API

README には、このリポジトリのサンプルスキルは Claude.ai の有料プランですでに使える状態になっていると書かれています。自作スキルのアップロード方法はヘルプ記事「Using skills in Claude」に、API での使い方は Skills API のクイックスタートに案内されています。

• 出力 HTML は p5.js と Google Fonts を CDN から読み込むため、表示にはネット接続が必要です。
• テンプレートの UI は Anthropic のブランド（配色・書体）で固定するよう指示されています。自分のサイトの見た目に合わせたい場合は、出力後に手直しするか、スキル自体を書き換える必要があります。
• 実在のアーティストの作風をそのまま写すことは description で避けるよう求められています。
• 哲学の文章で「熟練の職人技」を繰り返し強調させる指示があるため、出力される文章は誇張した調子になりがちです。紹介文などに転用するときは注意が必要です。
• ライセンスはフォルダ内の LICENSE.txt で Apache License 2.0（Copyright 2026 Anthropic, PBC.）。