resend-ui-skills

Resend UI スキル

AI エージェントで Resend スタイルのインターフェースを構築するための、明確な制約です。

適用するタイミング

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

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

色

• 主要なサーフェスには、必ず明度 20 未満のダーク背景を使用します（検出された明度：2）。
• ページの背景（surface-base）には、必ず #060606 を使用します。
• 色パレットは 5 色以内に抑えることを推奨します。
• アクセシビリティのため、テキストのコントラスト比を必ず 4.5:1 以上にします。

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#060606	rgb(6,6,6)	ページの背景
surface-raised	#1D1D1D	rgb(29,29,29)	カード、モーダル、浮き上がったサーフェス
text-primary	#6E6E6E	rgb(110,110,110)	見出し、本文
text-2	#BBBBBB	rgb(187,187,187)	補足テキスト
border-default	#191919	rgb(25,25,25)	控えめな境界線、区切り線

タイポグラフィ

• プライマリフォントファミリーには、必ず Inter を使用します。
• 一貫性を保つため、フォントファミリーは 1 種類にすることを推奨します。
• 主要な見出しには、必ず 88px / 700 を使用します。
• 本文には、必ず 18px / 400 を使用します。
• フォントのウェイトは、bold、regular、medium に限定します。
• 見出しには text-balance、本文には text-pretty を必ず使用します。
• 数値データには tabular-nums を使用することを推奨します。
• 明示的に指定されていない限り、文字間隔は変更しないでください。

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	数
heading-1	Inter	88px	700	#C8C8C8	1
body	Inter	18px	400	#646464	1
body-secondary	Inter	17px	500	#BFBFBF	1
text-15px	Inter	15px	400	#6A6A6A	1
text-14px	Inter	14px	400	#666666	1
text-14px	Inter	14px	400	#626262	1
text-14px	Inter	14px	400	#646464	1
caption	Inter	13px	400	#6E6E6E	1
label	Inter	12px	500	#BBBBBB	1
label	Inter	11px	400	#B6B6B5	1

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

フォントファミリー：

• Inter（13 回使用）

フォントサイズ： 11px、12px、13px、14px、15px、17px、18px、88px

余白

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

境界線

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

角丸の参考情報

スケール： 15px

レイアウト

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

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

• メインコンテンツ：幅：1920px、高さ：963px
• ヘッダー：高さ：57px

コンポーネント

ボタン

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

インタラクティブな状態

フォーカス

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

ホバー

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

無効状態

• 必ず 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 を決して使用しません