plugin87/ux-ui-agent-skills

解決する課題

AIエージェントはしばしば「スロップ（slop）」を生成します。これは、汎用的で焦点が定まっておらず、ハードコードされた値を使用し、基本的なアクセシビリティ基準を満たさないUIのことです。本プロジェクトは、構造化された知識レイヤーと客観的な検証ツールセットを提供し、LLM（特にClaude）をシニアデザインアーキテクトに変貌させます。これにより、あらゆるフレームワークにおいて、本番環境に対応した、アクセシブルでトークン駆動型のUX/UIデザインを生成できるようになります。

仕組み

これはランタイムライブラリではなく、純粋な指示と知識のレイヤーとして機能します。以下の要素を組み合わせています：

• 構造化された指示: エージェントの「デザイン教義」を定義する CLAUDE.md およびルールファイル。
• デザイン・トークン: DTCG形式を使用した3層アーキテクチャ（Primitive $\rightarrow$ Semantic $\rightarrow$ Component）。
• 客観的ゲート: 52の自動チェック（うち34はPlaywrightを使用して実際のブラウザで実行）により、WCAG 2.2のコントラスト、ターゲットサイズ、レスポンシブなオーバーフロー、および「スロップ」を検証します。
• 実行可能なスキル: エージェントが特定の設計タスクや監査を実行するために呼び出せる25のスキルとスラッシュコマンド（例: /brandkit、/critique、/gate）。
• フレームワークアダプター: ReactやTailwindからSwiftUIやFlutterまで、エージェントがあらゆるスタックをターゲットにできるようにするプロトコル。

対象ユーザー

AIコーディングエージェント（Claude Code、Cursor、Codex、Aiderなど）を使用する開発者やデザイナーで、手動での引き継ぎなしに、プロフェッショナルなデザインシステム基準に準拠した高忠実度でアクセシブルなUIコンポーネントやフルスケールの画面を必要としている方。

ハイライト

• アンチ・スロップ教義: 汎用的なグラデーションや一貫性のない角丸など、一般的なAI生成UIパターンを具体的に検出し、拒否します。
• 包括的なアクセシビリティ: フォーカストラップやモーション低減ポリシーを含む、WCAG 2.2 AA/AAA基準の監査を内蔵。
• 膨大な知識ベース: 138のブランドグレードのデザインシステムと52のコンポーネント仕様が含まれています。
• マルチエージェントワークフロー: 定量化できないUXの知見に基づいて作業の拒否を主張する design-critic エージェントが含まれています。
• フレームワーク非依存: 柔軟なアダプタープロトコルにより、あらゆるフロントエンドフレームワークをサポートします。