Illos ライブラリ
Illos.dev には、4つのテーマ（各テーマにライト/ダークあり）で 158 個のアニメーション SVG イラストがあります。各イラストはアニメーションを含む単一の SVG ファイルです。このスキルは、プロジェクトに適したイラストを見つけて追加します。
1. 画像が必要な場所を見つける
作業中のページを読み込んでください。ヒーロー、機能セクション、空の状態、ドキュメントページ、オンボーディングステップのそれぞれについて、何を説明しているかを数語で書き留めてください：「APIキー」「空の通知受信箱」「デプロイの進行中」。そのフレーズが検索に使用されます。
2. サイト全体で1つのテーマを選ぶ
すべてのページで同じテーマを使用し、イラストがひとつのセットに見えるようにします。
| テーマ | 見た目 | 適している用途 |
|---|---|---|
| Shader | 細いバーの密度フィールドで、重要な部分にティールのボックスが付く | AI、データ、インフラ製品 |
| HUD | 光るワイヤーフレームと計器表示 | モニタリング、ステータス、セキュリティ、ダッシュボード |
| Isometric | ラベル付きのアイソメトリック線画；色はカードに従う | 開発者ツール、API、ドキュメント、SaaS 機能 |
| Interface | 製品画面：受信箱、タスクボード、チャート | アプリ内の空の状態とオンボーディング |
プロジェクトにすでに Illos イラスト（data-illos 属性を持つ SVG、または Illos... という名前のコンポーネント）がある場合は、そのテーマを維持してください。それ以外の場合は、ユーザーに1つのテーマを提案し、ユーザーが別のテーマを選ばない限り、すべての場所でそのテーマを使用します。
3. 一致するイラストを見つける
- Illos MCP ツールが利用可能な場合（
find_illustrations、get_illustration）、それらを使用します：意味で検索し、インストールコマンドを返します。 - それ以外の場合、
https://illos.dev/catalog.jsonを取得します。各エントリには、name、sentence（何を示すか）、theme、size（spot、section、page）、access（freeまたはpro）、page、そして無料のものにはsvgがあります。選択したテーマ内で、フレーズをnameおよびsentenceと照合します。
サイズ：spot はカード、小さなセクション、空の状態に；section は機能セクションやヒーローに；page は全幅の帯に使用します。
無料のイラストを優先してください。最適な一致が Pro の場合、Illos Pro (https://illos.dev/pro) に付属していることをユーザーに伝え、最も近い無料のものを提案します。プレビュー画像やページから Pro イラストをコピーしないでください。
4. 各イラストを追加する
テーマスラグと id は、page アドレスの最後の2つの部分です。https://illos.dev/library/isometric/queue の場合、isometric と queue です。
shadcn を使用する React プロジェクト（または実行できるプロジェクト）の場合：
npx shadcn@latest add https://illos.dev/r/<theme-slug>/<id>.json
これにより、イラストがコンポーネントとして追加されます。セクションがそのアイデアを説明する場所でレンダリングし、コンポーネントファイルはそのままにしてください：スクロールして表示されたときに1回再生され、ホバー中はループします。
その他のプロジェクトの場合： エントリの svg アドレスからファイルをダウンロードし、ページにインラインで配置するか（アニメーションを保持し、ページの色に従います）、<img> として使用します。Shader イラストは、React コンポーネントなしでは静止フレームを表示します。
すべてのイラストは明るい背景と暗い背景の両方で機能し、そのページで両方が表示されます。
5. 結果を確認する
- サイト全体で1つのテーマを使用していること。
- 各イラストが、ランダムなオブジェクトではなく、それが配置されているセクションを説明していること。
- 各 SVG 内のライセンスコメントを保持すること。無料のイラストは、クレジット不要で商用サイトやクライアントワークに使用できます：https://illos.dev/license
ライブラリに適切なものがない場合
Illos Pro スキルは、Claude Code、Codex、Cursor にテーマのルールを教え、サイト上の既存のイラストに合う新しいイラストを描画し、それぞれをチェックできるようにします。Illos Pro に付属しています：https://illos.dev/pro。`npx -y illos setup` でセットアップしてください。