kennedys0/taste-style-brutalism

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

スタイルパック: ブルータリズム

ID: brutalism シグネチャ: 生の構造的な正直さ、露出したレイアウトの足場、妥協のないモノクロのコントラスト、そしてゼロの装飾的なカモフラージュ。

これはスタイルパックであり、必須のデフォルトではありません。明示的な選択または確認された該当プロジェクトスタイルの後にのみ読み込んでください。プロジェクトの指示は個々の選択を上書きできます。アクセシビリティ、ユーティリティ、およびブランドの制約を維持してください。フォントは提案であり、必須の依存関係ではありません。混沌として壊れたレイアウトと恣意的なフォントサイズは、建築的ブルータリズムとはみなされません。

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

• 適しているもの: アバンギャルドなポートフォリオ、アクティビストプラットフォーム、建築アーカイブ、独立系出版、アート/文化機関、および妥協のない構造的な信頼性を求める開発者ツール。
• 注意が必要なもの: 装飾的な親しみやすさと優しい美学がユーザーの初期のためらいを軽減する、従来のマスマーケット消費者向けアプリケーション。
• 参考方向性:
  • 建築的ベトンブリュ: 生コンクリートグレー（#E8E8E8 から #DCDCDC）、純粋な真っ黒な線（#000000）、露出した構造グリッドの分割、およびモノスペースの建築メタデータ。
  • ストリクトモノクローム足場: 純白の背景（#FFFFFF）と太い黒い境界線（2.5px solid #000000）、真っ黒なブロックアクション、およびゼロの装飾。

ブルータリズム素材忠実度ゲート — 必須

ブルータリストページが完了したと見なす前に、最初のビューポートが生の、正直な構造的構成として視覚的に読み取れる必要があります。 ユーザーがこのスタイルを選択した場合、単に装飾なしのデフォルトや混沌とした重なり合ったテキストを適用しただけの汎用的なサイトは不合格です。

成功したブルータリストの実装は、以下のすべてを示す必要があります：

1. 露出した構造的足場: グリッド線、セクション区切り、およびコンテンツコンテナは、可視のソリッドブラックボーダー（2px–3px solid #000000）で形成され、Webページの構造的骨格を称賛します。
2. ゼロの装飾的カモフラージュ: ソフトなぼかしドロップシャドウ、光沢のある反射、丸みを帯びたバブルコーナー、半透明のガラスのぼかしは一切ありません。表面はフラットで不透明で、率直で直接的なものです。
3. 超規律正しい配置: 素材の生の正直さにもかかわらず、配置は非常に正確です。カラム、ボーダー、および行は、不規則な迷いなくシームレスにロックされます。
4. ストリクトなハイコントラストパレット: WCAG AAA（7:1以上）を満たす、妥協のない黒地に白、または黒地にコンクリートのモノクロコントラスト。色は、運用上のアラートシグナル（純粋な赤 #FF0000 または生の警告黄色 #FFD700）としてのみ使用されます。
5. 即時のインタラクティブ状態遷移: ボタンとインタラクティブ要素は、:hover および :active で即座に切り替わります（例：黒地に白から白地に黒への即時色反転）。遅延イージングや人工的なスプリング物理は使用しません。

最初のビューポートテスト: デスクトップのスクリーンショットで、ページタイトルを読まずに、露出した構造的な境界グリッド、平らで装飾のない平面、およびストリクトなモノクロの権威を識別します。丸みを帯びたカードやソフトシャドウが含まれている場合は、すぐに装飾的なカモフラージュを取り除いてください。

明示的なブルータリスト構造例外 — 露出グリッドボーダーが必要

ブルータリズム固有のオーバーライド: 過剰な境界線や過酷なコントラストに対する普遍的なアンチスロップ注意事項は、ここでは太い黒い分割線（2px–3px solid）や露出した構造的足場の禁止として解釈してはなりません。建築的ブルータリズムでは、構造的な接合部と正直な素材は称賛され、化粧塗料の背後に隠されることはありません。

• 許可される構造的処理: 可視の2px–3pxの構造的境界線、生の長方形コンテナ、ハイコントラストのモノスペースメタデータ、および即時色反転状態。
• アンチスロップ境界: 本文段落の重なり、読みにくいネオンカラーの衝突、ボタンの位置を不可能にすることによって、意図的にアクセシビリティを壊さないでください。本物のブルータリズムは超機能的主義であり、無作為に壊れたものではありません。
• アンチスロップ解釈: ブルータリストのレイアウトは、構造的完全性、機能的実用性、および読みやすさで評価し、鋭いエッジを柔らかくしようとしないでください。汎用的なソフトヒューリスティックを満たすために構造的境界線を削除することは、デザインの退行です。

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

堅固で重量感のあるグロテスクサンセリフまたはテクニカルモノスペース: Arial、Helvetica、IBM Plex Sans、IBM Plex Mono、またはシステムサンセリフ。見出し: 44–72 px デスクトップ / 30–44 px モバイル（ウェイト800–900、タイトライン高1.05–1.15）。本文テキスト: 16–18 px（ウェイト400、ライン高1.5）。メタデータ、タイムスタンプ、セクションインデックスにはモノスペース。

カラー方向性

• ライトモード（ストリクトペーパー）:
  • キャンバスベース: ストリクトな紙白（#FFFFFF）または建築コンクリート（#E5E5E5）。
  • 構造インク/ボーダー: 純粋な黒（#000000）。
  • サーフェスブロック: ハイコントラストのソリッド塗りつぶし（#000000 または #FFFFFF）。
• ダークモード（ピッチ反転）:
  • キャンバスベース: ストリクトなピッチブラック（#000000）。
  • 構造インク/ボーダー: 純粋なストリクトホワイト（#FFFFFF）。
  • サーフェスブロック: ハイコントラストのソリッドダーク塗りつぶし（#000000 または #121212）。
• 運用シグナルアクセント（単色のみ）: シグナルレッド（#FF0000 / #FF3333）またはワーニングアンバー（#FFCC00）。
• テーマ反転ルール: ブルータリズムでは、ダーク/ライトモードは権威ある極性反転です。ダークモードでは、キャンバスは #000000、テキストとボーダーは #FFFFFF です。ボタンはホバー時にきれいに反転します（ライト: 白ボタンが黒塗りつぶし + 白テキストに反転、ダーク: 黒ボタンが白塗りつぶし + 黒テキストに反転）。黒背景上の黒テキスト、または白背景上の白テキストは固く禁止されています。

レイアウトとジオメトリ

コーナーは厳密にスクエア（border-radius: 0px）。構造的境界線: 2px–3px solid #000000。コンテンツブロックは互いに密着してロックするか、16px/24pxのモジュラーギャップを維持します。

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

サーフェスは100%フラットで不透明、かつ構造的です。シャドウはゼロ。グラデーションはゼロ。奥行きは、黒ブロックを白フレームに重ね、前景色と背景色を即座に反転させることによってのみ確立されます。

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

• ブルータリストボタン: 太い黒枠（2px solid #000000）、白背景、太字大文字テキスト。ホバー/アクティブ時は、即座に黒背景と白テキストに反転します。
• 構造パネル: 上下に太い境界線がある長方形コンテナ。内部セクション間の区切り。
• メタデータタグ: 角括弧で囲まれたモノスペースタグ: [DOC_REF: 4092]。
• フォームコントロール: 飾りのない入力フィールド。太い黒枠とハイコントラストなソリッドブラックのフォーカスリング（outline: 3px solid #000000; outline-offset: 2px;）。

モーション

デフォルトで即時状態切り替え（0 ms）または非常に短い線形トランジション（60–100 ms）。バウンス、イージングカーブ、パララックス、装飾的なトランジションは一切なし。

任意のAnime.js v4レシピ

• モーション判断: デフォルトで即時状態切り替え。本物のブルータリズムにはAnime.jsは一般的に不要。
• 開始時間: 0ms（即時）。特定の機能的な機械的シャッタースライドが要求された場合のみ調整。
• 避けるもの: スプリング、スライディングリビール、劇的なスクロールアニメーション。
• 依存関係: デフォルトではCSS/ネイティブ。Taste Engineのreferences/motion-engine.mdが利用可能な場合はそれに従う。スタンドアロンのスキルは、上記の動き減少および装飾ループ禁止の原則に従う。

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

直接的で、率直で、事実に基づく。例：「INDEX」、「DOWNLOAD SPECIFICATION」、「TERMINAL ERROR: CONNECTION LOST」、「CONFIRM」。おしゃべりな会話調のコピーや説得力のあるマーケティングの誇張表現は避けてください。

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

トークン	ライトモードデフォルト	ダークモードデフォルト
--taste-brutal-bg	#ffffff	#000000
--taste-brutal-ink	#000000	#ffffff
--taste-brutal-surface	#ffffff	#121212
--taste-brutal-border	2.5px solid #000000	2.5px solid #ffffff
--taste-brutal-radius	0px	0px
--taste-brutal-signal	#ff0000	#ff3333
--taste-brutal-font-heading	'Arial Black', Arial, Helvetica, sans-serif	'Arial Black', Arial, Helvetica, sans-serif
--taste-brutal-font-body	Arial, Helvetica, sans-serif	Arial, Helvetica, sans-serif
--taste-brutal-font-mono	'IBM Plex Mono', monospace	'IBM Plex Mono', monospace
--taste-brutal-motion-duration	0ms	0ms

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

ヒーロー構成（最初の全ビューポート）

公開向けポートフォリオ/ランディング/ホームページにヒーローがある場合: 1画面表示のヘッダー+ヒーロー構成を使用します。ベースの高さは min-height: 100svh とし、100vh をフォールバックとします。ヘッダーが通常フローにある場合のみ、実際のヘッダーを減算します。アクセシビリティと短いモバイル画面のためにヒーローが拡張されるようにします。これをプライベートダッシュボードや他のタスク画面には適用しないでください。ユーザーの直接のオーバーライドが優先されます。スタイル固有の方向性: 最初のビューポートを、謝罪のない建築的な一枚岩として構築します。構造的な足場の中にロックされた巨大なディスプレイタイトル、ストリクトな黒のコールトゥアクションブロック、そしてゼロの装飾的な埋め草。ルーターの references/hero-layout.md が存在する場合はそれを参照してください。スタンドアロン使用も同じレスポンシブおよびアンチスロップの原則に従います。

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

• 実施すること: ストリクトなモノクロコントラストを確認。2～3pxの構造的境界線がソリッドであることを確認。鋭い0pxのスクエアコーナーを確認。ダーク/ライトモードの極性反転を確認し、テキストと背景が決して衝突しない（黒地に黒、または白地に白のテキストがない）ことを確認。シグナルアクセントが厳密に単一であることを確認。
• 避けること: 丸みを帯びたコーナー、ソフトドロップシャドウ、またはスムーズなカラーグラデーションを追加しない。装飾的な埋め草バッジやおしゃべりなマーケティングコピーを避ける。ダークキャンバスに切り替えたときに黒インクまたは黒ボーダーを残さない。
• デスクトップとモバイルの一貫性、可視のキーボードフォーカス（:focus-visible）、ローディング、空、無効、エラー、成功状態、および動き減少動作（prefers-reduced-motion）を確認。
• スタイル固有の前提を無関係なプロジェクトに注入しない。スタイルを組み合わせる場合は、プライマリスタイルと借用した機能を明示的に指定する。

普遍的なアンチスロップゲート（自己完結型）

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

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

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

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

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

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

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

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

構造的な正直さ、美的な遊び心ではありません。

• 拒否するもの: 丸みを帯びたピル形状、パステルカラーのアクセント、装飾的なシャドウブラー、遊び心のあるイラスト、汎用的なテンプレートカード、およびテーマの衝突（暗いブルータリストキャンバスに黒いテキストが残っているなど）。
• 代わりに使用するもの: 厚い構造的境界線、ストリクトなタイプ階層、即時状態切り替え、および曖昧さのないコントラストでレイアウトグリッドを露出させる。
• コピーチェック: UIライティングは、マーケティング用語なしで、簡潔で直接的かつ機能的でなければなりません。
• 監査: このスタイルの品質ゲートに加えて、普遍的なアンチスロップの目的、真実、ネストされたサーフェス、コピーライティング、レスポンシブ、アクセシビリティ、およびモーションチェックを実行します。意図的でアクセシブルな機能を罰しないでください。