aeentech/thumbnail

サムネイル

ウェブサイト、ローカルウェブプロジェクト、または単一の記事から、そのサイトに属するように見える、完成された高解像度のサムネイルを1つ作成します。画像はサイト自身の素材からHTML/CSSで構成され、PNGおよびロスレスWebPでレンダリングされます。

原則

• サイトに触発されること。 すべてのサムネイルは、サイトの特徴的な要素（ヒーロービジュアル、コンポーネント、画像、モチーフ、タイポグラフィ、色）から新たに構成された作品です。デバイスフレーム内のスクリーンショットは9つのコンポジションのうちの1つに過ぎず、決してデフォルトにはなりません。
• 実際の素材のみを使用すること。 サイトの実際のロゴ、画像、テキスト、数字、色、フォントを使用します。機能、価格、統計、主張をでっち上げることは決してしないでください。
• 1回の実行で1つの成果物。 完全に自動で実行します。このスキルが質問してもよいのは、入力 → 言語 における言語に関する質問のみです。

コミュニケーション

• 静かに作業すること。 ステップ、調査結果、デザインの根拠、リトライ、修正について説明しないでください。分析はツールコールと brief.md に留めてください。ツールコールの説明は短く、ニュートラルに保ってください。
• 必要なときのみ発言すること： 言語に関する質問、ユーザーが対処しなければならないブロッキング問題（サイトに到達できない、プロジェクトが実行できない）、および最終的な成果物の提供。
• セッションの言語。 サムネイルの言語に関係なく、すべてのユーザー向けメッセージ（質問、オプション、エラー、最終的な返信）は、ユーザーが使用している言語で記述してください。
• 最終的な返信。 画像を表示し、PNGとWebPのパス、および2～4行の短い説明（構成、フォーマット、文、カテゴリ、そしてロゴ、色、フォントの入手先）を提供します。編集を提案する1行と、別のフォーマットを提案する1行（references/formats.md を参照）で締めくくります。プロセスの要約は不要です。

セットアップ

パスはこのスキルのディレクトリ（このファイルを含むフォルダ）からの相対パスです。SKILL_DIR をそのフォルダ、S=$SKILL_DIR/scripts と定義します。

スクリプト	目的
`inspect.mjs <url	file>`
`extract.mjs <url	file> --out `
`extract.mjs <url	file> --out --selector "" --name [--transparent]`
`screenshot.mjs <url	file> --out <file.png> [--width --height --scale --wait]`
render.mjs <file.html> [--out <file.png>]	コンポジションを2倍サイズでPNGおよびロスレスWebPにレンダリングします。キャンバスサイズをページから読み取り、ロードされたフォント、失敗したフォント、壊れた画像、あふれたテキストを報告します。
history.mjs / history.mjs add <site> "<composition>"	最近使用されたコンポジションを表示または記録します。

スクリプトにnpm依存関係はありません。ブラウザが見つからない場合は、CHROME_PATH を設定してください。macOSでは、head がPerlツールによって隠蔽されている可能性があります。ファイルは cat、sed -n、または python3 を使用して読み取ってください。

入力

デザインを開始する前に、これら4つの入力を解決してください。

ターゲット

• URLモード： リクエストにURLまたはドメインが含まれています。出力フォルダ：カレントワーキングディレクトリ内の ./thumbnail-<domain>/。リクエスト内の他の単語はメモ（例：言語、フォーマット、コンポジション、スタイルの希望）として扱います。
• プロジェクトモード： URLなし。ターゲットは現在のプロジェクトです。出力フォルダ：プロジェクトルート内の ./thumbnail/。

実行に関するすべてのファイルは出力フォルダ内に保持してください。

ページタイプ（URLモード）

最初に inspect.mjs を実行し、page.type を読み取ります。

• site： サムネイルはウェブサイト全体についてのものです。
• article： URLは単一の記事、ブログ投稿、ガイド、またはニュース記事です。サムネイルは記事のトピックについてであり、サイトのアイデンティティでスタイルが設定されます。出力フォルダは ./thumbnail-<domain>-<slug>/ を使用します。ここでスラッグは最後のパスセグメントであり、約40文字に短縮されます。

検出には、og:type、JSON-LD（Article、BlogPosting、NewsArticle…）、公開日、<article> 要素、ブログスタイルのURLパス、テキスト長が使用されます。ユーザーのメモはこれを上書きします：「サイトについて」はサイトを意味し、「記事について」または「トピックについて」は記事を意味します（言語は問いません）。

言語

コンテンツ言語を lang と dir、見出し、UIコピーから判断します。プロジェクトモードでは、<html lang> やロケールフォルダ（例：locales/<code> や messages/<code>.json）も確認します。

1. ユーザーのメモに言語が指定されている場合、それを使用します。
2. サイトが単一言語の場合、それを使用します。アラビア語、ペルシア語、ウルドゥー語、ヘブライ語は右から左にレイアウトされます。
3. サイトが2つ以上の言語を完全にサポートしている場合、どの言語を使用するかユーザーに尋ねます。エージェントに質問ツールがある場合はそれを使用し、それ以外の場合はチャットで尋ねて返答を待ちます。サイトのデフォルトロケールを推奨します。
4. 言語が不明な場合は、アラビア語を使用します。

文、カテゴリ、および追加テキストは、選択された言語で記述されます。

フォーマット

• デフォルト： サイトの場合はポートフォリオサムネイル（1080 × 720）、記事の場合はOpen Graph（1200 × 630）。
• リクエスト時： ユーザーがプラットフォーム、配置、アスペクト比、または正確なサイズを指定した場合、$SKILL_DIR/references/formats.md で解決します。このファイルには、出力ファイル名、縦長フォーマットのセーフゾーン、レイアウトガイダンスも記載されています。
• すべてのフォーマットは2倍サイズでレンダリングされ、PNGおよびロスレスWebPとしてエクスポートされます。

ワークフロー

少ないターン数で作業すること。 各ターンは会話全体を再読み込みするため、ターン数は単一のファイルよりもはるかにコストに影響します。独立したコマンドは1つのシェル呼び出しにまとめ、独立したファイルは同じターン内で並行して読み取り、既に見たファイルや画像を再読み込みしないでください。

1. ターゲットに到達可能にする

• URLモード： URLを使用します。
• 静的プロジェクト（index.html のみでビルドステップなし）：ファイルパスを使用します。アセットがルート絶対パスを使用している場合、フォルダをバックグラウンドでサーブし（例：python3 -m http.server 4173）、http://localhost:4173 を使用します。
• フレームワークプロジェクト（dev、start、または preview を含む package.json）：node_modules がない場合は、ロックファイルに一致するパッケージマネージャーを使用して依存関係をインストールします。開発サーバーをバックグラウンドで起動し、出力からそのポートを読み取り、curl -s -o /dev/null -w "%{http_code}" <url> が応答するまで待機します。抽出が完了したらサーバーを停止します。
• 実行できない場合： package.json（homepage）またはREADMEからデプロイされたURLを使用します。存在しない場合は、プロジェクト自身のアセット（画像、コンポーネント、スタイル）からビルドし、ユーザーにその旨を伝えます。

2. インスペクト、抽出、履歴の確認（1つのコマンド）

すべてを1つのシェル呼び出しで実行します：

mkdir -p <out> && node $S/inspect.mjs <url> > <out>/inspect.json && node $S/extract.mjs <url> --out <out>/extract && node $S/history.mjs

inspect.json がページが記事であることを示している場合、次のシェル呼び出しでフォルダ名を ./thumbnail-<domain>-<slug>/ に変更します。

3. コンテンツを理解し、アイデンティティを研究する（1ターン）

同じターンで、inspect.json のキーフィールドを読み取り（ファイル全体ではなく、短いスクリプトでそれらを表示）、extract/overview.png を表示します。概要はすべてのキャプチャ（ヒーロー、セクション、要素、画像）のコンタクトシートであり、それぞれにファイル名がラベル付けされています。

コンテンツ

• サイト： それは何か、誰のためのものか、何を提供するのか、そして何がそれをそれ自身たらしめているのか？ inspect.json、extract.json、およびプロジェクトモードではREADME、package.json、ランディングページとヒーローコンポーネント、ロケールファイル、メタタグ、マニフェスト、スタイルを使用します。
• 記事： 記事は何についてか、読者はそこから何を得られるか？ page.article（見出し、説明、セクション、タグ、著者、日付、読了時間、小見出し、カバー画像、記事内画像、コードブロック）と記事テキストを使用します。
• ページテキストが薄い場合（クライアントレンダリングページやボットウォール）、別の方法（例：ウェブフェッチツールや curl）でテキストを取得します。

アイデンティティ：概要（および記事のカバー画像）から、以下に注意します：

• ムードとスタイル： フォトグラフィック、3D、フラットイラスト、ラグジュアリー、プレイフル、テクニカル、エディトリアル、ミニマル…
• 特徴的な要素： 人々がそのサイトを認識する2～4のもの。例：ヒーロー画像やオブジェクト、特徴的なカードや商品タイル、モチーフ、コードサンプル、アイコンセット、グラデーション、タイポグラフィックな処理。
• トークン： 色、ページ背景、ボタンの色、半径、シャドウ、グラデーション、見出しスタイル、バッジやボタンのスタイル。

4. コンポジションを選択する

ユーザーが明示的にコンポジションを要求した場合、それを使用します。 これは、ユーザーがコンポジション名（例：「Component Collage」）を指定した場合、またはそのアイデアを明確に説明した場合（例：「サイトのカードのコラージュ」や「機能のグリッド」）、言語を問わず適用されます。最近使用された場合でもそのコンポジションを使用し、履歴チェックをスキップします。ユーザーの他のメモは引き続き適用されます。

それ以外の場合は、自分で選択します：

1. ステップ2で表示された履歴を使用します。
2. $SKILL_DIR/references/compositions.md を読み、このサイトの特徴的な要素を最もよく表現するコンポジションを選択します。
3. 他に適切なものがなければ、最後の2回の実行で使用されたコンポジションは避けます。
4. <out>/brief.md を記述します。短く保ちます：アイデンティティのキーワード、特徴的な要素と使用するファイル、選択したコンポジションとその理由、および1行のレイアウトスケッチ。

5. 選択したアセットをフルサイズで開く（1ターン）

概要は選択用であり、詳細確認用ではありません。デザインで使用する2～4のアセット（およびロゴ）がわかったら、それらをフル解像度で、すべて並行して1ターン内で開き、デザイン前に小さなテキスト、細かいモチーフ、鮮明さを確認します。必要な部分が検出されなかった場合は、同じターン内で extract.mjs --selector を使ってキャプチャします。

6. コンテンツを記述する

文章

• サイト： サイトが提供するものと、それが重要である理由。アラビア語の場合は5～10語、英語またはその他の言語の場合は6～12語を使用します。自然なマーケティングコピーを末尾のピリオドなしで記述し、サイト名を繰り返さないでください。
• 記事： 記事の核となるアイデア。見出しを収まるように短縮するか、忠実な1行の要約にします。アラビア語の場合は5～12語、その他の言語の場合は6～14語を使用します。記事にないものを追加しないでください。
• 3行に収まる必要があります。サイトのアクセントカラーや見出し処理を使用して、1～3つのキーワードを強調しても構いません。

カテゴリ

• サムネイルの言語で2～3語。
• サイト： 製品の種類。例：オンラインストア、Eラーニングプラットフォーム、企業ウェブサイト、SaaSダッシュボード、予約プラットフォーム、ポートフォリオ。
• 記事： 記事のセクションまたは主題。例：ガイド、ケーススタディ、チュートリアル、またはトピックそのもの。

記事の追加情報（オプション）

• 著者、日付、読了時間。小さく設定します。ページからの実際の値のみを使用します。

ロゴ

• 常に実際のロゴを使用し、使用する前にそれを表示します。
  • プロジェクト： public/、static/、assets/、src/assets/、app/ で logo*.{svg,png,webp}、icon*.svg、favicon.svg、apple-touch-icon.png、icon-512*.png、マニフェストアイコン、インラインロゴコンポーネントを探します。
  • URL： inspect.json を使用します：logoSvgs（インラインSVG）、logoBackgrounds（CSS背景として描画されたロゴ、多くの場合準備されたSVG）、logoImgs、icons。ベクターまたは透明なロゴを優先します。extract/elements/*-header.png からの切り抜きは、最後の手段としてのみ使用します。なぜなら、切り抜きにはページ背景が含まれるからです。ファイルを出力フォルダに保存します。
• currentColor またはCSS変数を使用するインラインSVGには、実際の塗りつぶし色が必要です。コントラストのために必要な場合を除き、ロゴの後ろにボックスや背景を配置しないでください。暗い領域の明るいロゴ、明るい領域の暗いロゴ。
• 記事の場合、ロゴは主役ではなく小さな署名です。
• ロゴが存在しない場合は、そのアイデアを表現するLucideアイコン（https://cdn.jsdelivr.net/npm/[email protected]/icons/<name>.svg）を、ブランドカラーでスタイル設定して使用します。偽のロゴを描かないでください。

7. フォント

• ソース： extract/fonts.css（サイト自身の @font-face ルール、フォントファイルがダウンロード済み）と extract.json（fonts.google）。プロジェクトモードでは、next/font、@font-face ルール、Google Fontsのインポート、Tailwindの fontFamily 設定、public/fonts 内のフォントファイルも確認します。
• ロードする： キャンバス内のNoto Sansリンクの直後に <link> を追加し、--font: "<Site Font>", "Noto Sans Arabic", "Noto Sans", sans-serif; を設定します。
• カバレッジを確認する： フォントはサムネイルのスクリプトをカバーする必要があります。ラテン文字のみのフォントはアラビア語テキストをレンダリングできないため、Noto Sans Arabicにフォールバックします。ディスプレイフォントのウェイトが1つしかない場合は、そのウェイトを使用します。太字を偽装しないでください。
• フォールバック： render.mjs が報告する fonts リストにフォントがない場合、または failedFonts に表示される場合、代わりにNoto Sans ArabicまたはNoto Sansを使用します。

8. ビルドとレンダリング

1. $SKILL_DIR/assets/canvas.html を <out>/<name>.html にコピーします。名前はデフォルトフォーマットの場合は thumbnail、その他のフォーマットの場合は thumbnail-<preset> です。
2. 最初の :root ルールで --w と --h を使用してキャンバスサイズを設定します（デフォルトは1080px × 720px）。その形状に合わせてデザインをレイアウトし、縦長フォーマットの場合はテキストをセーフゾーン内に保ちます。
3. プレーンなHTMLとCSSでデザインします。インラインSVGも歓迎します。
   • <style> ブロックの最後にあるデザイン変数と .canvas の背景ルールを置き換え、その後に自分のルールを追加します。
   • マークアップを <div class="canvas"> 内に配置し、最後の <script> は変更しないままにします。
   • アセットは相対パスで参照します。例：extract/images/…、extract/elements/…、logo.png。
4. レンダラーのためにテキストをマークします：
   • 文章の data-fit="3" は、3行に収まるまでテキストを縮小します。data-min は最小サイズを設定します。フォーマットの読み取り可能な最小値より小さくなることはありません。
   • テキスト要素の data-text="<name>" は、レンダラーがオーバーフローを報告できるようにします。
   • data-decor は、読まれることを意図していないテキスト（タイプで設定されたロゴ、大きな背景の言葉など）に使用します。
5. レンダリング後に画像がぼやけていたり、テキストがあふれたり、フォントが読み込めなかったりする場合は、修正して再レンダリングします。--out なしで render.mjs を実行すると、プレビューが表示され、問題がリストされます。

9. 提供する

最終的な画像を表示し、パスを提供し、2～4行の短い説明を添えます。

出力

• すべてのファイルは出力フォルダ内にあります。
• thumbnail.png および thumbnail.webp（またはリクエストされたフォーマットに応じた名前）。
• brief.md：選択した構成、使用したアセット、およびデザインの決定事項の簡潔な要約。

トラブルシューティング

• ブラウザが見つからない：CHROME_PATH を設定します。
• フォントが読み込めない：Noto Sans ArabicまたはNoto Sansにフォールバックします。
• 画像がぼやけている：アセットが2倍サイズでキャプチャされていることを確認します。
• テキストがあふれている：フォントサイズを小さくするか、テキストを短くします。

参考文献

• $SKILL_DIR/references/compositions.md：利用可能な構成とその説明。
• $SKILL_DIR/references/formats.md：サポートされているフォーマット、サイズ、セーフゾーン。
• $SKILL_DIR/references/examples.md：良いサムネイルの例。