What is the /implement skill?

It generates implementation code from design documents by delegating to OpenAI Codex, producing a Next.js 14 App Router project layout under src/.

What are Codex requirements?

Codex access requires a ChatGPT Pro subscription; the generation runs in --full-auto mode for hands-off implementation.

What files are generated and where?

Generated files include src/app/{feature}/page.tsx, src/app/api/{feature}/route.ts, components/{feature}/..., lib/{feature}.ts, and types/{feature}.ts, arranged according to the documented structure.

implement

Use Caution

npx machina-cli add skill AI-Driven-School/aiki/implement --openclaw

Files (1)

SKILL.md

3.5 KB

/implement スキル

設計書を読み込み、Codexで実装を自動生成します。

使用方法

/implement
/implement auth
/implement --from=docs/specs/login.md

実行フロー

[1] 設計書の読み込み
    ├─ docs/requirements/*.md
    ├─ docs/specs/*.md
    └─ docs/api/*.yaml

[2] Codexに委譲
    └─ codex exec "..." --full-auto

[3] 実装ファイル生成
    └─ src/**/*

Codex委譲コマンド

codex exec "
以下の設計書を読み込み、Next.js App Routerで実装してください。

【要件定義】
$(cat docs/requirements/{feature}.md)

【画面設計】
$(cat docs/specs/{feature}.md)

【API設計】
$(cat docs/api/{feature}.yaml)

【実装要件】
- Next.js 14 App Router
- TypeScript strict mode
- Tailwind CSS
- 既存のコードスタイルに従う
- コンポーネントは src/components/ に配置
- APIは src/app/api/ に配置
- 型定義は src/types/ に配置
- ユーティリティは src/lib/ に配置

【品質基準】
- ESLint/Prettierエラーなし
- TypeScriptエラーなし
- 受入条件を全て満たす
" --full-auto

生成されるファイル構成

src/
├── app/
│   ├── {feature}/
│   │   └── page.tsx          # ページコンポーネント
│   └── api/
│       └── {feature}/
│           └── route.ts      # APIエンドポイント
├── components/
│   └── {feature}/
│       ├── {Component}.tsx   # UIコンポーネント
│       └── index.ts          # バレルエクスポート
├── lib/
│   └── {feature}.ts          # ユーティリティ
└── types/
    └── {feature}.ts          # 型定義

出力例

> /implement auth

🔧 実装を開始します... (Codex)

設計書を読み込み中...
  ✓ docs/requirements/auth.md
  ✓ docs/specs/auth.md
  ✓ docs/api/auth.yaml

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🚀 Codex (full-auto) で実装中...
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[Codex] src/app/login/page.tsx を作成中...
[Codex] src/app/api/auth/login/route.ts を作成中...
[Codex] src/components/auth/LoginForm.tsx を作成中...
[Codex] src/lib/auth.ts を作成中...
[Codex] src/types/auth.ts を作成中...

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ 実装完了！

生成ファイル:
  → src/app/login/page.tsx
  → src/app/api/auth/login/route.ts
  → src/components/auth/LoginForm.tsx
  → src/components/auth/index.ts
  → src/lib/auth.ts
  → src/types/auth.ts
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

注意事項

Codexの実行には ChatGPT Pro サブスクリプションが必要
--full-auto モードで実行するため、承認なしで自動実行
生成後は /review でコードレビューを推奨

Source

git clone https://github.com/AI-Driven-School/aiki/blob/main/.claude/skills/implement/SKILL.mdView on GitHub

Overview

The implement skill reads design documents and delegates implementation to OpenAI Codex to auto-generate source code. It targets a Next.js 14 App Router structure, producing a complete file layout under src/ including pages, API routes, components, types, and utilities. Note: Codex access requires a ChatGPT Pro subscription.

How This Skill Works

Step 1: Read design docs from docs/requirements, docs/specs, and docs/api. Step 2: Delegate to Codex using a full-auto command to generate implementation. Step 3: Output the resulting code into the src/ directory, following the established project structure such as app/, api/, components/, lib/, and types/.

When to Use It

You have up-to-date specs and want to auto-generate source code without manual coding.
You want to rapidly implement a feature by running /implement with design docs.
You’re building a Next.js 14 App Router feature and need a consistent file layout (pages, API routes, components, types, utilities).
You need to adhere to a strict code style (ESLint/Prettier and TypeScript strict mode) generated by Codex.
You want a quick way to generate and review a complete feature scaffold before manual refinement (/review).

Quick Start

Step 1: Run /implement or /implement --from=docs/specs/{feature}.md to start generation.
Step 2: Execute the Codex command (codex exec "..." --full-auto) as prompted by the tool.
Step 3: Review the generated files under src/ (app/, api/, components/, lib/, types/) and iterate with /review if needed.

Best Practices

Prepare clean, up-to-date docs in docs/requirements, docs/specs, and docs/api before running /implement.
Ensure you have a active ChatGPT Pro subscription to access Codex.
Run Codex in full-auto mode (--full-auto) to generate the complete implementation without manual prompts.
Immediately review the generated files against acceptance criteria and project conventions in /review.
Keep the target structure under src/ (app/, api/, components/, lib/, types/) to match the output expectations.

Example Use Cases

Implement auth by reading docs/requirements/auth.md, docs/specs/auth.md, and docs/api/auth.yaml to generate src/app/login/page.tsx, src/app/api/auth/login/route.ts, and related UI/components.
Create a new API endpoint for products by processing feature docs to produce src/app/api/products/route.ts and corresponding UI under src/components/products.
Generate a reusable LoginForm component under src/components/auth/LoginForm.tsx with a barrel export in src/components/auth/index.ts.
Add a utility module under src/lib/auth.ts to encapsulate authentication helpers.
Define TypeScript types for an auth feature under src/types/auth.ts to ensure strict type usage across app code.

Frequently Asked Questions

Add this skill to your agents