frontend-ui-engineering
画面の部品を、本番に出せる水準で作らせる。部品の分け方・状態の置き場所・デザインシステムへの従い方・WCAG 2.1 AA の操作性までを決まりとして渡し、AI が作ったと分かる見た目の癖 8 つを名指しで避けさせる
npx skills add addyosmani/agent-skills/frontend-ui-engineering入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 71,983
- 実用度
- 52
- GitHub star
- 113,697
- 最終更新
- 2026/11/2
頼み方の例
そのままコピーして使えますfrontend-ui-engineeringスキルを使って、この一覧画面のコンポーネントを見直してください。まず、読み込み中・空・エラーの状態、キーボード操作、色の対比、デザインシステムの値から外れた余白を点検した一覧を出し、直すのは私が確認してからにしてください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- 外部通信・シェル実行・ファイル操作の記述は見つかりませんでした
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
コードブロックの言語: css、tsx
この解説は再確認中です。 2026年10月30日に原本（SKILL.md）が更新されており、以下の解説が現在の内容と合っていない可能性があります。最新の内容は GitHub の SKILL.md を確認してください。
いつ使うか
画面を新しく作る、既存の画面を直す、レイアウトを応答型にする、操作や状態を足す、見た目や使い勝手の不具合を直す。本文の「使うとき」はこの 5 つで、要は利用者が触る画面の仕事全般です。
目標として掲げているのは、AI に生成させたようには見えず、デザインの分かる技術者が作ったように見える画面です。見た目の好みを渡すスキルではなく、部品の構造・アクセシビリティ・状態の扱いまでを決まりとして並べた技術の手引きです。
- 名指しで避ける「AI の見た目」の癖
- 8 つ
- 確かめる画面の幅（320・768・1024・1440px）
- 4 つ
- SKILL.md（2026-10-22 時点）
- 11,721 バイト
部品の作り方
部品に関わるファイル（本体・試験・Storybook・専用のフック・型）は 1 つのフォルダにまとめます。そのうえで、3 つの型が示されています。
- 設定より組み合わせ引数を増やすより、
CardとCardHeaderのように子の部品を組む - 1 つのことだけをする1 つの部品に役目を 1 つ
- 取得と表示を分ける取得側が読み込み中・エラー・空を捌き、表示側は描くだけ
状態は、足りる中でいちばん単純な置き場所に
| 置き場所 | 向いているもの |
|---|---|
部品の中（useState） | その部品だけの表示の状態 |
| 持ち上げた状態 | 2〜3 個の兄弟の部品で共有するもの |
| Context | テーマ・認証・言語のように、読むことが多く書くことが少ないもの |
| URL の状態 | 絞り込み・ページ送り・共有したい表示の状態 |
| サーバーの状態（React Query、SWR） | 取得して保持する遠隔のデータ |
| 全体のストア（Zustand、Redux） | アプリ全体で共有する複雑な状態 |
引数の受け渡しが 3 段より深くなったら、Context を入れるか部品の木を組み直せ、とも書かれています。
「AI の見た目」を名指しで避ける
本文の表は、AI が既定で選びがちな癖を 8 つ挙げ、それぞれ本番の水準ではどうするかを書いています。
| AI の既定 | 代わりに |
|---|---|
| 何でも紫や藍色 | プロジェクトの実際の配色を使う |
| 多すぎるグラデーション | 平らか、デザインシステムに合う控えめなもの |
| 何でも大きな角丸 | デザインシステムの角丸を一貫して使う |
| 中身と関係の無いヒーロー | 中身を先に置くレイアウト |
| ダミーの文章 | 長さや折り返しの問題が見える、現実的な仮の文章 |
| どこでも大きすぎる余白 | 一貫した余白の段階 |
| 型どおりのカードの格子 | 情報の優先度に合わせたレイアウト |
| 影を重ねたデザイン | 控えめか、デザインシステムが指定しない限り無し |
参考の画面は「証拠」として使う
独自の見た目が要るときは、レイアウトを決める前に参考を集めます。信頼できる参考の画面を 2〜3 枚調べ、階層・密度・ナビゲーション・状態などの判断を書き出し、短い「デザインの約束」にまとめてから実装します。
他の製品のブランド・文章・画像・レイアウトをそのまま写すことは禁じられています。参考は雛形ではなく証拠として使え、という言い方です。
値はデザインシステムから取る
余白は決まった段階から選び、13px のような段階に無い値を作らない。見出しは段を飛ばさず、h1 はページに 1 つ。色は text-primary のような意味の名前の値を使い、生の 16 進数を書かない。
文字と背景の対比は、通常の文字で 4.5:1、大きな文字で 3:1 を確保します。色だけで情報を伝えず、アイコンや文字を添えます。
WCAG 2.1 AA を全部品に
すべての部品が満たすべき水準として、WCAG 2.1 AA を置いています。操作できる要素はキーボードで届くこと（div に onClick ではなく button）、文字の無いボタンや入力欄に名前を付けること、ダイアログを開いたら焦点を移すこと、空やエラーの画面を白紙にしないこと、が例つきで示されています。
応答型と読み込み
画面の狭い側から作って広げます。確かめる幅は 320・768・1024・1440px の 4 つです。内容の読み込みにはくるくる回る表示ではなく骨組みの表示を使い、操作の結果は先に画面へ反映する（失敗したら戻す）例が載っています。
使わないほうがいいとき
- 見た目の方向性から決めたい美的な方向を強く打ち出す側のスキル
- 既存の画面を規約で点検したい規約の一覧で照らす側
- React 以外の画面例はすべて TSX。考え方だけを借りる
- デザインシステムが無い「プロジェクトの値を使え」が空振りする
見た目の方向性を決めるのが目的なら
このスキルの軸は「プロジェクトのデザインシステムに従う」ことで、新しい美的な方向を打ち出す道具ではありません。方向性から決めたいなら frontend-design や impeccable のほうが目的に合います。
既存の画面を決まった規約で点検したいなら、web-design-guidelines が別にあります。
React 以外の画面
本文の例は React の TSX と Tailwind CSS で書かれ、取得の例は React Query です。Vue や素の HTML でも考え方は使えますが、例をそのまま写すことはできません。
デザインシステムが無いプロジェクト
「プロジェクトの実際の配色」「デザインシステムの角丸」のように、決まりの多くがプロジェクトの側に値があることを前提にしています。値が無いなら、参考が手に入らないときの指示どおり、前提を書き出したうえで既存の画面と照らすことになります。
注意点
SKILL.md には、外部への通信やシェルの実行の記述はありません。画面のコードを書く・書き換えることが仕事なので、作業ではファイルが変わります。
同梱ファイルは 0 件
スキルのフォルダには SKILL.md しかありません（2026-10-22 時点）。本文の末尾は、詳しいアクセシビリティの要件を ../../references/accessibility-checklist.md に案内していますが、これはリポジトリの直下の references/ にあり、スキルのフォルダの外です。
「最後の点検」が何かは書かれていない
確かめの一覧に、UI に特化した最後の点検（finish-gate review）を通ること、という項目があります。その点検の中身は本文に書かれていないので、何をもって通ったとするかは利用者が決める必要があります。
言い切りの数字は根拠が示されていない
よくある言い訳の表には「応答型を後から直すのは最初からやるより 3 倍難しい」という言い切りがあります。出典は示されていないので、目安として読むのが妥当です。
200 行を超えた部品は分ける
危険の兆しとして、200 行を超える部品、インラインの装飾や段階に無い数値、読み込み中・空・エラーの状態が無いこと、キーボード操作の未確認、色だけで状態を示すこと、AI の見た目、の 6 つが挙げられています。既存のコードに当てると指摘が多くなりやすいので、直す範囲を先に決めてから頼んでください。
ライセンス
リポジトリのライセンスは MIT です。
インストール数の推移
日次で記録10月17日 〜 11月7日（21日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
accessibility
Web のページを WCAG 2.2 に照らして点検し、直させる。描画されたページがあれば Lighthouse の監査とアクセシビリティの木を証拠に直す箇所を絞り、直したら同じ監査と手での操作をやり直させる。2.2 で増えた基準も例つきで載せる
frontend-design
「AI が作った画面」に見えないデザインを狙わせる。避けるべき既定値を名指しで持っている
impeccable
Web やアプリの画面を、作る・見直す・磨くための総合のデザインのスキル。「批評」「点検」「仕上げ」「大胆に」「控えめに」など 20 を超える命令を持ち、製品の背景とデザインの決まりをファイルに残して毎回読み込む
web-design-guidelines
画面のコードを Vercel の基準で点検させる。基準は毎回取りに行くので手元に無い
よくある質問
自動で呼ばれますか
手で呼び出す指定は付いていません。公開元の README も、画面を作る作業をすると自動で呼ばれる例としてこのスキルを挙げています。説明文に、画面やページを作る・直すとき、部品を作るとき、WCAG の要件を満たすとき、と呼びどころが並んでいます。
アクセシビリティはどこまで見てくれますか
本文は WCAG 2.1 AA を基準に、キーボード操作・名前の付け方・焦点の移し方・空やエラーの状態を例つきで示しています。確かめの一覧には、Tab でページを辿る、読み上げで内容と構造が伝わる、開発者ツールや axe-core で警告が出ない、が入っています。
試作でもここまでやる必要がありますか
本文の立場は「試作は本番のコードになる。土台は正しく作れ」です。デザインが決まっていないから装飾を省く、という言い訳も退けていて、その場合はデザインシステムの既定値を使え、と書いています。
対応しているエージェントはどれですか
公開元の README が、Claude Code（推奨と明記）と Codex のそれぞれに入れ方を案内しています（2026-10-22 確認）。README はほかに Cursor・Gemini CLI・GitHub Copilot などへの入れ方も載せていますが、当サイトが表示しているのは Claude Code と Codex の 2 つです。