スキル一覧

WCAG 2.1/2.2（Level A〜AAA）、ビジュアルデザイン（レイアウト、タイポグラフィ、色彩理論）、UXヒューリスティクス、レスポンシブ対応、デスクトッププラットフォーム固有パターンをカバーする包括的デザイン評価スキル。

React NativeとNext.js両対応の包括的UI/UXデザインシステム。6つのプリセットスタイル（ミニマリストモダン〜実験的）、デザイントークン基盤、リファクタリング、アクセシビリティ強化機能。

マルチモーダルAIビジュアルテストプラグイン。Claude 4.5 Sonnetのビジョン機能でスクリーンショット分析。アクセシビリティ（WCAG 2.1）、パフォーマンス、レスポンシブデザインを含む10カテゴリのテスト。

AccessLintによる包括的アクセシビリティスイート。WCAG 2.1レビューエージェント、コントラストチェッカー、a11yリファクタリング、色使用チェック。MCP統合でコントラスト比計算とアクセシブルな色提案を提供。

Claude Codeに2,500以上のshadcn/uiブロック＆コンポーネントのエキスパート知識を付与。71カテゴリ1,338ブロック（ヒーロー、プライシングテーブル、フッター等）と60+グループ1,189コンポーネント。

自然言語プロンプトでVSCodeカラーテーマを生成するスキル。ツール検証、スキャフォールディング、カラーパレット設定、パッケージング、VSCodeインストールまで自動化。反復的な微調整にも対応。

「Refactoring UI」書籍に基づくデザインスキル。定義済みスペーシングスケール、HSLベースカラーシステム、標準化シャドウレベル。/ui-refactorコマンド付き。

エンジニアリング視点でFigmaデザインレビューを自動化。データ構造複雑性、テーブル/リストパフォーマンス、フォームバリデーション、UIの一貫性、セキュリティ権限、仕様の曖昧さの6領域を分析。Figmaに直接コメント投稿。

3つのモードでアクセシビリティ監査を実行。Runtime（axe-coreによるDOM検証）、Static（eslint-plugin-jsx-a11yによるCI/ビルド時チェック）、Full（両方の組み合わせ）。WCAG準拠の包括的チェック。

AI駆動Storybook 9/10開発アシスタント。フレームワーク自動検出（React/Vue/Svelte/Angular等）。/setup-storybook、/generate-stories、/fix-accessibilityコマンド。Vitest + Playwrightテスト、axe-coreアクセシビリティ監査対応。