Icon Forge（アイコンフォージ）

プロフェッショナルなセットから提供されたかのようなカスタムアイコンを描画し、ランタイム依存関係なしで出荷します。すべてのアイコンがリントに合格し、あなたが 16/20/24pxのプレビューを確認し、明るい/暗い背景でも明確かつ一貫して認識でき、生成されたコンポーネントがアクセシブルな使い方で組み込まれた時点で完了です。

<skill> は、このファイルが含まれているフォルダ（例：.claude/skills/icon-forge、.cursor/skills/icon-forge、.agents/skills/icon-forge）を示します。スクリプトはNode ≥18が必要で、プロジェクトの依存関係は必要ありません。

使用する場合 / 使用しない場合

使用する場合： サイドバー、ナビバー、ダッシュボード、設定ページ、空の状態、ツールバーにアイコンが必要な場合、ユーザーがカスタムまたは不足しているアイコンを要求した場合、ユーザーが絵文字/プレースホルダーアイコンや重いアイコンパッケージを小さな独自セットに置き換えたい場合。
使用しない場合： ロゴやブランドマーク（商標；デザイナーが必要）、ファビコン/アプリアイコン、イラストやスポットアート、写真/ラスター、アニメーションLottie。ユーザーが明示的にライブラリのインストールを要求した場合（例：「Lucideを使って」）、その指示に従ってください。このスキルはカスタムパスのために存在します。

厳格なルール（とその理由）

すべてのアイコンを自分で描画し、アイコンライブラリの依存関係を追加しないでください。 ユーザーはバンドルサイズとユニークな見た目のために独自のアイコンを選択しました。Lucide、Heroicons、Materialなどからパスデータを貼り付けないでください（ライセンスとオリジナリティの問題）。開始ジオメトリとして references/glyph-cookbook.md（オリジナル描画）を使用してください。
プロジェクトがすでにアイコンライブラリを使用している場合、そのグリッド、ストローク、キャップ、半径に合わせてください（scripts/detect.mjs と design-rules §10 を参照）。新しいアイコンは、既存のアイコンの隣に違和感なく配置される必要があります。
1つのセット、1つのスタイル。 すべてのアイコンで同じグリッド、ストローク幅、キャップ/ジョイン、半径スケール、パディング、詳細レベル。一貫性は、どんな単一の優れたアイコンよりも重要です。
プレゼンテーション属性はルートの <svg> のみに配置し、色は currentColor とし、ソースに id、スタイル、クラス、変換、<g> を含めないでください。そうしないと、テーマ設定、ダークモード、strokeWidth プロパティ、インライン化が機能しません。
アイコンをレンダリングしてPNGを表示せずに、良いと主張しないでください。 コード上では正しく見えるジオメトリでも、16pxではブロブ、閉じたギャップ、中心からずれた形状、ミスマッチな太さが頻繁に発生します。
スクリプトを実行し、再実装しないでください。 リント、最適化、プレビュー、コード生成は決定論的です。生成されたファイルを手動で編集しないでください。icons/src/ を変更して再構築してください。
ユーザーの依存関係を変更しないでください。 プレビューツールは ~/.cache/icon-forge にインストールされます（--install）。SVGOは存在しない場合 npx 経由で実行されます。プロジェクトにパッケージを追加する前に許可を求めてください。
デフォルトでアクセシブルに。 アイコンはラベル付けされていない限り aria-hidden とします。アイコンのみのコントロールには aria-label を付けます。インタラクティブなターゲットは ≥44px とします。意味のあるアイコンは ≥3:1 のコントラストを確保します。

ワークフロー

1. スタックと既存のスタイルを検出

node <skill>/scripts/detect.mjs .

フレームワーク、TypeScript、Tailwind、アイコンライブラリ（とそのスタイルプリセット）、ローカルのSVGアイコン、推奨される出力ディレクトリを確認します。既存のセットがある場合は、そのSVGを2～3つ開き、ルートの数値をコピーします。それ以外の場合はデフォルト（24グリッド、ストローク2、ラウンドキャップ/ジョイン）を使用します。

2. リストを計画：意味 → メタファー → ファイル名

3. 24グリッド上に描画

icons/src/<name>.svg を作成し、正規のルート（svg-code-rules.md）を使用します。各アイコンについて：

対応するキーラインから開始します：円 r10、正方形 18（x/y 3）、縦長 16×20、横長 20×16。キーラインはストロークの中心線です。
ストロークの外側のエッジをキャンバスエッジから 1 単位以上離します。大きなコーナーには半径 2、小さなコーナーには 1～1.5 を使用します。ギャップは 2 単位以上のクリアスペースを確保します。
パーツは正確に結合するか、明確なギャップを保ちます。2pxストロークには整数座標を使用します。要素はできるだけ少なくします（通常 ≤6）。
最も近い references/glyph-cookbook.md エントリから開始し、適応させます。グリフがそのまま適合する場合は、<skill>/assets/cookbook/<name>.svg からジオメトリをコピーします。
繰り返しジオメトリ（歯、光線、星のポイント）は、推測する代わりに数行のJSで計算します。最初にセット全体を描画し、その後リファインします。一貫性は並べて判断します。

4. リント

node <skill>/scripts/lint.mjs icons/src

すべての ✖ を修正します。⚠ gap、density、scale、bounds はノイズではなく、修正すべき設計問題として扱います。各 ℹ gap に注意し、ステップ6で確認します。密接した平行ストローク（バー、線）は、4単位離れていないと16pxでにじみます。正当化できない警告がなくなるまで再実行します。フラグ：--grid、--padding、--mode fill、--strict、--json。

5. 最適化

node <skill>/scripts/optimize.mjs icons/src icons/svg

これにより数値が丸められ、SVGOが実行され（ローカルインストールまたは npx svgo@4；オフラインでは組み込みの正規化ツールにフォールバック）、ルート属性が並べ替えられ、アイコンごとのバイト数と総gzipサイズが表示されます。出力もリントします：node <skill>/scripts/lint.mjs icons/svg。

6. プレビューして確認、そして反復

node <skill>/scripts/preview.mjs icons/svg --out icons/preview.png \
  --sidebar "dashboard:Dashboard,kanban:Projects" --active dashboard   # PNGエンジンがない場合は最初に --install を追加

画像ビューワでPNGをこの順序で表示します：

icons/[email protected]：セットストリップとサイドバーモック。詳細を完全に確認できる十分なサイズです。
icons/[email protected]：各サイズのすべてのアイコンと、インスペクトビュー。縦長なので、ビューワが縮小する場合はトリミングします。
icons/preview.png：実際の1×ピクセル。

これらはまとめて以下を表示します：

明るい/暗い背景での24/16pxストリップ。
アクティブアイテムと折りたたまれたレールを備えたサイドバーモック。
16/20/24/48pxでのアイコンごとの行。
グリッド、青色のキーライン、赤色の1pxパディング制限を備えた4×インスペクトビュー。

design-rules §12 のセルフレビューの質問に答えます。典型的な修正：

確認した内容	修正方法
1つのアイコンがストリップ内で薄く/小さく見える	キーラインまで拡大するか、フレーム/軸を追加する（開いたグリフは軽く見える）
1つが重く/込み入って見える	詳細を削除する；バー ≤3、歯 ≤6、テキスト行 ≤2
16pxでパーツの接合部ににじみがある	正確に結合するか、ギャップを 2 単位以上開ける
インスペクトビューで形状が片側に寄っている	中央に再配置するか、光学的バランスのために 0.5～1 単位移動する
折りたたまれたレールでメタファーが不明瞭	より文字通りのメタファーを選択する（ステップ2）

修正すべき点が見つからなくなるまで、ステップ3～6を繰り返します。通常1～3ラウンドです。

7. フレームワーク出力を生成

node <skill>/scripts/build.mjs icons/svg --out src/components/icons --framework react --lang ts \
  --labels "kanban:Projects,dashboard:Dashboard"

--framework react|vue|svelte|html|all；--lang ts|js；--package @app/icons は sideEffects:false の package.json を書き出します。出力は、アイコンごとに1つのツリーシェイカブルなモジュール、共有ベースコンポーネント（size、color、strokeWidth、absoluteStrokeWidth、title、className）、index 名前付きエクスポート、icons.json です。HTML は sprite.svg + usage.html を提供します。詳細：references/output-formats.md。

次に、プロジェクトにスクリプトがある場合は型チェックまたはビルドを行い（npx tsc --noEmit、npm run build）、エラーを修正します。

8. アクセシブルな使い方で組み込む

references/accessibility-and-usage.md のパターンを使用します：

<nav aria-label>；アクティブアイテムには aria-current="page" と色・背景を設定。
アイコンは size-5 shrink-0 で装飾的。
アイコンのみのボタンには aria-label；ログアウトは <button> として。
≥44pxの行；3:1に到達するミュートカラー。

出力フォーマット

ユーザーへの短いレポートで締めくくります：

アイコン： テーブル ラベル → コンポーネント → メタファー とフォルダパス（icons/src、icons/svg、生成ディレクトリ）。
チェック： リント結果（エラー/警告）、最適化の合計（avg B/icon、gzip total）、調査したプレビューパス、および確認後に変更した内容。
使用スニペット 対象フレームワーク用、a11y属性付き。
注意事項： スタイルの決定（マッチしたグリッド/ストローク/プリセット）、ミラーリングするRTLアイコン、および確認できなかった内容。

例

ユーザー：「Next.js + Tailwind アプリに Dashboard、Projects、Team、Settings のサイドバーアイコンが必要。」 → detect：React（Next）+ TS + Tailwind、アイコンライブラリなし → 計画：dashboard/tiles、kanban、users、settings/gear → クックブックから描画して適応 → lint PASS → 最適化：4アイコン、平均 ~340 B、~0.4 KB gzip → プレビュー：Projectsが薄く見えたので、バーを追加；再チェック → --framework react で src/components/icons にビルド → <DashboardIcon className="size-5 shrink-0" /> を aria-current 付きでナビゲーションに配置。

参考文献

必要なときに開く…	読むもの
サイズ、キーライン、半径、ギャップ、メタファーの選択、またはプレビューの問題の修正	`references/design-rules.md`
SVGマークアップの作成やデバッグ、リントエラーの理解	`references/svg-code-rules.md`
一般的なUIアイコンの実績あるジオメトリから開始（56の描画済みグリフ）	`references/glyph-cookbook.md` + `assets/cookbook/*.svg`
React/Vue/Svelte/Angular/HTML出力の生成または手動適応、バンドルサイズの削減	`references/output-formats.md`
使用スニペットの作成：ナビゲーション/サイドバーパターン、アクティブ状態、ラベル、コントラスト、RTL	`references/accessibility-and-usage.md`
生成コンポーネントの形状変更（プロパティ、クラス名、a11yデフォルト）	`templates/<framework>/`、build.mjsが読み取る場所。出力ではなく、そこで編集
このスキルの変更テスト	`evals/evals.json`

検証チェックリスト（完了と報告する前にすべてが真でなければなりません）

アイコンライブラリが追加されていない。すべてのアイコンはこのタスクのために描画されるか、クックブックから適応された。
スタイルがプロジェクトの既存アイコン（またはデフォルトプリセット）とセット全体で一致している。
lint.mjs が icons/src と icons/svg で PASS。残りの警告はレポートで正当化されている。
最後の変更後にプレビューPNGを確認した。16pxの明るい/暗い行がクリーン。どのアイコンも兄弟よりも重く、軽く、または大きくない。
コンポーネントが build.mjs によって生成され、プロジェクトの型チェック/ビルドが（利用可能な場合）パスした。
使用方法：装飾アイコンは非表示、アイコンのみのコントロールはラベル付き、アクティブ状態は色だけでない、ターゲット ≥44px、コントラスト ≥3:1。
レポートにサイズ（平均バイト/アイコン、gzip合計）とプレビューパスが含まれている。

アイコン作成スキル