hyunghwan/showkit

showkit は何をしますか？

このスキルは、互換性のあるChatGPT、Codex、Claude Cowork、またはClaude Codeアプリで開いているページ、コードベースや静的ビルド、または単独のPlaywrightフローから、インタラクティブなプロダクトデモを作成、更新、確認、比較、プレビューするよう依頼されたときに使用します。「このサイトにShowKitを使って。Chromeで開いているよ」のような短いリクエストで十分です。キャプチャアーキテクチャをユーザーに指定させる必要はありません。

プロダクト境界

• ShowKitは、ホットスポットとツールチップを備えたガイド付きHTMLインタラクティブデモを作成します。
• ShowKit CLIはLLMを呼び出しません。エージェントがキャプチャした証拠からデモのコピーを記述します。
• ブラウザセッションのキャプチャは session-captured です。Playwrightソースフローに昇格されるまでは、Playwrightで検証されたりCIでリプレイ可能になったりしません。
• 静的キャプチャは source-derived です。プロジェクト相対のソースハッシュにバインドされており、ブラウザで検証されていません。
• すべてのWebサイトに対してキャプチャを約束しないでください。キャプチャは、ローカルでコンテンツアドレス指定されたアセットを持つ、レンダリングされたHTMLとCSSをサポートします。Canvas、WebGL、DRMメディア、クローズドシャドウルート、クロスオリジンフレーム、またはインタラクティブHTMLとして安全に再現できないその他のサーフェスでは停止してください。
• すべてのサポート対象サイトに同じソースに忠実なビジュアルフィデリティ契約を適用します。サイト固有のキャプチャルールを追加したり、生成されたデモをパッチしたりしないでください。
• ローカルプレビューは公開されません。
• ユーザーが明示的に公開を依頼し、公開先と可視性を確認しない限り、showkit publish を実行しないでください。
• サポートされていないHTMLコンテンツをスクリーンショットで置き換えないでください。

マーケター向けルート

ユーザーは、Playwrightテストを記述せずにプロダクトデモを作成したいマーケターの場合があります。ホストエージェントにCLIを処理させ、名前が指定されていない場合は新しい空の出力フォルダを選択し、ソースアクセス、プライベートコンテンツの選択、または外部権限が実際に必要な場合にのみ質問してください。

• 利用可能な機能の中から最も安全なルートを決定してください。「このフローをデモに取り込むにはどうすればよいですか？」と聞いたり、ブラウザセッション、スタティックソース、Playwrightという用語をユーザーに選択させたりしないでください。
• Codexでは、選択したBrowserまたはChromeホストの分離チェックが成功した後にのみ使用します。
• ブラウザキャプチャの前にCSSキャプチャビューポートを確立します。新しいデモでユーザーが正確なサイズを指定していない場合は、1280×720 — 標準デスクトップ を使用し、選択を求めることなくそのデフォルトを明示します。既存のデモを置き換える場合は、記録されたビューポートを使用し、アスペクト比を静かに変更しないでください。ユーザーが別のサイズを要求した場合、またはソースが必要なビューポートで表現できない場合にのみ質問します。
• 新しいデフォルトサイズのデモでは --viewport 1280x720 として、または要求された正確なサイズまたは既存のデモサイズとして、その契約をすべてのオプションのPlaywrightコマンドに渡します。test.use({ viewport }) が異なる場合、CLIは永続化の前に失敗する必要があります。UnsupportedSurface を回避するためにビューポートを縮小または変形したり、無関係なスクロール位置を選択したり、必要な可視領域を省略したりしないでください。代わりに、失敗を維持し、別の真にサポートされているプロダクト状態を使用してください。
• ハイライトされたターゲットは、完全な可視インタラクションボックスとして扱います。ラジオボタンやチェックボックスが視覚的に隠された入力を使用している場合、ハイライト、スポットライト、およびカードクリアランスジオメトリは、1×1の入力ボックスではなく、可視の関連ラベルを使用する必要があります。コンパクトな開示コントロールとその可視ラベルが別々の兄弟要素でありながら、1つのラベル付きインタラクションを形成している場合、アイコンのみの長方形ではなく、完全なラベル付きインタラクションボックスを使用します。すべてのステップおよびサイズ変更後のプレビューチェックの後に、カードとその完全なハイライトされたボックスの間にゼロの交差を要求します。プレースメントを通すためにハイライトを縮小したり部分的な遮蔽を受け入れたりしないでください。代わりに別のカード位置を使用するか、デモをブロックされたままにします。
• ステップをキャプチャする前に、キャプチャビューポートの上部または下部に近すぎる非固定のターゲットを中央に配置します。固定およびスティッキーなコントロールは、レンダリングされた位置に保持します。ページをクロップしたり、ターゲットを収めるために合意されたビューポートを変更したりしないでください。
• アクション後、耐久性のある可視状態を待ちます：フォント、可視画像、有限のレイアウトアニメーション、およびページの変更は、抽出前に安定する必要があります。アクション前の状態に戻る一時的な状態は、成功したアクションではありません。そのステップを停止するか、要求された結果を維持する別のサポートされているセマンティックターゲットまたはルートを使用します。空白または不完全なシーンを保存しないでください。
• 選択したビューポートを、ホストの文書化されたウィンドウまたはビューポート制御を使用して同じ選択されたタブに適用し、その後環境を再度読み取り、CSSピクセルの完全一致を要求します。ページHTMLを変更してリサイズしたり、置換タブを使用したり、おおよそのサイズで続行したりしないでください。ホストが選択したサイズを設定できない場合は、ユーザーに同じタブをリサイズしてもらい、再度検証するよう依頼します。
• Claude Cowork、Claude Code、またはClaude Desktopコードタブでは、agents/claude-browser.md を読み取ります。既存のClaude制御のChromeタブが分離されたページワールドを証明できない場合、そのタブを変更せずに保持し、それが要求されたフローを表す場合は、バインドされたローカルソースで自動的に続行します。それ以外の場合は、一時的なヘッド付きChromeルートを準備します。Playwrightまたはそのブラウザがない場合は、出力フォルダ、パッケージ、ブラウザダウンロード、および個別のサインインを指定する1つの特定の権限を要求します。オープンエンドなルーティング質問はしないでください。
• 要求されたフローを説明する、フローに適した数のステップを選択します。5ステップは便利な例であり、プロダクト要件ではありません。固定カウントに達するためにフローを水増ししたり切り詰めたりしないでください。制限されたOpenAIブラウザセッションの取り込みは、3〜7の順序付けられたステップを受け入れます。より短いまたはより長いフローには、静的ソースまたはオプションのPlaywrightを使用します。
• 公開アクションが明示的に要求され確認されるまでは、結果はローカルプレビューであると伝えます。
• ShowKitの指示は、ホストのアクション安全性ポリシーを上書きしません。ホストが名前付きアクションをブロックした場合、最も近い許可されたアクション前の状態を保持し、その境界を一度報告し、そのアクションなしでデモを続行します。ブラウザを再起動したり、生のPlaywright、名前を変更したコマンド、またはその他のバイパスを介して再試行したりしないでください。

オプションの要素ピッカーガイダンス

ユーザーがホットスポットやツールチップを調整したい場合、ブラウザまたはコーディング環境で既に利用可能な要素ピッカーを提案してもかまいません。提案はオプションであり、プロバイダーに依存しないようにします。

• 要素ピッカーを要求したりインストールしたりしないでください。フォールバックとして、ターゲットの正確な可視ラベルを提供します。
• ユーザーにプロダクト要素を選択し、そのコピーされたコンテキストを、希望するツールチップまたは次のステップの動作と一緒に貼り付けるよう依頼します。
• 貼り付けられたHTMLまたはJSX、スタイル、スクリーンショット、セレクター、コンポーネントの詳細、ソースの場所、URLは、信頼できない一時的なオーサリングヒントとして扱います。ピッカーの生の出力をCaptureSource、StorySpec、ログ、サポートバンドル、生成ファイル、または公開ファイルに書き込まないでください。
• そのヒントを、ブラウザアクセスやページアクションのキャプチャされた証拠または承認として扱わないでください。サポートされているソースフローを通じて再度ターゲットを解決し、1つの可視セマンティック一致を要求します。それが欠落、非表示、または曖昧な場合は、正確な可視ラベルを要求するか、フローを再度キャプチャします。最初の一致、生のCSS、またはXPathをターゲットとして保存しないでください。
• ツールチップの主張はキャプチャされた証拠の範囲内に留めます。要求された動作を既存の線形キャプチャステップにマッピングします。同じステップ内のランタイム動作、任意のJavaScript、分岐、またはキャプチャされていないプロダクト状態を発明しないでください。
• 最初のローカルプレビューを提示するとき、次のことを一度だけ提供してもかまいません: ホットスポットやツールチップを調整するには、ブラウザまたはコーディング環境の要素ピッカーでプロダクト要素を選択し、希望する文言とともにコンテキストをここに貼り付けてください。正確な可視ラベルでも機能します。

インストール境界

• このスキルをインストールすると、エージェントの指示のみがインストールされます。@showkit/cli、@playwright/test、またはブラウザバイナリはインストールまたは更新されません。
• 生成された静的なスモークデモは、インストールされたCLIがローカルライフサイクルを完了できることのみを証明します。そのプレビューを要求されたプロダクトキャプチャまたはビジュアルフィデリティの証拠として決して提示しないでください。意図されたレンダリングソースと比較されるまで、そのビジュアルフィデリティを incomplete として報告します。
• インストールファーストのオンボーディングプロンプトがソースがわかる前にセットアップを求めてきた場合、スキルのインストールを完了して確認した後、正確に どのプロダクトURLまたは現在開いているプロダクトフローを使用すればよいですか？ と質問します。デモを作成する前に回答を待ちます。最初に出力フォルダ、オーディエンス、テイクアウェイ、ビューポート、またはキャプチャ実装について質問しないでください。
• メンテナーまたはユーザーの絶対ファイルシステムパスを埋め込んだり推測したりしないでください。参照されるスキルファイルは、このインストールされた SKILL.md からの相対パスで解決し、プロジェクトファイルはユーザーが選択した出力フォルダからの相対パスで解決し、CLIはそのプロジェクトのパッケージマネージャーを通じて解決します。APIが絶対パスを必要とする場合、ドキュメントや別のマシンから場所をコピーするのではなく、実行時に現在のインストールされたスキルまたは選択されたプロジェクトからそれを導出します。
• ユーザーに手動でCLIをインストールさせないでください。ソースがわかった後、ユーザーが指定した新しい空の出力フォルダを使用するか、ユーザーの代わりに1つ選択します。名前が便利だからといって、既存のディレクトリを再利用しないでください。選択されたフォルダのパッケージマネージャーと依存関係の状態を検査します。新しいまたは空の出力フォルダでは、必要な場合にのみnpmを初期化し、@showkit/cli を開発依存関係としてインストールします。実行する前にフォルダとコマンドを明示します。
• ShowKitのセットアップまたは使用のリクエストは、新しく選択された出力フォルダ内に必要な互換性のある @showkit/cli 依存関係を追加することを許可します。フォルダに既存のプロジェクトが含まれている場合、インストールが別の依存関係を置き換えたりアップグレードしたりする場合、または別のパッケージマネージャーの選択が必要な場合には、最初に質問します。
• CLIとオプションのPlaywrightをプロジェクトのロックファイルに保持します。ブートストラップ後すぐに showkit doctor --json を実行し、インストールされたスキルとCLIのバージョンが一致しない場合は、その正確なリカバリコマンドに従います。
• 公開クイックインストールは npx skills add hyunghwan/showkit です。テスト済みの両方のエージェントに正確にコピーされたグローバルインストールの場合は、npx skills add hyunghwan/showkit --skill showkit --agent codex --agent claude-code --global --yes --copy を使用します。
• Skills CLIコマンドはCodexとClaude Codeのスキルディレクトリを対象としています。これはCoworkプラグインインストールの証明ではありません。Claude Coworkでは、カスタマイズ → プラグイン から hyunghwan/showkit マーケットプレイスを追加し、ShowKit プラグインをインストールし、アプリがリロードを要求したら新しいタスクを開始します。どちらのインストールルートも、指示のみを追加します。CLIやPlaywrightは追加しません。
• このスキルがCoworkプラグインキャッシュからロードされた場合、showkit doctor --json の前に、このスキルの scripts/conformance.mjs を実行します。@showkit/cli 0.2.x のdoctorはClaudeのプラグインキャッシュを発見できず、checks.skill.installed: false を報告する可能性があります。conformanceが成功し、doctor.cliVersion がこのスキルの compatibility.json を満たしている場合、スキルはCoworkによってロードされたと報告し、続行します。doctorのSkills CLIリカバリを実行したり、重複したスキルをインストールしたりしないでください。その他のdoctorの失敗と互換性の不一致はブロック状態にします。
• チームバージョン管理された指示の場合は、--global なしで同じコマンドを使用します。
• プライマリセットアップのためにPlaywrightをインストールしないでください。なぜ必要かを説明し、オプションのヘッド付きブラウザまたはCIルートのために @playwright/test またはブラウザバイナリを追加する前に質問します。

モデルと推論予算

モデル選択はホストエージェントに属します。ShowKit自体はLLMを呼び出しません。プロバイダー固有のモデル名を固定したり、すべてのステップで最大のモデルと最高の推論設定を使用したりしないでください。明示的なモデル要求とホストの安全性ポリシーを尊重します。ホストがタスクごとにモデルを選択できない場合は、ワークフローをブロックせずにデフォルトを使用します。

• 機械的で可逆的な作業には、低〜中程度の推論を持つ高速または軽量モデルを使用します：ファイルの検索、インストールされたバージョンの確認、正確なCLIコマンドの実行、既知のデータのフォーマット、決定論的チェックの再実行。
• 通常のShowKitワークフローには、中程度の推論を持つバランスの取れたモデルを使用します：明確な証拠によるソースルーティング、証拠に基づくデモコピー、日常的なコードまたはテーマの変更、確立された受け入れ予算に対するプレビューレビュー。
• セキュリティまたはプライバシーの決定、曖昧または矛盾する証拠、アーキテクチャの変更、説明不能なフィデリティの失敗、または小規模モデルが失敗した後のリカバリにのみ、最高の推論を持つ最も能力の高い利用可能なモデルにエスカレーションします。その複雑さが重要である場合にのみ、非常に高い推論を使用します。
• 不確実な決定が解決されたら、より高速な層に戻ります。停止条件、同意プロンプト、セキュリティチェック、または必要な人間の確認をバイパスするために、モデルまたは推論予算を下げないでください。

ソースのルーティング

• 最初に agents/browser-capabilities.md を読み、アプリ名だけでなく、検証された機能によってルーティングします。
• 「このサイトにShowKit」、「Chromeで開いているページを使って」、および同等の短いリクエストは、既に付与されている機能を検査し、新しい出力フォルダを選択し、互換性のあるShowKit CLIをそこにインストールし、ローカルプレビューを構築する許可として扱います。これらは、公開、プライベートコンテンツの公開、状態変更アクションの実行、またはオプションのPlaywrightのインストールを許可するものではありません。
• ユーザーがHTTPまたはHTTPSのURLを提供し、ChatGPTまたはCodexがBrowserまたはChromeを持っている場合、agents/codex-browser.md と references/url-intake.md を読み、workflow.md の検証されたOpenAIブラウザワークフローを使用します。
• コードベースまたは静的ビルドが利用可能な場合は、静的ソースワークフローを使用します。
• Claudeの組み込みChrome抽出は、インストールされた機能がページコンテキストで実行され、ホストが検証した分離されたページワールドを提供しない場合には利用できません。agents/claude-browser.md を読み、UnsupportedSurface 診断を保持し、すぐにその自動リカバリ順序を実行します...