Codex ネイティブ
成功
👍 0 · 投票する
frontend-ui-engineering
Addy Osmani によるエンジニアリング品質のフロントエンド skill です。アクセシブルでレスポンシブな UI、読み込み中・空・エラーの各状態、セマンティックなトークン、そして避けるべき「AI っぽい」既定値の一覧表を扱います。指示のみで、スクリプトはありません。
- パス
skills/frontend-ui-engineering· SKILL.md- 固定したコミット
aeac41d4d0- ライセンス
- MIT
各プロンプトを、Codex ネイティブ、Codex + skill、Claude Code ネイティブ、Claude Code + skill の固定 2×2 で表示します。スクリーンショットをクリックするとページ全体を表示できます。インストールと使い方 ↓
得意なこと
skill 自身のドキュメントが主張している強みを、出典とともに挙げています。これは主張であって結果ではありません。下の実際のページと見比べてください。
- 本番品質でアクセシブルかつレスポンシブなユーザー向け UI を作る 出典
- AI が生成したものではなく、一流企業のデザインのわかるエンジニアが作ったように見える UI 出典
- キーボード操作とフォーカス管理を含む WCAG 2.1 AA のアクセシビリティ 出典
- 意味のある空状態、エラー状態、読み込み中の状態 出典
- 「AI っぽさ」（紫のグラデーション、何でも角丸、ありきたりなヒーロー、重い影）を避ける 出典
テスト範囲：SaaS のランディングページ、データダッシュボード、個人ブログとポートフォリオ、フォームとフィードバックのコンポーネント状態。範囲外のプロンプトは「未実行」ではなく「対象外」と表示します。
第 2 弾の実行前に、skill の原文に基づいて決めました。form-states は、そのアクセシビリティと状態の扱いを示すために追加しました。
SaaS のランディングページ
landing-saas
データダッシュボード
dashboard
個人ブログとポートフォリオ
blog-portfolio
フォームとフィードバックのコンポーネント状態 ショーケース
form-states
インストールと使い方
プロジェクト単位のインストール：固定したコミットの skill フォルダ（SKILL.md を含むフォルダ）をプロジェクトにコピーします。ギャラリーの実行でも同じ方法でインストールしました。
Claude Code
インストール
フォルダを <project>/.claude/skills/frontend-ui-engineering/ にコピーします。
git clone https://github.com/addyosmani/agent-skills.git /tmp/frontend-ui-engineering-src
git -C /tmp/frontend-ui-engineering-src checkout aeac41d4d005999432bb7312f7ff06383a91d59d
mkdir -p .claude/skills
cp -R /tmp/frontend-ui-engineering-src/skills/frontend-ui-engineering .claude/skills/frontend-ui-engineering使い方
# 対話モード
/frontend-ui-engineering <タスク>
# または、任意のリクエストの末尾に次の 1 文を付ける
Use the frontend-ui-engineering skill.
# ヘッドレス（ギャラリーの実行と同じ）
claude -p '<タスク> Use the frontend-ui-engineering skill.'すべてのプロジェクトで使えるようにするには、代わりにフォルダを ~/.claude/skills/frontend-ui-engineering/ に置いてください。Claude Code は、リクエストが skill の説明に一致すると、skill を自動的に読み込むこともあります。
Codex
インストール
フォルダを <project>/.agents/skills/frontend-ui-engineering/ にコピーします。
git clone https://github.com/addyosmani/agent-skills.git /tmp/frontend-ui-engineering-src
git -C /tmp/frontend-ui-engineering-src checkout aeac41d4d005999432bb7312f7ff06383a91d59d
mkdir -p .agents/skills
cp -R /tmp/frontend-ui-engineering-src/skills/frontend-ui-engineering .agents/skills/frontend-ui-engineering使い方
# 対話モード：メンションするか、/skills から選ぶ
$frontend-ui-engineering <タスク>
# ヘッドレス（ギャラリーの実行と同じ）
codex exec -s workspace-write '<タスク> Use the $frontend-ui-engineering skill.'すべてのプロジェクトで使えるようにするには、代わりにフォルダを ~/.agents/skills/frontend-ui-engineering/ に置いてください。Codex も、skill の説明に基づいて skill を自動的に選ぶことがあります。
補足
- The "See Also" link (../../references/accessibility-checklist.md) points outside the skill folder and is not copied.
- Part of a 25-skill repo; install only this folder, not the plugin.
- Its main strengths (accessibility, loading/empty/error states) are not visible in screenshots of the three standard prompts; see the form-states showcase prompt and each cell's a11y scan.
メタデータ：skills/frontend-ui-engineering/meta.yaml · Copyright (c) 2025 Addy Osmani