railway-ui-skills

Railway UI スキル

AI エージェントを使って Railway 風のインターフェースを構築する際の、独自の制約です。

適用する場面

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

• ダークモードのインターフェースを構築する
• Railway に着想を得たデザインシステムを作成する
• Inter フォントと 4px グリッドを使った UI を実装する

色

• 主なサーフェスには、明度 20 未満の暗い背景を必ず使用します。検出された明度：7
• ページの背景（surface-base）には、必ず #0F0E14 を使用します
• 主なアクションとフォーカス状態（accent）には、必ず #0B1025 を使用します
• カラーパレットは絞ることを推奨します（現在、19 色検出されています）
• アクセシビリティのため、テキストのコントラスト比を必ず 4.5:1 以上にします

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#0F0E14	rgb(15,14,20)	ページの背景
surface-raised	#1E1C25	rgb(30,28,37)	カード、モーダル、浮き上がったサーフェス
surface-overlay	#0B1025	rgb(11,16,37)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#85848A	rgb(133,132,138)	見出し、本文
text-secondary	#48464F	rgb(72,70,79)	セカンダリテキスト、控えめなテキスト
text-tertiary	#A09FA5	rgb(160,159,165)	補足テキスト
border-default	#15181F	rgb(21,24,31)	控えめな境界線、区切り線
accent	#0B1025	rgb(11,16,37)	主なアクション、リンク、フォーカス

タイポグラフィ

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

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	件数
heading-1	Inter	54px	extra_bold	#E9ECED	1
text-19px	Inter	19px	400	#90959E	1
text-19px	Inter	19px	500	#C6C5CA	1
text-18px	Inter	18px	500	#DACEE6	1
text-15px	Inter	15px	400	#5C3C82	1
text-14px	Inter	14px	400	#C0C4C7	1
text-14px	Inter	14px	400	#8C929B	1
text-14px	Inter	14px	400	#A5A4AA	1
text-14px	Inter	14px	400	#8D8C93	1
text-14px	Inter	14px	400	#95949B	1

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

フォントファミリー：

• Inter（74 回使用）

フォントサイズ： 7px、8px、9px、10px、11px、12px、13px、14px、15px、18px、19px、54px

余白

• 余白には必ず 4px グリッドを使用します
• 以下のスケールの余白を使用することを推奨します：1px、2px、3px、4px、5px、8px、12px、14px
• 要素間のデフォルトの間隔には 2px を使用することを推奨します
• 任意の余白値は使用しないでください（デザインスケールを使用します）
• コンテナー内のパディングは一貫させることを推奨します

境界線

• 角丸には必ず以下のスケールを使用します：0px、2px、3px、4px、5px、6px、8px、10px
• 境界線の幅は以下に絞ることを推奨します：1px、2px、6px
• デフォルトの角丸には 3px を使用することを推奨します
• 任意の角丸値は使用しないでください（デザインスケールを使用します）
• 要素の区切りには、控えめな境界線（1px）を使用することを推奨します

角丸の参照情報

スケール： 0px、2px、3px、4px、5px、6px、8px、10px

レイアウト

• ベースのビューポート幅を 1920px として、必ずデザインします
• 要素の幅を一貫させることを推奨します：81px、8px、72px、62px、708px
• テキスト量の多いレイアウトを、明確な階層構造で維持することを推奨します
• h-screen は使用せず、ビューポート全体の高さには h-dvh を使用します
• 固定要素では、必ず safe-area-inset を考慮します
• 正方形の要素には、w-* と h-* の組み合わせではなく、size-* を使用することを推奨します

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

• メインコンテンツ：幅：1920px、高さ：1080px
• メインコンテンツ：幅：1710px、高さ：958px
• メインコンテンツ：幅：1853px、高さ：724px
• ヘッダー：高さ：53px
• ヘッダー：高さ：52px

コンポーネント

ボタン

バリアント	背景	テキスト	境界線	高さ	角丸
ゴースト	透明	#2C2B33	なし	-	-

インタラクティブ状態

フォーカス

• アクセントカラー（#0B1025）の 2px のアウトラインを必ず使用します
• 2px のアウトラインオフセットを必ず使用します
• フォーカスインジケーターを決して削除しないでください

ホバー

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

無効状態

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

インタラクション

• 破壊的な操作や取り消せない操作には、必ず AlertDialog を使用します
• 読み込み状態には、構造を示すスケルトンを使用することを推奨します
• 操作が行われる箇所の近くに、必ずエラーを表示します
• input または textarea 要素への貼り付けを決してブロックしないでください
• アイコンのみのボタンには、必ず aria-label を追加します

アニメーション

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

パフォーマンス

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