slack-ui-skills

Slack UI スキル

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

適用する場面

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

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

色

• SHOULD：主要なサーフェスには明るい背景を使用します
• MUST：ページの背景（surface-base）には #FFFFFF を使用します
• MUST：主要なアクションとフォーカス状態（accent）には #481652 を使用します
• SHOULD：カラーパレットを減らします（現在、31 色が検出されています）
• MUST：アクセシビリティのため、テキストのコントラスト比を 4.5:1 以上に保ちます

セマンティックトークン

トークン	HEX	RGB	用途
surface-base	#FFFFFF	rgb(255,255,255)	ページの背景
surface-raised	#D9EDE7	rgb(217,237,231)	カード、モーダル、浮き上がったサーフェス
surface-overlay	#3F1652	rgb(63,22,82)	オーバーレイ、ツールチップ、ドロップダウン
text-primary	#0F0F0F	rgb(15,15,15)	見出し、本文テキスト
text-secondary	#6B9389	rgb(107,147,137)	セカンダリテキスト、控えめなテキスト
text-tertiary	#656A66	rgb(101,106,102)	補足テキスト
border-default	#BDA6BE	rgb(189,166,190)	控えめな境界線、区切り線
accent	#481652	rgb(72,22,82)	主要なアクション、リンク、フォーカス

タイポグラフィ

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

テキストスタイル

スタイル	フォント	サイズ	ウェイト	色	数
heading-1	Inter	61px	700	#141414	1
text-50px	Inter	50px	700	#0F0F0F	1
text-49px	Inter	49px	700	#0F0F0F	1
body	Inter	22px	500	#949494	1
body-secondary	Inter	22px	semi_bold	#262626	1
body-secondary	Inter	21px	semi_bold	#4A4F4B	1
body-secondary	Inter	20px	500	#747474	1
body-secondary	Inter	20px	400	#4C4C4C	1
text-18px	Inter	18px	400	#7A7A7A	1
text-17px	Inter	17px	400	#6B9389	1

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

フォントファミリー：

• Inter（53 回使用）

フォントサイズ： 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 18px, 20px, 21px, 22px, 49px, 50px, 61px

余白

• MUST：余白には 4px グリッドを使用します
• SHOULD：次のスケールから余白を使用します：1px, 2px, 4px, 5px, 6px, 7px, 9px, 10px
• SHOULD：要素間のデフォルトの間隔として 2px を使用します
• NEVER：任意の余白値を使用しません（デザインスケールを使用してください）
• SHOULD：コンテナー内のパディングを一貫させます

境界線

• MUST：次のスケールから境界線の角丸を使用します：1px, 3px, 4px, 8px, 9px, 16px
• SHOULD：境界線の太さは 1px または 2px に制限します
• SHOULD：デフォルトの境界線の角丸として 4px を使用します
• NEVER：任意の境界線の角丸値を使用しません（デザインスケールを使用してください）
• SHOULD：要素を区切るために控えめな境界線（1px）を使用します

境界線の角丸の参考情報

スケール： 1px, 3px, 4px, 8px, 9px, 16px

レイアウト

• MUST：基準ビューポート幅を 1920px としてデザインします
• SHOULD：要素の幅を一貫させます：15px, 67px, 13px, 16px, 17px
• SHOULD：明確な階層を備えた、テキスト量の多いレイアウトを維持します
• NEVER：h-screen を使用せず、ビューポートの高さ全体には h-dvh を使用します
• MUST：固定要素では safe-area-inset を考慮します
• SHOULD：正方形の要素には w-* と h-* の代わりに size-* を使用します

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

• メインコンテンツ：幅：1920px、高さ：619px

コンポーネント

• MUST：入力フィールドの高さを 0px にします

ボタン

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

入力

• 高さ：0px

インタラクティブな状態

フォーカス

• MUST アクセントカラー（#481652）の2pxのアウトラインを使用する
• MUST 2pxのアウトラインオフセットを使用する
• フォーカスインジケーターを削除してはなりません

ホバー

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

無効状態

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

インタラクション

• 破壊的または取り消し不可能な操作にはAlertDialogを使用するMUST
• ローディング状態には構造的なスケルトンを使用するSHOULD
• エラーは操作が行われる箇所の隣に表示するMUST
• inputまたはtextarea要素での貼り付けをブロックしてはなりません
• アイコンのみのボタンにはaria-labelを追加するMUST

アニメーション

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

パフォーマンス

• 大きなblur()またはbackdrop-filterの領域をアニメーションさせてはなりません
• アニメーションが実行中でないときにwill-changeを適用してはなりません
• レンダーロジックで表現できる処理にuseEffectを使用してはなりません