← 一覧へ
コーディングCC / Codex 両対応難易度: 中級
フロントエンドUI開発 frontend-ui-engineering
プロ級のUIを一緒につくろう！
これは何？
これは、本格的なユーザーインターフェース（UI）を開発するためのスキルです。アクセシビリティが高く、パフォーマンスも良く、見た目も美しいUIをつくることができます。まるで一流企業のデザイナーが手がけたような完成度を目指します。AIが自動生成したような画一的なデザインではなく、本物のデザインシステムに基づいたUIを実現します。
これでできること
- 新しいUIコンポーネントやページをつくる
- 既存のユーザーインターフェースを修正する
- レスポンシブなレイアウトを実装する
- インタラクティブな要素や状態管理を追加する
- 視覚的やUX上の問題を修正する
こんな時に便利
新しいUIコンポーネントやページをつくりたいとき
既存のインターフェースを改善したいとき
レスポンシブなデザインを実装したいとき
インタラクティブな機能を追加したいとき
視覚的な問題を解決したいとき
使い方
このスキルを使うときは、まずどのようなUIをつくりたいかを明確にしましょう。次に、コンポーネントやレイアウトの設計を行い、実際にコードを書いて実装します。最後に、アクセシビリティやパフォーマンスを確認して完成です。
必要なもの
- 特になし
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/addyosmani/agent-skills/tree/main/skills/frontend-ui-engineering手動で置く
Claude Code →
~/.claude/skills/frontend-ui-engineering/Codex →
~/.agents/skills/frontend-ui-engineering/使いこなしのコツ
- UIをつくった後は、コンソールエラーが出ないか確認しましょう。
- すべてのインタラクティブ要素がキーボードで操作できるか確認しましょう（Tabキーでページを操作）。
- スクリーンリーダーがページの内容や構造を正しく伝えられるか確認しましょう。