デザインコンテキストジェネレーター & OpenCode データエンジン

デザインコンテキストジェネレーター & OpenCode データエンジン は何をしますか？

フロントエンドデザインシステム（DESIGN_CONTEXT.md）と、依存関係のないライブHTMLプレビュー（design-preview.html）を対話的に設計、視覚的にテスト、トークン効率良く生成する、次世代システムスキルです。

ブラウザDevTools MCP分析を介して抽出された OpenCode Data（opencode.ai/data）テクニカルモノスペーステレメトリーデザインシステムを直接組み込んでいます。IBM Plex Mono タイポグラフィ、黒曜石チャコールキャンバス（#161616）、ヘアライン0.5px精度のボーダー、ライブステータスティッカー、リーダーボードランキングカード、高密度データテーブルを特徴とします。

以下を厳格に適用します：

1. 60-30-10カラールール + 機能的なフィードバック状態。
2. 数学的WCAG 2.1 AA/AAAアクセシビリティ（本文は最低4.5:1、ボーダー/コントロールは3.0:1、強調テキストは7.0:1）。
3. Tailwind CSS v4ブラウザCDNアーキテクチャ（@tailwindcss/browser@4）@theme と @custom-variant dark を使用。
4. トークン効率の高いセマンティックユーティリティレシピ（カスタムCSSの肥大化を伴わないコンパクトなクラス）。
5. 絵文字不使用（1.5px/2pxストロークのシャープなSVGアイコン、またはクリーンなテキストバッジを使用）。

---

使用タイミング

• あらゆるWebアプリケーションやダッシュボードの DESIGN_CONTEXT.md を初期化、アップグレード、または生成するとき。
• OpenCode Data（opencode.ai/data）にインスパイアされた、テレメトリーダッシュボード、AIリーダーボード、開発者ツール、データ密度の高いプラットフォームを作成するとき。
• Tailwind CSS v4（CDNまたはVite/CLI）またはTailwind v3のデザイントークン、UIガイドライン、スタイリング標準を確立するとき。
• 下流のAIコーディングエージェントに、あいまいな16進数コードのずれを防ぐための、簡潔で曖昧さのないコンポーネント設計図を提供するとき。

---

コアディレクティブと制約

1. ワンショットダンプ禁止：最初のターンで最終的な DESIGN_CONTEXT.md を出力しないこと。5フェーズのインタラクティブワークフローに従い、プリファレンスを取り込み、トークンを調和させ、コントラストを数学的に検証し、ライブビジュアルプレビューを生成し、ユーザーと確認すること。
2. トークン効率の高いセマンティックレシピ：設計図は、カスタムCSSブロックや一時的な16進数値（bg-[#1a2b3c]）ではなく、コンパクトなセマンティックTailwindユーティリティクラス（例：px-4 py-2 rounded-input bg-primary text-primary-foreground）で記述すること。
3. 絵文字不使用：生成されるデザインコンテキスト、コードファイル、ユーザーとの通信で絵文字を決して使用しないこと。クリーンなSVGアイコンの仕様か簡潔なテキストバッジを使用すること。
4. WCAG 2.1 AA/AAA準拠：すべての色の組み合わせは、数学的なコントラストテストに合格しなければなりません。
   • キャンバス/サーフェス上の本文テキスト：≥ 4.5:1（AAA標準は ≥ 7.0:1 を目標）。
   • 必須アイコン、ボーダー、入力コントロール：≥ 3.0:1。
   • プライマリCTAボタンテキスト：≥ 4.5:1。
5. TAILWIND CSS V4 CDNアーキテクチャ：
   • スタンドアロンのゼロビルドHTML/JSの場合、<script src="https://unpkg.com/@tailwindcss/browser@4"></script> を使用します。
   • <style type="text/tailwindcss"> 内で @theme と @custom-variant dark (&:where(.dark, .dark *)); を使用して設定します。
   • 動的ダークモードは、CSS変数トークンを :root と .dark で入れ替え、<html> 上の .dark クラスで制御されます。

---

モジュールリファレンスとテンプレート

このスキルには、詳細なモジュールリファレンスと本番テンプレートが含まれています：

• opencode-data-spec.md：OpenCode Dataデザインシステムの完全な仕様（IBM Plex Mono、黒曜石キャンバス、ヘアラインボーダー、テレメトリーティッカー、リーダーボードカード、データテーブル、スパークライン）。
• archetypes.md：厳選されたプリセット：
  1. OpenCode Data（opencode.ai/data のテクニカルモノスペースエンジン）
  2. Linear / SaaS Dark（黒曜石ピッチ、エレクトリックバイオレット/シアン、半透明ボーダー）
  3. Ultra-Minimalist（厳格なモノクローム、建築的ホワイトスペース、ゼログラデーション）
  4. Modern Clean Enterprise（Plus Jakarta Sans、エンタープライズブルー、鮮明なカードグリッド）
  5. Fintech Terminal（表形式数字、オーダーブックラダー、損益アクセント）
  6. Editorial Minimal（ディスプレイタイポグラフィ、暖かい紙のトーン、文学的な優雅さ）
• semantic-tokens.md：ユニバーサル60-30-10トークンコントラクト、機能トークン、CSS変数マッピング。
• typography-scales.md：フォントペアリング、Tailwindタイポグラフィスケール、表形式データルール。
• wcag-contrast-rules.md：数学的相対輝度の公式と検証済みコントラストマトリックス。
• preview.template.html：依存関係のないTailwind v4 CDNライブインタラクティブHTMLプレビュー（アーキタイプスイッチャーとテーマトグル付き）。
• DESIGN_CONTEXT.template.md：下流エージェント向けの完全なマークダウン設計図テンプレート。
• tailwind.config.template.js：Tailwind v4 CDN、v4 CSSビルド、v3用のエクスポート可能な設定。
• validate-contrast.js：コントラスト比を計算するNode/ブラウザスクリプト。

---

手順ワークフロー（5フェーズ）

フェーズ 1：情報収集と発見

1. ユーザーが指定したか確認：
   • ターゲットアーキタイプ（デフォルト：OpenCode Data または Linear / SaaS Dark）。
   • 希望するブランド/アクセントカラー（または厳選されたシードアクセントを提供：OpenCode Indigo #8190ff、Cobalt #3b5cf6、Electric Violet #8b5cf6、Emerald #10b981）。
   • ターゲットテーマプリファレンス（デュアルモードデフォルト、ダークファースト、またはライトファースト）。
   • ターゲットスタック（デフォルト：ゼロビルドHTML/JS用のTailwind CSS v4ブラウザCDN、またはVite/CLI）。
2. 指定がない場合は、対話的に ask_question を使用してプリファレンスを明確にします。

フェーズ 2：セマンティックハーモナイゼーションとOpenCode Dataマッピング

1. 選択された色を厳格な 60-30-10分布 + 機能状態にマッピング：
   • 60% 支配的：bg-background、bg-surface、text-foreground。
   • 30% 二次的：bg-surface-elevated、bg-muted、text-muted-foreground、border-border、border-border-subtle。
   • 10% アクセント：bg-primary、text-primary-foreground、hover:bg-primary-hover、ring-ring。
   • 機能的：bg-success、bg-warning、bg-destructive、bg-info とそれぞれのフォアグラウンド。
2. 適切なタイポグラフィスタックを決定：
   • OpenCode Data の場合：IBM Plex Mono をグローバルに適用。
   • Linear / SaaS Dark の場合：Inter または Geist Sans を適用し、表形式メトリクスには JetBrains Mono を使用。

フェーズ 3：数学的WCAGコントラスト検証

1. wcag-contrast-rules.md の相対輝度の公式を使用して、すべてのフォアグラウンド/バックグラウンドペアのコントラスト比を計算します。
2. 以下を確認：
   • ダークモードの #161616 上の本文テキストは > 15:1（AAA）を達成。
   • 二次テキストは > 4.5:1（AA）を達成。
   • アクセントが暗い場合、フォアグラウンドテキストは #ffffff であること。
   • アクセントが明るいネオンの場合、フォアグラウンドテキストは #09090b または #161616 であること。
3. 提案されたパレットテーブルを、正確な16進数コードとコントラスト比とともにユーザーに提示します。

フェーズ 4：スタンドアロンライブビジュアルプレビュー（design-preview.html）

1. 解決されたトークンで preview.template.html を入力して、プロジェクトルートに design-preview.html を生成します。
2. design-preview.html がブラウザで開いてテストする準備ができていることをユーザーに通知：
   • ライブOpenCode Dataリーダーボードカード、テレメトリーステータスティッカー、高密度データテーブル。
   • localStorage 永続化によるライブテーマトグル（ダーク/ライト）。
   • 動的アーキタイプスイッチャー（OpenCode Data、Linear、Ultra-Minimalなどにリアルタイムで変形）。
   • ボタン状態、入力、⌘K 付き検索バー、バッジ、インタラクティブモーダル。
3. ユーザーのフィードバックまたは承認を求めます。

フェーズ 5：本番用 DESIGN_CONTEXT.md と設定エクスポート

ユーザーの承認後：

1. DESIGN_CONTEXT.template.md を使用して、プロジェクトルートに最終決定された DESIGN_CONTEXT.md を書き込みます。
2. ユーザーのスタック（Tailwind v4 CDN <head> または tailwind.config.js）用のエクスポート可能な設定スニペットを提供します。
3. design-preview.html は、将来の反復のための生きたビジュアルテストベンチとして保持します。