スキル自身の言葉で
アクセシブルでパフォーマンスが高く、視覚的に洗練されたプロダクション品質のユーザーインターフェースを構築します。このスキルは、AIが生成したものではなく、デザインを理解したトップ企業のエンジニアが作ったように見えるUIを作成することに重点を置いています。実際のデザインシステムへの準拠、適切なWCAG 2.1 AAアクセシビリティ、配慮の行き届いたインタラクションパターンを徹底し、ありがちなAI的な見た目のパターンを避けます。
このスキルは、コロケーションを伴うコンポーネントアーキテクチャ、設定よりも合成を優先する考え方、ローカルのuseStateからグローバルストアまで幅広いステート管理、特定のブレークポイントでテストされたレスポンシブなモバイルファーストデザイン、キーボードナビゲーション、ARIAラベル、フォーカス管理、意味のある空状態・エラー状態、スケルトンローディング、体感速度を高めるための楽観的更新をカバーしています。
生成されるもの
- 読み込み中のコンテンツに対する、aria-busyとaria-labelを用いたスケルトンローディング状態
- role="status"、説明的なテキスト、アイコン、実行可能な次のステップを備えた、意味のある空状態・エラー状態
仕組み
- 01コンポーネントファイルをコロケーションする
コンポーネントの実装、テスト、ストーリー、カスタムフック、型を、そのコンポーネント名を付けた1つのフォルダにまとめて配置します。
- 02コンポーネントは合成する、設定しない
プロパティを多用した設定オブジェクトではなく、ネストされた子要素を用いた合成可能なコンポーネントAPIを構築します。
- 03データ取得と表示を分離する
データの読み込み、エラー、空状態を処理するコンテナコンポーネントを作成し、整えられたデータを表示コンポーネントに渡します。
- 04スコープに応じてステート管理を選択する
コンポーネント固有のUI状態にはuseStateを、2〜3個の兄弟間で共有する状態にはリフトされたステートを、テーマ・認証・ロケールにはContextを、フィルターやページネーションにはURLステートを、リモートデータにはサーバーステートライブラリを、複雑な共有クライアントステートにはグローバルストアを使用します。
- 05デザインシステムのトークンに従う
生の16進値ではなく、text-primaryやbg-surfaceのようなセマンティックなカラートークンを使用し、0.25rem刻みで一貫したスペーシングスケールを保ち、タイプの階層を守ります。
- 06WCAG 2.1 AAアクセシビリティを実装する
すべてのインタラクティブ要素をキーボードで操作可能にし、ラベルのないコントロールにARIAラベルを付け、コンテンツが変化した際にフォーカスを管理し、通常テキストで4.5:1のコントラストを確保し、意味のある空状態・エラー状態を提供します。