shortcut-ui-skills

Shortcut UI スキル

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

適用する場面

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

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

色

• 主なサーフェスには明るい背景を使用することが望ましいです
• ページ背景（surface-base）には #FFFFFF を使用する必要があります
• プライマリアクションとフォーカス状態（accent）には #3831BF を使用する必要があります
• カラーパレットを縮小する必要があります（現在 26 色が検出されています）
• アクセシビリティのため、テキストのコントラスト比を 4.5:1 以上に保つ必要があります

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#FFFFFF	rgb(255,255,255)	ページ背景
surface-raised	#EBECF0	rgb(235,236,240)	カード、モーダル、浮き上がったサーフェス
surface-overlay	#D7EAF5	rgb(215,234,245)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#949494	rgb(148,148,148)	見出し、本文テキスト
text-2	#545454	rgb(84,84,84)	補足テキスト
text-secondary	#A0A1A6	rgb(160,161,166)	セカンダリテキスト、控えめなテキスト
border-default	#E3E0D5	rgb(227,224,213)	控えめなボーダー、区切り線
warning	#523F1D	rgb(82,63,29)	警告状態、注意
accent	#3831BF	rgb(56,49,191)	プライマリアクション、リンク、フォーカス

タイポグラフィ

• プライマリフォントファミリーには Inter を使用する必要があります
• 一貫性を保つため、フォントファミリーは 1 種類にすることが望ましいです
• プライマリ見出しには 50px / 700 を使用する必要があります
• 本文テキストには 21px / 400 を使用する必要があります
• フォントウェイトを減らすことが望ましいです（現在 5 種類が検出されています）
• 見出しには text-balance を、本文テキストには text-pretty を使用する必要があります
• 数値データには tabular-nums を使用することが望ましいです
• 明示的に指定されない限り、文字間隔を変更してはいけません

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	数
heading-1	Inter	50px	700	#433CB7	1
heading-2	Inter	50px	700	#121212	1
text-25px	Inter	25px	semi_bold	#1F1F1F	1
body	Inter	21px	400	#747379	1
body-secondary	Inter	20px	400	#949494	1
body-secondary	Inter	20px	400	#999999	1
body-secondary	Inter	19px	400	#919191	2
body-secondary	Inter	19px	400	#8E8E8E	1
body-secondary	Inter	18px	400	#979797	1
body-secondary	Inter	18px	400	#949494	1

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

フォントファミリー：

• Inter（62 回使用）

フォントサイズ： 6px、8px、9px、10px、11px、12px、13px、14px、15px、16px、17px、18px、19px、20px、21px、25px、50px

余白

• 余白には 4px グリッドを使用する必要があります
• 次のスケールから余白を使用することが望ましいです：1px、2px、3px、4px、5px、6px、8px、9px
• 要素間のデフォルトの間隔には 2px を使用することが望ましいです
• 任意の余白値を使用してはいけません（デザインスケールを使用してください）
• コンテナ内のパディングを一貫させることが望ましいです

ボーダー

• 次のスケールから border-radius を使用する必要があります：1px、2px、3px、4px、6px、7px、21px
• ピル型の要素には 21px 以上の radius を使用することが望ましいです
• ボーダー幅は 1px、2px、3px に制限することが望ましいです
• デフォルトの border-radius には 3px を使用することが望ましいです
• 任意の border-radius 値を使用してはいけません（デザインスケールを使用してください）
• 要素の区切りには控えめなボーダー（1px）を使用することが望ましいです

Border Radius のリファレンス

スケール： 1px、2px、3px、4px、6px、7px、21px

レイアウト

• 基準ビューポート幅 1920px を想定して設計する必要があります
• 要素の幅は一貫させることが望ましいです：16px、9px、10px、15px、185px
• h-screen は使用せず、ビューポート全体の高さには h-dvh を使用してください
• 固定要素では safe-area-inset を考慮する必要があります
• 正方形の要素には w-* + h-* ではなく size-* を使用することが望ましいです

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

• メインコンテンツ：幅：1496px、高さ：589px
• メインコンテンツ：幅：1491px、高さ：556px
• メインコンテンツ：幅：1853px、高さ：1053px

コンポーネント

• 入力フィールドの高さには 0px を使用する必要があります

ボタン

バリアント	背景	テキスト	枠線	高さ	角丸
ゴースト	transparent	#76858F	none	-	-

入力欄

• 高さ：0px

インタラクティブな状態

フォーカス

• アクセントカラー（#3831BF）の2pxのアウトラインを必ず使用します
• 2pxのアウトラインオフセットを必ず使用します
• フォーカスインジケーターを削除してはいけません

ホバー

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

無効状態

• 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を使用してはいけません