このスキルの README.md を最初に読んでください。以下が含まれています。
- Vebidor とは何か（V言語による W3C WebDriver + WebDriver-BiDi クライアント）と、何でないか（アプリでもウェブサイトでもなく、ソースにロゴはありません — すべてのビジュアルは提案されたアイデンティティとしてフラグ付きです）。
- コンテンツの基本 — ボイス（技術的、達成志向、比較重視）、ケーシングルール、そして必須の絵文字語彙（✅ ⚠️ 🐛 ✨ 🎉 🏆 ⚡ 🚀 📦 📖 🎯 🌐 🎭 📱）。絵文字はブランドの一部です。ドキュメントやマーケティングサーフェスに残してください。
- ビジュアル基盤 — パレット、タイポグラフィ、スペーシング、モーション、サーフェス、カードのアナトミー。
- アイコン体系 — ステータス用の絵文字、UIクローム用の Lucide（代替としてフラグ付き）、ブラウザロゴ用のモノクロSVGグリフ。
- インデックス — 各ファイルの所在。
次に、他のファイルを参照してください。
colors_and_type.css— すべてのデザイントークン（--vb-blue-500、--slate-950、--code-keyword、--font-mono、--space-*、--radius-*、--shadow-*、--motion-*）とベースタイプスタイル、.chipクラス。新しいものにはこの<link rel="stylesheet">を追加してください。これが基盤です。preview/— 19個のスタンドアロンデザインシステムカード（色、タイポグラフィ、スペーシング、コンポーネント、ブランド）。マークアップを流用できます。assets/— プレースホルダーロゴ（フラグ付き）とブラウザグリフ。ui_kits/docs/— 高忠実度のReactドキュメントサイト再現（TopNav、Sidebar、TocPanel、DocsPage、CodeBlock、Callout、ComparisonTable、ApiSignature）。コンポーネントのスコープ：各ファイルはエクスポートをwindowにアタッチするため、他の<script type="text/babel">ファイルから使用できます。拡張するには、コンポーネントをコピーし、index.htmlに<script type="text/babel" src="…">タグを追加し、同じwindow.X = Xパターンに従ってください。ui_kits/marketing/— ランディングページの再現（MarketingNav、Hero、FeatureGrid、BrowserMatrix、PhasesTimeline、MarketingFooter）。同じコンポーネントスコープパターンです。fonts/README.md— Google Fonts CDN（Geist + JetBrains Mono）経由で読み込まれるフォント。代替はフラグ付きです。ユーザーが別のブランドフォントを持っている場合は差し替えてください。
呼び出されたとき
ユーザーが他のガイダンスなしにこのスキルを呼び出した場合は、何を作りたいか（ドキュメントページ？ ランディングセクション？ CLI出力モックアップ？ リリースノートグラフィック？ 比較表？ ターミナルスクリーンショット？）を尋ねてください。どのサーフェス（ドキュメント、マーケティング、ターミナル）と、APIのどの部分をフィーチャーしたいかを尋ねてください。その後、HTMLアーティファクトを出力するエキスパートデザイナーとして振る舞ってください — または、実際のリポジトリで作業している場合はプロダクションコードを出力します。
ビジュアルアーティファクト（スライド、モック、使い捨てプロトタイプ）を作成する場合
assets/から必要なアセットと、マークアップを流用したいプレビューカードをコピーします。- 現在のプロジェクトに静的なHTMLファイルを作成します。
colors_and_type.cssをリンクします（相対パス）。 - 基盤を使用します：アクセントには
--vb-blue-500、コードには--code-bg/--code-fgとトークンクラス、ステータスには.chip chip--successなどを使用し、--font-sans+--font-monoを適用します。 - ブランドが使用している場所では絵文字を残します。✅ ⚠️ ✨ 🏆 は必須であり、装飾ではありません。
- グラデーションや左辺丸めのカードを考案しないでください。フラットなサーフェス、ボーダー、1段階のエレベーションを使用します。
プロダクションコードに取り組む場合
このスキルをブランドリファレンスとして読みます。スクリーンショットから近似するのではなく、colors_and_type.css から値（16進コード、フォントスタック、半径、モーションタイミング）を取得します。ui_kits/ のコンポーネントパターンは外観の再現であり、プロダクションコードではありません — JSXの配線ではなく、スタイルを移植します。
フラグを立てるべき注意点
ユーザーが実際のロゴ、実際のフォント、実際のアイコンを出荷するよう依頼した場合は、一時停止して確認してください。ここにあるものはすべて、ソースリポジトリの散文（ビジュアルアイデンティティがない）から推測されたものです。正規化はしないでください。