neon-ui-skills

Neon UI スキル

AI エージェントで Neon スタイルのインターフェースを構築するための推奨制約です。

適用する場面

以下の際にこれらのガイドラインを参照してください。

• ダークモードのインターフェースを構築するとき
• Neon をイメージしたデザインシステムを作成するとき
• Inter フォントと 4px グリッドを使用した UI を実装するとき

色

• 主要なサーフェスには暗い背景（明度 < 20）を必ず使用してください（検出された明度：0）
• ページの背景（surface-base）には必ず #000000 を使用してください
• カラーパレットを絞ることを推奨します（現在 15 色を検出）
• アクセシビリティのため、テキストのコントラスト比を少なくとも 4.5:1 に保ってください

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#000000	rgb(0,0,0)	ページの背景
surface-raised	#262626	rgb(38,38,38)	カード、モーダル、浮き上がったサーフェス
surface-overlay	#FEFEFE	rgb(254,254,254)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#E3E3E3	rgb(227,227,227)	見出し、本文テキスト
text-2	#ACACAC	rgb(172,172,172)	補足テキスト
text-secondary	#6A6B6E	rgb(106,107,110)	セカンダリテキスト、控えめなテキスト
border-default	#262626	rgb(38,38,38)	控えめな境界線、区切り線

タイポグラフィ

• 主要フォントファミリーには必ず Inter を使用してください
• 一貫性のため、単一のフォントファミリーを使用することを推奨します
• 主要な見出しには必ず 54px / 700 を使用してください
• 本文テキストには必ず 16px / 500 を使用してください
• フォントウェイトを絞ることを推奨します（現在 5 種を検出）
• 見出しには必ず text-balance を、本文テキストには text-pretty を使用してください
• 数値データには tabular-nums を使用することを推奨します
• 明示的に要求されない限り、文字間隔は絶対に変更しないでください

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	数
heading-1	Inter	54px	700	#E8E9E8	1
text-26px	Inter	26px	semi_bold	#E3E3E3	1
text-24px	Inter	24px	500	#2C2D2E	1
text-22px	Inter	22px	semi_bold	#7A7B80	1
text-20px	Inter	20px	500	#6A6B6E	1
text-20px	Inter	20px	500	#6C6D70	1
text-18px	Inter	18px	semi_bold	#74757A	1
text-17px	Inter	17px	500	#CECECE	1
body	Inter	16px	500	#707175	1
body-secondary	Inter	14px	400	#9E9E9E	2

タイポグラフィの参考情報

フォントファミリー：

• Inter（26 回使用）

フォントサイズ： 5px、9px、11px、12px、14px、16px、17px、18px、20px、22px、24px、26px、54px

余白

• 余白には必ず 4px グリッドを使用してください
• 次のスケールの余白を使用することを推奨します：4px、5px、8px、22px、58px
• 要素間のデフォルトの間隔には 5px を使用することを推奨します
• 任意の余白値は絶対に使用せず、デザインスケールを使用してください
• コンテナー内のパディングを一貫させることを推奨します

境界線

• 境界線の角丸には必ず次のスケールを使用してください：16px、17px、19px、21px
• ピル型の要素には 21px 以上の角丸を使用することを推奨します
• 境界線の幅は必ず一貫して 1px にしてください
• デフォルトの角丸には 19px を使用することを推奨します
• 任意の角丸値は絶対に使用せず、デザインスケールを使用してください
• 要素を区切るため、控えめな境界線（1px）を使用することを推奨します

角丸の参考情報

スケール： 16px、17px、19px、21px

レイアウト

• 基準ビューポート幅 1920px 向けに必ずデザインしてください
• 要素の幅を一貫させることを推奨します：8px、50px、26px、28px、37px
• 明確な階層を備えた、テキスト主体のレイアウトを保つことを推奨します
• h-screen は絶対に使用せず、ビューポート全体の高さには h-dvh を使用してください
• 固定要素では必ず safe-area-inset を考慮してください
• 正方形の要素には w-* と h-* の組み合わせではなく、size-* を使用することを推奨します

検出されたレイアウトパターン

• ヘッダー：高さ：37px
• メインコンテンツ：幅：1920px、高さ：988px
• メインコンテンツ：幅：1850px、高さ：711px
• メインコンテンツ：幅：1920px、高さ：721px

コンポーネント

ボタン

バリエーション	背景	テキスト	境界線	高さ	角丸
ゴースト	transparent	#A3A3A3	なし	-	-

インタラクティブ状態

フォーカス

• アクセントカラー（#5E6AD2）を使った 2px のアウトラインを必ず使用してください
• 2px のアウトラインオフセットを必ず使用してください
• フォーカスインジケーターは絶対に削除しないでください

ホバー時

• ボタン（プライマリ）：背景色を 10% 明るくします
• ボタン（セカンダリ）：背景に #262626 を使用します
• リスト項目：背景に #262626 を使用します

無効時

• MUST opacity: 0.5 を使用します
• MUST cursor: not-allowed を使用します

インタラクション

• 破壊的または取り消し不可能な操作には、MUST AlertDialog を使用します
• 読み込み状態には、SHOULD 構造的なスケルトンを使用します
• エラーは、操作が発生する場所の近くに MUST 表示します
• input または textarea 要素での貼り付けを NEVER ブロックします
• アイコンのみのボタンには、MUST aria-label を追加します

アニメーション

• 明示的に要求されない限り、アニメーションを NEVER 追加します
• コンポジターのプロパティ（transform、opacity）のみを MUST アニメーションさせます
• レイアウトのプロパティ（width、height、top、left、margin、padding）は NEVER アニメーションさせます
• 登場時のアニメーションには、SHOULD ease-out を使用します
• インタラクションのフィードバックは、NEVER 200ms を超えないようにします
• SHOULD prefers-reduced-motion を尊重します

パフォーマンス

• 大きな blur() や backdrop-filter のサーフェスは NEVER アニメーションさせます
• アニメーションがアクティブでないときに、NEVER will-change を適用します
• レンダーロジックで表現できる処理に useEffect を NEVER 使用します