Kubai Icons
このスキルには完全な実装が含まれています：エンジン、一連のサンプルアイコン、プレビューページ、自己チェックスクリプト、静的エクスポートスクリプト。あなたの仕事は、ルールに従って新しいアイコンを書くことであり、エンジンを書き直すことではありません。
パッケージの内容
PROMPT.md：すべてのデザインルール。一つ一つが厳格な要件です。作業を始める前に完全に読んでください。src/engine.js：エンジン。色の導出、外枠の線マスク、グラデーション付きの厚み、ドロップシャドウと内側発光フィルター、補間アニメーション、カラーパレットがここにあります。直接再利用し、変更しないでください。src/icons.js：サンプルアイコン。新しいアイコンは同じ形式で追加します。src/app.js、index.html：プレビューページ。ORDERがどのアイコンを表示し、どの順序で並べるかを決定します。scripts/check.mjs：自己チェックスクリプト。ヘッドレスChromeで静止状態、ホバー状態、ホバー中のフレーム、24px、28px、およびすべてのパレットのスクリーンショットをキャプチャし、各ページのスクリプトエラーを読み取ります。一時ファイルは出力ディレクトリに置かれ、実行後に自動的にクリーンアップされます。scripts/export.mjs：静的エクスポート。アイコンをスクリプトやスタイルシートに依存しない独立したSVGファイルにレンダリングします。パレット、主色、静止またはホバー状態を指定できます。
ワークフロー
-
PROMPT.mdを読む。 -
成果物の形式を決定する。ユーザーが明確に指定していない場合は、まず質問する：
- 動的版（デフォルト）：SVG + JS。ホバー時に変形し、
src/engine.jsによってページ内で動作します。ウェブページやJSを実行できるインターフェースに適しています。 - 静的版：独立した
.svgファイル。アニメーションはなく、デザインツール、ネイティブアプリ、ドキュメント、<img>など、どこでも使用できます。ユーザーが「書き出し」「SVGファイル」「Figmaに入れる」「アプリで使う」などと言った場合、静的版を指します。 - 両方必要な場合：動的版で作成し、最後に静的版をエクスポートします。
- 動的版（デフォルト）：SVG + JS。ホバー時に変形し、
-
作業場所を決定する：
- 新しいセットを作成する場合：このスキルの
index.html、src/、scripts/をターゲットの場所（新しいディレクトリまたは新しいリポジトリ）にコピーし、そのコピー内で作業します。各ファイル冒頭の著作権表示は保持します。PROMPT.mdとSKILL.mdはスキル内にのみ残し、コピー先にはコピーしません（LICENSE第3条参照）。 - 既存のセットに追加する場合：そのまま
src/icons.jsに追加します。 - kubai-iconsリポジトリのオープンソースアイコンライブラリに追加する場合：各アイコンは
icons/下に個別のファイルとして配置し、形式、名前、バッジについてはdocs/authoring.mdを参照し、自己チェックはnode tools/check.mjs --only 名前 --with folder,mail,downloadを使用します。ルールはPROMPT.mdに従います。 - 静的版のみ必要な場合：同様に作業ディレクトリにコピーして描画し、最後にエクスポートしたSVGのみをユーザーに渡します。
- 新しいセットを作成する場合：このスキルの
-
プロダクトコードを読み、機能をリストアップする。動的版では各機能に「物体 + ホバーアクション」の1行を記述します。静的版では物体のみを特定すれば十分です（
PROMPT.md第1節）。 -
各アイコンを書く前に、
src/icons.jsで構造が最も近いサンプルを1～2つ読み（例：開くものは封筒とカレンダー、前面を切り出すものはダウンロードとアップロード、回転するものは歯車と星マーク）、その書き方に従います。 -
名前を
src/app.jsのORDERに追加します。不要なサンプルはORDERに入れなければ表示されません。 -
自己チェックを実行し、新しいアイコンと既存のアイコンを一緒に確認する：
node scripts/check.mjs --only 新アイコンA,新アイコンB --with フォルダ,メール,ダウンロードスクリーンショットは
check-out/に保存されます。PROMPT.md第10節のチェックリストと一つずつ照合します。スクリプトがエラーを報告した場合は、最初にエラーを修正します。往復動作はframes.pngで確認します。細かい隙間を確認する場合は--scale 3を追加します。薄い主色のマークを確認する場合は--accent #F59E0Bを追加し、すべてのアイコンを同じ主色に変更します。--onlyを付けないと、セット全体がチェックされます。静的版ではrest.png、size-24.png、size-28.png、palettes.pngを確認すれば十分です。 -
すべてのチェックに合格するまで修正した後、READMEに記載されているアイコン数と、プレビューページの各ブレークポイントの列数を更新します（列数はアイコン総数を割り切れる必要があり、ブレークポイントは追加・削除可能です）。
-
静的版が必要な場合、ユーザーが指定したディレクトリにエクスポートし、使用したパレットをユーザーに伝えます：
node scripts/export.mjs --only 新アイコンA,新アイコンB --palette カラー --out ターゲットディレクトリ--paletteはパレット名（カラー、ブルーグレー、セラドン、ミント、ラベンダー、アプリコット、ブラック）で選択、--accent #hexですべてのアイコンを1つの主色に変更、--state hoverでホバー終了時の状態をエクスポート、--sizeでピクセルサイズを設定、--padでドロップシャドウ用の余白を指定します。各アイコンは名前.svgとして出力されます。
環境
- Node 18以上、およびChrome。ブラウザのパスは環境変数
CHROMEで上書きできます。 - すべてのチェックはヘッドレスモードで実行され、表示可能なウィンドウは開かず、使用中のブラウザにも影響を与えません。
Copyright (c) 2026 Kubai087. Licensed under the Kubai Icons License; see LICENSE.