plugin87/ux-ui-agent-skills

何を解決するか

このプロジェクトは、AIエージェント（特にClaude）を上級のUX/UI設計アーキテクトに変換するための包括的な知識と指示レイヤーを提供します。一貫性のない、アクセシビリティを無視した、または「雑な」AI生成UIの問題を解決するために、構造化されたデザイントークン、アクセシビリティ基準（WCAG 2.2）、および138のデザインシステムライブラリを提供し、あらゆるフロントエンドフレームワークでプロダクション対応のトークン駆動型出力を保証します。

仕組み

このキットは、CLAUDE.md ファイルを介して Claude Code や Claude ベースの IDE と統合される純粋な指示・知識レイヤーとして機能します。リクエストルーターを使用して、必要に応じて特定のルールや知識を読み込みます。このシステムは以下の3つの主要な要素で構成されています：

1. 知識レイヤー：DTCG形式の膨大なデザイントークンライブラリ、アトミックデザインに従ったコンポーネント仕様、および美的アーキタイプを含む「タストレイヤー」。
2. 実行可能なスキル：17の呼び出し可能な /skills（例：/brandkit、/a11y-audit、/design-code）で、複雑なデザインワークフローをオーケストレーションします。
3. 目的ゲート：PythonおよびNode.jsスクリプトのセットで、トークンの有効性、ライトモードおよびダークモードでのWCAGコントラスト比、アクセシビリティ要件をプログラムで検証し、正確性を保証します。

対象ユーザー

UIコードを生成するためにAIエージェントを使用するフロントエンド開発者、プロダクトデザイナー、およびチームで、プロフェッショナルレベルのデザインシステム、厳格なアクセシビリティ準拠、フレームワークに依存しない実装を必要とする方々。

特徴

• フレームワーク非依存：React、Next.js、SwiftUI、Vue、Svelte、Flutterなど、あらゆるスタックを対象とするアダプタプロトコルを使用。
• アクセシビリティ最優先：組み込みのWCAG 2.2 AA/AAA監査機能と、自動コントラスト検証スクリプト。
• デザイントークンアーキテクチャ：DTCG標準を使用した3段階階層（Primitive → Semantic → Component）を実装。
• 豊富なライブラリ：視覚的方針を提供する138のブランドグレードデザインシステムと、50の詳細なコンポーネント仕様を含む。
• 敵対的レビュー：design-criticエージェントによって駆動される/critiqueスキルを備え、作品をレンダリングし、上級デザイナーの証拠に基づいて拒否を主張します。