05 12月 2025

Codex CLI が Skills をサポート

Codex CLI の最新版v0.65.0 において、experimental ではありますが Skills のサポートが導入されました[1]。

[1]: https://github.com/openai/codex/pull/7412

Claude Skills と同じ形式のディレクトリを配置するだけで読み込まれるため、導入の手間はほとんどありません。設定としては、config.toml に次の一行を追加します。

[features]
skills = true

スキルパッケージは ~/.codex/skills 以下に配置します。YAML と SKILL.md を組み合わせた構造は Claude Skills と共通で、そのまま互換的に扱えます。

Skills 実装の特徴

Claude Skillsについておさらいすると、関数単位で登録する MCP とは異なり、ディレクトリ単位でプロンプトとスクリプトをまとめる方式です。

Claude Skillsとは何なのか？

AnthropicがClaudeの新機能 Claude Skills （Agent Skills）を追加したと発表しました。Claude Skillsは、Markdownファイルとスクリプトで構成される「スキルフォルダ」を通じて、モデルに特定の機能や知識を拡張できる仕組みです。 Claude Skills: Customize AI for your workflowsBuild custom Skills to teach Claude specialized tasks. Create once, use everywhere—from spreadsheets to coding. Available across Claude.ai, API, and Code.Box logo もともとClaudeは8月にチャットアシスタントからのコード実行環境をアップデートしていました。それまでは指示に応じてPythonコードを実行しグラフ生成やデータ分析をするちょとした用途でしたが、この時にBashコマンドをサンドボックス以下で自由に実行できる環境が構築されています。 Claude

laisolaiso

Codex が採用した仕組みも同様に、初期ロード時には description などのメタデータのみを読み込み、必要になった段階で SKILL.md の本文を展開します。Anthropic が "Progressive Disclosure" と呼んでいたものと同じ考え方です。

実例：LPのデザインをスキルで改善

Anthropicが公式ブログで紹介していた frontend-design スキルを利用して「Gemini 3 Proはデザインに強いのか？」で生成したLP の改善を依頼してみました。

このスキルはAIがウェブデザインをするときの最大公約数的なコードをSkillsの読み込みの仕組みを使ってネガティブプロンプトで頻繁に矯正することで補正するというなんともダイナミックな仕組みです（つまり別のデザインに誘導したかったらプロンプトを調整します）。

❯ git clone https://github.com/anthropics/skills
❯ mkdir ~/.codex/skills/
❯ cp -a skills/skills/frontend-design ~/.codex/skills/

起動してみましょう。/skiils もしくは$ で一覧されます。

❯ codex

> あなたにはどんなスキルがありますか？

• 利用可能なスキルがあります。現在読み込めるのは以下です:

  - frontend-design: Web UI/React/HTML/CSSなどのフロントエンドをデザイン・実装するときに使うスキル (パス: ~/.codex/skills/frontend-design/SKILL.md)

  必要であればこのスキルを参照して進めます。

› $

  frontend-design (frontend-design)  Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include
                                     websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

> $frontend-design を活用しpages/gpt-5.1-codex/index.tsxの品質を上げてください。

• - pages/gpt-5.1-codex/index.tsx: frontend-designスキルに沿って深緑×アナログ計器風の美学に刷新。Epilogue+JetBrains Monoを読み込み、ラジアルグラデとグリッド背景で奥行きを追加し、ヒーローコピーとCTA・ステータス指標を再設計。
  - 同カード群をシナリオ・リスク・エスカレーションの3レイヤーで構成し、ステージ進行バーや信号色で即応性を示すインタラクティブなビジュアルを追加。
  - ユースケース一覧を4枚のハイライトカードに再構成し、Flow Mapと即応シナリオ欄で工程同期とプレイブックの見通しを強化。

以下がその結果です。素人目ながらAfter版の方が印象が良いです（しかしコンテンツ内容まで変わっている！？）。

Before:

After:

改善内容をBefore/Afterを伏せてGeminiに説明してもらったところ、以下のフィードバックが返ってきました。Geminiの評価も改善後の方が良かったです。

1. Typography（書体構成）

Before: 平凡なSans-Serif（ゴシック体）単体での構成。
After: 見出しのSans-Serifと、データのMonospace（等幅フォント）の混植による情報構造化。

2. Visuals（視覚要素）

Before: 抽象的なClaymorphism（粘土風3Dイラスト）の使用。
After: スイッチやステータスバーなど、具体的機能を備えたHigh-FidelityなUIモックアップ。

3. Layout（レイアウト）

Before: 情報密度が低く、視線移動の多いジグザグレイアウト。
After: 境界線で規律を作り、情報を凝縮したBento Grid（弁当箱型グリッド）。

4. Effects（演出効果）

Before: 既視感のあるDrop Shadow（影）による浮遊感。
After: Dark Modeをベースに、Glow / Bloom（発光表現）を用いたアクティブ状態の強調。

おわりに

Gemini CLIにもSkills対応のリクエストがありますのでそのうち対応されるかもしれませんね。

Skills 実装の特徴

実例：LPのデザインをスキルで改善

おわりに

Subscribe to laiso