kennedys0/taste-style-retro-terminal

このスキルは、ユーザーが明示的に選択した場合、または確認済みのプロジェクト設定で指定された場合にのみ使用してください。新しいUIリクエストに対して理由が不明な場合は、ここでユーザーの好みを決定するのではなく、代わりにスタイルセレクタを使用してください。既存のブランド、アクセシビリティ、ユーザーによる上書きは、以下のすべての例よりも優先されます。以下のスタイルガイドは、スタイル選択前にUIコーディングを開始することを許可するものではありません。

スタイルパック: レトロターミナル

ID: retro-terminal
シグネチャ: 本物のCRT開発者コンソールのビジュアル言語、リン光物質の輝き、等幅表形式構造、モダンなキーボード駆動ユーティリティ。

これはスタイルパックであり、必須のデフォルトではありません。明示的な選択後、または確認済みの該当プロジェクトスタイルの場合にのみロードしてください。プロジェクトの指示は個々の選択を上書きできます。アクセシビリティ、ユーティリティ、ブランドの制約を維持してください。フォントは提案であり、必須の依存関係ではありません。プレーンな黒いページに装飾のない緑色のテキストは、レトロターミナルとして認められません。

適切な用途 / トレードオフ

• 適しているもの: 開発者ポートフォリオ、CLIクラウドダッシュボード、サイバーセキュリティおよびDevOpsツール、システム監視コンソール、クリエイティブコーディング体験。
• 注意すべきもの: 厳格な等幅データレイアウトやターミナルメタファーに馴染みのない非技術系の一般ユーザー。
• 参考方向性:
  • クラシックアンバーCRT: 黒曜石の黒背景 (#0C0D0E) と暖かみのあるリン光アンバー (#FFB000)、微かなラスタースキャンライン、高コントラストのクリーム色ラベル。
  • リン光マトリックスグリーン: 濃いグラファイトキャンバス (#0A0F0D) とエレクトリックリン光グリーン (#33FF33)、角括弧付きウィンドウタイトル、鮮明なログストリーム。
  • サイバーデックシアン: ハイテクターミナル、発光シアン (#00F0FF)、鮮明なボックス描画ボーダー (┌─┐)、キーボードショートカットタグ ([ESC])。

レトロターミナル忠実度ゲート — 必須

レトロターミナルページを完成と呼ぶ前に、最初のビューポートが実際の動作するターミナルコンソールまたはコマンドデッキとして視認できる必要があります。 ユーザーがこのスタイルを選択した場合、等幅フォントを使用した普通のダークウェブサイトは不合格です。たとえCSSクラスに terminal が含まれていても同様です。

成功したレトロターミナルの実装は、以下のすべてを示す必要があります:

1. リン光物質の輝きと高コントラスト輝度: テキストとアクティブインジケーターは、微妙なリン光放射 (text-shadow: 0 0 6px currentColor) を示し、主要な出力は黒曜石の地面に対してWCAG AAコントラストを通過します。
2. 微妙なCRTラスタースキャンラインオーバーレイ: 表面は、制御された静的な水平スキャンラインパターン (repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, transparent 2px)) を特徴とし、文字の可読性を損なうことなく、本物のディスプレイの奥行きを追加します。
3. 構造化されたASCII / 角括弧レイアウトフレーミング: ウィンドウヘッダー、パネルフレーム、ステータスバーは、鮮明な1pxルール、ASCIIボックス文字 (┌─┐)、または角括弧バッジ ([SYS_OK]、[MODE: CLI]) を使用します。
4. 本物のコマンドプロンプトとキャレット: インターフェースは、アクティブなシェルプロンプトライン (visitor@terminal:~$) とソリッドブロックキャレット (█) および明確なコマンド履歴スタイリングを備えています。
5. 等幅表形式の配置: コンテンツは、タイムスタンプ、ステータスコード、プロセスID、データ読み出しのために、等幅文字列に沿って厳密に配置されます。

最初のビューポートテスト: デスクトップスクリーンショットで、ページタイトルを読まずに、ターミナルプロンプト、リン光の輝き、スキャンラインラスター、角括弧コンソールフレームを特定してください。もし一般的なダークブログのように見える場合は、スキャンラインオーバーレイとターミナルプロンプト構造を追加してください。

明示的なレトロターミナルスキャンライン例外 — リン光の輝きは許可

レトロターミナル固有の上書き: 装飾的なオーバーレイやスクリーンテクスチャに対する汎用的なアンチスロップ警告は、ここでの微妙なスキャンライン、リン光の輝き、またはシェルプロンプトラインの禁止として解釈してはなりません。これらは素材を有効にするプロパティであり、CRTコンソールの美学に不可欠です。

• 許可される素材処理: 等幅ボックス描画ボーダー、リン光テキストグロー (0 0 6px)、静的スキャンラインラスターオーバーレイ、角括弧ステータスピル、点滅/ソリッドブロックキャレット。
• アンチスロップ境界: すべてのコマンドラインまたはアクションは使用可能でなければなりません。読みにくい降下するマトリックス文字、偽のターミナル起動エラー、または機能的なUIを装った静的な装飾コードスニペットで画面を埋め尽くさないでください。
• アンチスロップ解釈: ターミナル要素を、等幅フレームを禁止することではなく、コマンドの明確さ、可読性、開発者の生産性によって評価してください。汎用的なフラットヒューリスティックを満たすためにスキャンラインとプロンプトラインを削除することは、デザインの退行です。

タイポグラフィとタイプライティング

可読性の高い等幅フォント: JetBrains Mono、IBM Plex Mono、Fira Code、またはシステム等幅 (ui-monospace, monospace)。主要ボディ: 14–15 px; 見出し: 20–32 px、太字 (700) と大文字角括弧スタイル (### [SYSTEM_OVERVIEW])。厳密な文字グリッド配置を維持してください。

カラー方向性

• ダークモード (黒曜石CRTリン光):
  • キャンバスベース: 黒曜石の黒 (#0C0D0E または #080A08)。
  • サーフェスパネル: 濃いスレートチャコール (#14171A または #111613)。
  • リン光アクセント (いずれか選択):
    • クラシックアンバー: #FFB000 (グロー: rgba(255, 176, 0, 0.45))
    • リン光グリーン: #33FF33 (グロー: rgba(51, 255, 51, 0.45))
    • サイバーシアン: #00F0FF (グロー: rgba(0, 240, 255, 0.45))
  • ボーダー: 1px solid rgba(255, 176, 0, 0.25) または #2A2F35。
  • スキャンライン: 半透明のダークラスターライン (repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px))。
• ライトモード (ビンテージパーチメントテレタイプ):
  • キャンバスベース: 暖かいペーパーアイボリー (#F4F1EA)。
  • サーフェスパネル: 暖かいオートミール (#E8E4DA)。
  • リン光反転 (いずれか選択):
    • ダークバーントアンバー: #5C3A00
    • ディープターミナルグリーン: #0F4D19
    • カーボンインク: #111613
  • ボーダー: 1px solid #D5D0C3。
  • スキャンライン: 目立たないかオフ (none または微妙な紙テクスチャ)。
• セマンティックステータス: エラーレッド (#FF5555 ダーク / #B91C1C ライト)、警告イエロー (#FFCC00 ダーク / #B45309 ライト)、成功ミント (#50FA7B ダーク / #047857 ライト)。
• テーマ結合とアンチコリジョンルール: ライトモードでは、明るいリン光アクセントは高コントラストのカーボン/ダークアンバーインク (#111613 または #5C3A00) に反転しなければなりません。明るいアンバー #FFB000 やネオングリーン #33FF33 を明るい紙キャンバスに配置することは、即座にコントラストの衝突であり、固く禁止されています。

レイアウトとジオメトリ

コーナーはシャープまたは最小限 (0px–4px); 1px ソリッドターミナルパネルボーダー; タイトな垂直リズム (4px/8px 等幅ライングリッド)。パネルはモジュラー端末マルチプレクサ (tmux/screen スタイル) をモデルにしています。

サーフェス、奥行き、テクスチャ

• ターミナルスクリーン: 静的スキャンラインラスターオーバーレイ付きの深い黒背景。
• コンソールパネル: 1px ソリッドボーダー (1px solid rgba(255, 176, 0, 0.3) または #2A2F35) と微妙なインセットシャドウ。
• アクティブカーソル: 1s パルスまたはソリッドアクティブ状態のブロックキャレット。

コンポーネントの構造とインタラクション

• コマンドラインプロンプト: user@system:~$ command --flag と機能的な入力および明確な戻り結果。
• ターミナルボタン / アクション: アウトラインブラケットボタン ([ EXECUTE ] または [ CANCEL ]) とホバー時の色反転 (background: currentColor; color: #000;)。
• データログストリーム: タイムスタンプ、ログレベルタグ、メッセージを含む表形式の行。
• キーボードショートカット: 明確なポインタクリックフォールバック付きの角括弧キーインジケーター ([⌘+K]、[ENTER])。

モーション

デフォルトでは即座の状態変更 (0–80 ms)。ヒーローイントロのみ、オプションでスキップ可能な文字タイピングエフェクト。prefers-reduced-motion に即座に従います。

オプションの Anime.js v4 レシピ

• モーションの決定: 等幅文字タイピング表示またはターミナルスキャンバースイープ; フレームレートを安定させます。
• 開始時間: トークンブロックあたり 100ms (0 = 即時); タスクとユーザーの好みに応じて調整します。
• 避けるもの: 画面のジッター、人工的な歪みウェーブ、永続的な点滅ループ。
• 依存関係: デフォルトはCSS/ネイティブ。要求されたインタラクションが正当化する場合にのみ Anime.js v4 を使用します。利用可能な場合は Taste Engine references/motion-engine.md に従います。スタンドアロンスキルは上記のモーション削減および非装飾ループの原則に従います。

UIライティングとマイクロコピー

精密で、技術的、コマンド駆動型。例: deploy --prod、status: healthy、4 processes running。見下したようなマーケティングの話し言葉は避けてください。

スタータートークン (提案であり、完全なテーマではありません)

トークン	ダークモードデフォルト	ライトモードデフォルト
--taste-term-bg	#0c0d0e	#f4f1ea
--taste-term-surface	#14171a	#e8e4da
--taste-term-text	#ffb000	#5c3a00
--taste-term-amber	#ffb000	#5c3a00
--taste-term-glow	0 0 6px rgba(255, 176, 0, 0.45)	none
--taste-term-border	1px solid rgba(255, 176, 0, 0.25)	1px solid #d5d0c3
--taste-term-scanline	repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0px, transparent 2px)	none
--taste-term-radius	2px	2px
--taste-term-font-mono	JetBrains Mono, IBM Plex Mono, monospace	JetBrains Mono, IBM Plex Mono, monospace
--taste-term-motion-duration	80ms	80ms

トークンは方向性を表し、すべてのパレット/プラットフォームでコピーペーストが保証されているわけではありません。プロジェクトレベルで --taste-term-* を定義し、カラーコントラストを確保し、リテラル値を散在させるのではなくテーマトークンを介して適応させてください。

ヒーロー構成 (最初のフルビューポート)

公開ポートフォリオ/ランディング/ホームページにヒーローがある場合: 1画面表示のヘッダー+ヒーロー構成を使用します。基本の高さは min-height: 100svh とし、100vh をフォールバックとして、ヘッダーが通常フローにある場合にのみ実際のヘッダーを差し引きます。アクセシビリティと短いモバイル画面のためにヒーローを拡張できるようにします。これをプライベートダッシュボードや他のタスク画面に適用しないでください。ユーザーによる直接の上書きが優先されます。スタイル固有の方向性: 最初のビューポートを、ウェルカムASCIIバナー、システムステータスサマリー、動作するプロンプトラインを備えた本物のインタラクティブコンソールセッションとして構築します。偽のマトリックスレインや読みにくいグリッチループをシミュレートしないでください。存在する場合はルーター references/hero-layout.md を参照してください。スタンドアロンでの使用も、同じレスポンシブおよびアンチスロップの原則に従います。

スタイル固有の品質ゲート

• やるべきこと: キャンバスに対する高いテキストコントラスト (WCAG AA) を確認する; 等幅配置が維持されていることを確認する; すべてのキーボードショートカットにクリックフォールバックを提供する; スキャンラインの可読性をテストする; ダーク/ライトモードの切り替えをテストし、リン光色が明るい地面で高コントラストのダークインクに反転することを確認する。
• やってはいけないこと: プレーンなダークテーマをレトロターミナルとして扱わない; 読みにくいグリッチアニメーションを避ける; ユーザーを混乱させる偽の非インタラクティブコンソールプロンプトを提示しない; パーチメント上のネオングリーンや薄いアンバーテキストなどのライトモードテーマの衝突を避ける。
• デスクトップとモバイルの一貫性を確認する; 可視のキーボードフォーカス (:focus-visible); ローディング、空、無効、エラー、成功状態; モーション削減動作 (prefers-reduced-motion)。
• スタイル固有の想定を無関係なプロジェクトに注入しないでください。スタイルを組み合わせる場合は、プライマリスタイルと借用した機能を明示的に指定します。

ユニバーサルアンチスロップゲート (自己完結型)

すべての要素はその場所に値する必要があります。装飾よりコンテンツ。不確実性を装飾しないでください。 バランス、指標、推薦の声、ユーザー、ロゴ、承認、確認済み/ライブ/オンラインステータス、偽のアクティビティ、または成功確認をでっち上げないでください。代わりに、正直な空/ローディング/エラー状態を使用してください。デモデータは、要求され、かつ明示的にラベル付けされている場合にのみ許容されます。

装飾的なカード内カードレイヤーを追加しないでください: ネストされたサーフェスは、明確なインタラクションまたは情報境界を表す必要があります。自動生成された3フィーチャーグリッド、4統計ダッシュボード、偽のヒーロー主張、目的のないチャート、バッジ/チップ/アイコンのスパム、無関係な装飾アート、ビューポートを埋めるためだけのランダムループを避けてください。タイポグラフィ、スペーシング、配置、区切り線を使用したグループ化を優先してください。同等のピアには意図的な視覚的バランスが必要です。

アンチスロップコピーライティング: 一般的な「可能性を解き放て」「未来を体験せよ」「ワークフローを加速せよ」「シームレス」といった主張や、その翻訳版は使用しないでください。見出しは実際のコンテンツを伝え、CTAはアクションを命名し、空/エラー/成功テキストは実際の状態と次のステップを説明する必要があります。偽の緊急性、でっち上げられたカウント、曖昧なAI誇大広告、不必要な絵文字、アクセスできないオールキャップスの壁を避けてください。真実を変えずに、このスタイルとユーザーの言語に合わせて表現を適応させてください。

テーマとモードのコントラスト整合性: ユーザーがダークモードまたはライトモードを要求した場合 (またはテーマスイッチャーを構築した場合)、背景色と前景色は、すべてのサーフェス、テキスト、ボーダー、入力、セマンティックバッジにわたって同期したペアで反転する必要があります。黒い背景に黒いテキスト、白い背景に白いテキスト、または読みにくい低コントラストのステータスピルを決して残さないでください。すべての状態はWCAG AAコントラスト (本文/通常テキストは最低4.5:1、大きな見出しとインタラクティブ境界は3:1) を満たす必要があります。

レスポンシブとモーション: モバイルを意図的に構成し、長いラベル、フォーカス状態、アクセス可能なコントラストを確認します。流行のレイアウトに合わせてテキストをクリップしないでください。デフォルトでは静的。意味のあるインタラクションにモーションを使用し、モーション削減設定を尊重し、実際の状態なしにバウンス/フローティング/パルス装飾を避けてください。

クリティカル/ハイ finding ブロック完了: 捏造されたステータス/データ、壊れたアクション、アクセス不能/クリップされたコントロール、誤解を招くコピー、テーマコントラストの衝突、または重大なモバイル障害は修正する必要があります。実際に検証されたものを報告し、実行しなかったテストを主張しないでください。

美学の拒否権ではない: 表現力豊かな色、シャドウ、グラデーション、カードレイアウト、装飾的な処理は、選択された美学の意図的な一部であり、ユーザビリティチェックに合格する場合、正当です。無言でミニマリズムを強制しないでください。

アンチスロップ: スタイル固有

本物のCLI環境、ハッカーの壁紙ではない。

• 拒否: ターミナルを装った一般的なダークカード、装飾的な非機能コンソールプロンプト、目がくらむスキャンラインオーバーレイ、明るい紙の背景に対するネオンテキスト、読みにくいマトリックスレインループ。
• 代わりに: 実際の等幅階層、動作するコマンドラインまたは表形式のデータ表示、便利なステータスバー、正しいカラーコントラストを提供します。