github-ui-skills

GitHub UI Skills

AI エージェントで GitHub 風のインターフェイスを構築するための、独自の制約です。

適用する場合

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

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

色

• 主要なサーフェスには、必ず暗い背景（明度 < 20）を使用します。検出された明度：12
• ページの背景には、必ず #10131A を使用します（surface-base）
• 主要なアクションとフォーカス状態には、必ず #030036 を使用します（accent）
• 色のパレットは可能な限り絞ります（現在、23 色が検出されています）
• アクセシビリティのため、テキストのコントラスト比を 4.5:1 以上に保つ必要があります

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#10131A	rgb(16,19,26)	ページの背景
surface-raised	#11122F	rgb(17,18,47)	カード、モーダル、浮き上がったサーフェス
surface-overlay	#186D29	rgb(24,109,41)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#878A91	rgb(135,138,145)	見出し、本文テキスト
text-secondary	#74777E	rgb(116,119,126)	セカンダリテキスト、控えめなテキスト
text-tertiary	#525C71	rgb(82,92,113)	追加のテキスト
border-default	#1A1835	rgb(26,24,53)	控えめな境界線、区切り線
success	#A3D4AD	rgb(163,212,173)	成功状態、確認
accent	#030036	rgb(3,0,54)	主要なアクション、リンク、フォーカス

タイポグラフィ

• 主なフォントファミリーには、必ず Inter を使用します
• 一貫性を保つため、フォントファミリーは 1 つにすることを推奨します
• 主要な見出しには、必ず 53px / 700 を使用します
• 本文テキストには、必ず 29px / 400 を使用します
• フォントのウェイトは regular、bold、light に限定する必要があります
• 見出しには text-balance、本文テキストには text-pretty を必ず使用します
• 数値データには tabular-nums を使用することを推奨します
• 明示的な依頼がない限り、letter-spacing は変更しないでください

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	数
heading-1	Inter	53px	700	#E3E4EA	1
body	Inter	29px	400	#606A7A	1
text-18px	Inter	18px	400	#A7A8BF	1
text-16px	Inter	16px	300	#989BA2	1
text-15px	Inter	15px	300	#3F4249	1
text-15px	Inter	15px	400	#7F848A	1
text-15px	Inter	15px	400	#B5B6C4	1
text-15px	Inter	15px	400	#A3D4AD	1
text-15px	Inter	15px	400	#6B6B71	1
text-15px	Inter	15px	400	#9796B1	1

タイポグラフィのリファレンス

フォントファミリー：

• Inter（54 回使用）

フォントサイズ： 4px、5px、9px、10px、11px、12px、13px、14px、15px、16px、18px、29px、53px

余白

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

境界線

• 角丸には必ず次のスケールを使用します：3px、4px、5px、9px、15px、22px、29px
• ピル型の要素には 22px 以上の角丸を使用することを推奨します
• 境界線の幅は 1px、2px、3px、4px に限定することを推奨します
• デフォルトの角丸には 3px を使用することを推奨します
• 任意の角丸値は使用せず、デザインスケールを使用してください
• 要素を区切るには、控えめな境界線（1px）を使用することを推奨します

角丸のリファレンス

スケール： 3px、4px、5px、9px、15px、22px、29px

レイアウト

• 基準のビューポート幅を 1920px として設計する必要があります
• 要素の幅は、10px、9px、11px、28px、21px に統一することを推奨します
• テキスト量の多いレイアウトに明確な階層を設けることを推奨します
• h-screen は使用せず、ビューポートの高さ全体には h-dvh を使用してください
• 固定要素では safe-area-inset を必ず考慮します
• 正方形の要素には w-* と h-* の組み合わせではなく、size-* を使用することを推奨します

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

• メインコンテンツ：幅：1920px、高さ：1080px
• メインコンテンツ：幅：1920px、高さ：1004px
• ヘッダー：高さ：64px

コンポーネント

• 入力フィールドの高さには、必ず 0px を使用します

ボタン

バリエーション	背景	テキスト	枠線	高さ	角丸
ゴースト	透明	#B5B6C4	なし	-	-

入力欄

• 高さ：0px

インタラクティブな状態

フォーカス

• MUST アクセントカラー（#030036）の 2px のアウトラインを使用する
• MUST 2px のアウトラインオフセットを使用する
• NEVER フォーカスインジケーターを削除しない

ホバー

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

無効状態

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

インタラクション

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

アニメーション

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

パフォーマンス

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