Theming

design-system-patternsは、デザインシステムやコンポーネントライブラリ向けに、トークン設計、テーマアーキテクチャ、再利用しやすいコンポーネントAPIパターンを通じて、拡張しやすいUI基盤づくりを支援するスキルです。

visual-design-foundationsは、タイポグラフィスケール、カラートークン、スペーシングルール、アイコノグラフィの指針をもとに、実践的なUIシステム作りを支援します。強固なデザイン基盤の導入、スタイルガイドの整備、情報階層の監査、明確な設計制約に基づく実装向けCSS変数の作成に活用できます。

colorizeスキルは、グレー中心で単調なインターフェースに戦略的な色を加えたいUIチーム向けのスキルです。どんな場面で使うべきか、どのような文脈情報が必要か、そして $frontend-design やブランドを踏まえた配色判断とともに impeccable のワークフローへどう組み込むかを理解できます。

audit skill は、フロントエンド実装に対して技術的な UX Audit を実施し、アクセシビリティ、パフォーマンス、テーマ対応、レスポンシブ挙動、アンチパターンを確認します。結果はスコア付きの所見、P0〜P3 の重大度ラベル、アクションプランとして整理されます。利用前には、関連する impeccable skills による必要なセットアップが求められます。

normalizeは、UI機能を監査し、デザインシステムに沿う形へ整えるためのスキルです。normalizeの導入方法、必要なfrontend-designの事前準備、ページ・ルート・コンポーネントでの実践的な使い方を確認できます。

colorizeスキルが、グレー中心や平坦に見えるUIデザインに戦略的に色を加える方法を解説します。このガイドでは、frontend-designによる事前準備、リポジトリから読み取れる導入時の前提、そして階層設計・意味づけ・ブランド適合のための実践的な使い方を紹介します。

auditスキルは、ページ・機能・コンポーネントを対象に、構造化された技術UXレビューを実行します。アクセシビリティ、パフォーマンス、テーマ対応、レスポンシブ挙動、フロントエンドのアンチパターンを確認し、P0〜P3の重要度付きスコア評価とアクションプランを返します。必須の `/frontend-design` コンテキスト手順を済ませた後に使うのが最適です。

expo-tailwind-setup は、Expo で Tailwind CSS v4 を導入・設定するための実践ガイドです。react-native-css と NativeWind v5 を使い、iOS・Android・web 向けのセットアップ手順を具体的に案内します。

mui は、React で Material UI v7 を使うための要点に絞ったガイドです。`sx` スタイリング、テーマのカスタマイズ、レスポンシブレイアウト、v7 で重要な移行変更を整理しており、スキルの導入方法を確認しながら、主要ファイルを追って、最新の `@mui/material` パターンで MUI コンポーネントを生成する際に役立ちます。

marp-slide は、7種類のテーマ、再利用しやすいテンプレート、Marp の構文・画像・CSS の参考資料を備え、整った Marp スライドデッキ作成を支援するスキルです。ラフなメモからでも、構成を整えたプレゼン向けの markdown に仕上げやすく、テーマ選びを素早く進めながら、より安定したスライド作成フローを実現できます。

makepad-2.0-theme は、theme.* 変数の適用、ダーク／ライトテーマの切り替え、デザイントークンに基づく一貫したスタイル維持を行うための Makepad 2.0 テーマ用 skill です。本ガイドでは、makepad-2.0-theme のインストール方法と使い方を、プロダクション UI やデザインシステムの観点からわかりやすく確認できます。

figma-generate-library は、コードベースから Figma のデザインシステムを構築・更新するためのスキルです。トークン、コンポーネントライブラリ、ドキュメント、ライト/ダークテーマ対応まで、順序立てたワークフローで進められます。単発のモックアップではなく、Design Systems 向けの実践的なガイドが必要なときに使ってください。Plugin API の呼び出しには figma-use を補完的に併用できます。

figma-generate-library は、コードベースを tokens、variables、components、theming、documentation を備えた Figma の design system library に変換するのに役立ちます。Design Systems の作業で、install、setup、discovery、creation、validation、code との reconciliation まで含む段階的なワークフローが必要なときに、この figma-generate-library スキルを使います。

WordPressのブロックテーマ作業では、wp-block-themesを使うと便利です。theme.json、テンプレート、テンプレートパーツ、パターン、スタイルバリエーション、Site Editor のデバッグまで幅広く対応できます。デザイン実装や導入・利用の流れに向いており、スタイル階層、上書き、キャッシュ、ユーザーによるカスタマイズの問題を、勘に頼らず整理して解決しやすくするために作られています。

teach-impeccable は一度だけ設定すればよいスキルです。リポジトリをスキャンし、UX やブランドに関して不足している点だけを質問し、今後の AI セッションで再利用できる継続的なデザイン指針を保存します。