Skill.md検索

GitHub Primer デザインシステムに準拠した、セマンティックカラートークン（例：--color-accent、--color-fg-success）を使ってUI を統一的に構築できます。 ライト・ダークモード両対応のカラーパレット（前景色・背景色・ボーダー色）を参照しながら、一貫した見た目のコンポーネントを実装できます。 Tailwind CSS v4 のカスタムテーマ（globals.css 定義）とセマンティックトークンを組み合わせ、生の色コード（#0969da）を避けた保守性高い実装ができます。 タイポグラフィ（フォントファミリー・フォントサイズ）、レイアウト、アクセシビリティ（WCAG 2.1 AA）のガイドラインをまとめた一元的なリファレンスを参照できます。 「ボタンを作って」「ダークモード対応」「レスポンシブにして」「色を変えたい」といった UI/UX 依頼時に、自動的にこのスキルを呼び出させ、設計の揺らぎを防げます。 GitHub Primer 風の、モダンで統一感のあるUI を構築したい開発チーム コンポーネント設計でカラーバリエーション・レスポンシブ対応・ダークモード対応を一気に考慮したい人 デザインと実装のギャップを埋め、ブランドトーン統一を重視する組織 WCAG 準拠のアクセシブル UI が必須な プロジェクト 基本原則：(1)セマンティックトークン（CSS 変数）で色を管理、生の色コード禁止、(2)ライト/ダーク両モード対応、(3)WCAG 2.1 AA 最低基準、(4)Tailwind ユーティリティ優先・カスタムCSS最小限。カラーパレット（references/colors.md 詳細参照）：前景色トークン（--color-fg-default 本文、--color-fg-muted 補助、--color-fg-link リンク青、--color-fg-success 緑、--color-fg-danger 赤、--color-fg-attention 黄、--color-fg-done 紫）、背景色トークン（--color-bg-default 白/黒、--color-bg-muted グレー、--color-bg-emphasis 強調、--color-bg-accent 薄青など状態別）、ボーダー色トークン（--color-border-default グレー、--color-border-accent 青、成功/危険別）。タイポグラフィ：フォントスタック（-apple-system, BlinkMacSystemFont, 'Segoe UI' など、Geist 設定済み、フォールバック有）、フォントサイズテーブル定義。