Claude Code × Codex 開發代理技能庫
50+ 篇精選的 Claude Code 與 OpenAI Codex 實戰技法，依主題分區整理：從 CLAUDE.md／AGENTS.md 起步設定、subagents 子代理、hooks 自動化、Skills／MCP 客製，到規劃／TDD／除錯／重構工作流與 Codex 專門技巧。原創技法 + 開源策展（Anthropic／OpenAI／GitHub 官方與高星 MIT 來源，皆附出處授權）。
This collection includes text in its original language.
- 01
Editor note起步設定 · CLAUDE.md / AGENTS.md
FreeTUTORIALClaude Code2026-06-08Claude Code CLAUDE.md Generator: Set It Up Once, Not Every Session
Has Claude Code scan your repo and produce a tight, verifiable CLAUDE.md project memory file under 200 lines—covering build/test/lint commands, directory structure, conventions, and prohibitions—while routing anything that doesn't belong there into skills or path-scoped rules instead.
Beginner - 02
Editor note起步設定 · CLAUDE.md / AGENTS.md
FreeTUTORIALOpenAI Codex2026-06-08Codex AGENTS.md Generator: Turn Project Rules into an Instruction File Codex Understands
Have the agent interview you about your project, then produce a structured, no-fluff AGENTS.md that spells out build/test commands, code style, commit conventions, and off-limits areas in one shot — auto-loaded every time work starts.
Beginner - 03
Editor note起步設定 · CLAUDE.md / AGENTS.md
FreeTUTORIALOpenAI CodexOpenAI2026-06-08OpenAI Codex's AGENTS.md: Rules for AI Written by a Real Large Project
A breakdown of the AGENTS.md actually in use in OpenAI's official codex repository — see how a project with millions of lines of code writes team conventions like formatting, testing, commits, module size limits, and API naming into an instruction file that an AI agent can understand and follow, plus a Traditional Chinese adaptation template you can apply directly to your own project.
Intermediate - 04
Editor note起步設定 · CLAUDE.md / AGENTS.md
FreeTUTORIALOpenAI CodexOpenAI (agents.md)2026-06-08The AGENTS.md Starter Template: A Minimal File Any AI Agent Can Understand
The AGENTS.md file from the official agents.md standard project itself, demonstrating what a 'minimal but complete' agent rules file looks like — telling AI to use the dev server instead of building during development, restart after dependency changes, and which commands run lint/test/build — with a directly reusable template.
Beginner - 05
Editor note起步設定 · CLAUDE.md / AGENTS.md
FreeTUTORIALOpenAI CodexIschca2026-06-08AGENTS.md Starter Kit: Minimal and Advanced Templates for Codex and Any Agent
Two AGENTS.md templates drawn from Ischca/awesome-agents-md (CC0): "minimal" is a five-line checklist you can run with right away, and "advanced" covers five sections — environment, testing, conventions, safety, and example tasks. They let an AI coding agent know the rules the moment it enters your project.
Beginner - 06
Editor note起步設定 · CLAUDE.md / AGENTS.md
FreeTUTORIALClaude Code2026-06-08Claude Code Slash Command Designer: One-Click Custom /commands
Turns the checklist or multi-step process you re-paste every time into a custom slash command (.claude/commands/<name>.md, or the newer .claude/skills), with correct frontmatter, $ARGUMENTS parameters, live context pre-injected via `!cmd` (git diff, PR content), and permissions scoped down with allowed-tools.
Intermediate - 07
Editor noteSubagents 子代理
PROTUTORIALClaude Code2026-06-08Claude Code Subagent Fan-Out: Splitting Big Tasks Into Parallel Subagents
Has Claude Code break a large task into several independent, parallel subagents (each with its own context, restricted tools, and an assignable model), planning how to fan the work out, defining each subagent's responsibility boundaries and reporting format, and producing reusable .claude/agents subagent definition files when needed.
Advanced - 08
Editor noteSubagents 子代理
FreeTUTORIALClaude Codewshobson (Seth Hobson)2026-06-08wshobson's Flagship code-reviewer Subagent: A Senior Reviewer Inside Claude Code
Installs the flagship code-reviewer subagent from wshobson/agents (36k stars, MIT license) into Claude Code, giving you an Opus-powered senior reviewer specialized in security, performance, and maintainability that automatically takes over review after every commit.
Intermediate - 09
Editor noteSubagents 子代理
FreeTUTORIALClaude CodeSeth Hobson (wshobson)2026-06-08Claude Code Security Auditor Subagent: OWASP Top 10 Vulnerability Scans
Installs a focused 'security auditor' subagent into Claude Code that reviews code and architecture file-by-file through an OWASP Top 10 lens as you develop features, classifying vulnerabilities by severity with directly-applicable remediation suggestions.
Intermediate - 10
Editor noteSubagents 子代理
PROTUTORIALClaude CodeSeth Hobson (wshobson)2026-06-08Claude Code Backend Architect Subagent: Contract-First API Design
Installs a senior 'backend architect' subagent into Claude Code that uses contract-first design and domain-driven design to draw service boundaries, design REST/GraphQL/gRPC APIs, and build resilience and observability into the architecture from day one.
Advanced - 11
Editor noteSubagents 子代理
FreeTUTORIALClaude CodeSeth Hobson (wshobson)2026-06-08Claude Code Performance Engineer Subagent: Bottlenecks to Optimizations
Installs a dedicated 'performance engineer' subagent into Claude Code that profiles code you've just written, finds bottlenecks like N+1 queries, memory leaks, and slow APIs, classifies them by impact, and provides before/after optimization recommendations with benchmark estimates.
Intermediate - 12
Editor noteSubagents 子代理
FreeTUTORIALClaude CodeVoltAgent2026-06-08VoltAgent Subagent Directory: Choosing and Installing Claude Code Subagents
Uses VoltAgent/awesome-claude-code-subagents (154+ subagents, 10 categories, MIT license) as a curated directory for picking the right subagent and installing it into Claude Code's .claude/agents/ using the standard YAML format.
Beginner - 13
Editor noteSubagents 子代理
FreeTUTORIALOpenAI CodexVoltAgent2026-06-08VoltAgent Codex Subagent Directory: Installing Specialist Agents via TOML in ~/.codex/agents
Uses VoltAgent/awesome-codex-subagents (166+ subagents, 13 categories, MIT license) as a Codex-equivalent curated directory, teaching you to define subagents in .toml format under ~/.codex/agents/ and invoke Codex subagents explicitly.
Intermediate - 14
Editor noteHooks 自動化
PROTUTORIALClaude Code2026-06-08Claude Code Hooks Builder: Auto Format/Lint/Tests After Every Edit
Uses hooks in .claude/settings.json to automatically run formatting, linting, type-checking, or tests at specific Claude Code lifecycle events (PostToolUse after an edit, PreToolUse before running a command, Stop when wrapping up)—producing correct JSON config plus an executable hook script, with exit code 2 hard-blocking dangerous actions.
Advanced - 15
Editor noteHooks 自動化
FreeTUTORIALClaude CodeRohit Ghumare2026-06-08Claude Code Hook Recipe: Auto Format + Lint After Every Edit (PostToolUse)
A PostToolUse hook that makes Claude Code automatically run a formatter (Prettier/Black/gofmt) plus a linter every time it edits or writes a file—permanently removing 'inconsistent formatting' as a code review chore.
Intermediate - 16
Editor noteHooks 自動化
FreeTUTORIALClaude CodeKaran Bansal2026-06-08Claude Code Hook Recipe: Block Dangerous Bash with PreToolUse
A PreToolUse Bash hook that intercepts destructive commands like rm -rf, fork bombs, and curl|sh before the AI executes them—a last line of defense that holds even against --dangerously-skip-permissions.
Intermediate - 17
Editor noteHooks 自動化
FreeTUTORIALClaude CodeRohit Ghumare2026-06-08Claude Code Hook Recipe: Desktop Notification + Sound on Stop
A Stop hook that fires a desktop notification and plays a sound the moment Claude Code finishes running. You can freely switch to other windows—the AI will call you back when it's done, no need to keep staring at the terminal.
Beginner - 18
Editor noteSkills · MCP · 客製
FreeTUTORIALClaude Code2026-06-08Claude Code Skill Factory: Turn Repetitive Workflows Into SKILL.md
Has Claude Code interview you about a repetitive manual process, then produce a fully-structured Agent Skill (SKILL.md) covering name/description/trigger conditions/step-by-step instructions/acceptance criteria/supporting references, and verify it can be triggered automatically as well as invoked via a /slash command.
Intermediate - 19
Editor noteSkills · MCP · 客製
FreeTUTORIALClaude CodeAnthropic2026-06-08Build Your Own Agent Skill Interactively with Anthropic's skill-creator
Anthropic's official skill-creator: a meta-skill that "asks you clarifying questions, produces a SKILL.md, runs evals, refines the trigger description, and packages everything into a .skill file." It teaches you to build reusable Claude skills using a standardized directory structure and progressive disclosure.
Intermediate - 20
Editor noteSkills · MCP · 客製
FreeTUTORIALClaude Code2026-06-08Claude Code + MCP: Connect External Tools to Your Dev Agent Safely
Has Claude Code help you connect an MCP server (a database, Notion, GitHub, your own API...), choosing the right transport and scope, using .mcp.json or claude mcp add, handling secrets and OAuth securely, and finally demonstrating how mcp__server__tool tools and @resource pull external data into your workflow.
Intermediate - 21
Editor noteSkills · MCP · 客製
PROTUTORIALClaude CodeAnthropic2026-06-08Build an MCP Server LLMs Can Actually Use, with Anthropic's mcp-builder
Anthropic's official mcp-builder: a four-phase workflow (research & planning → implementation → review & testing → writing evals) for wrapping your API or service into a high-quality MCP server. Covers both Python (FastMCP) and TypeScript (MCP SDK), with emphasis on tool naming, input/output schemas, error messages that point toward a fix, and evaluating with real-world tasks.
Advanced - 22
Editor noteSkills · MCP · 客製
FreeTUTORIALClaude CodeAnthropic2026-06-08Anthropic's algorithmic-art Skill: Reproducible p5.js Generative Art
Anthropic's official algorithmic-art skill: write an 'algorithmic philosophy' first, then turn it into an interactive HTML piece with p5.js. The core is Art Blocks-style seeded randomness (same seed = same image), paired with tunable parameters and seed navigation, letting you systematically explore generative art techniques like flow fields and particle systems instead of randomly flailing.
Intermediate - 23
Editor noteSkills · MCP · 客製
FreeTUTORIALClaude CodeChong-U Lim (chongdashu / AIOriented)2026-06-08Claude Code Custom Statusline Generator (cc-statusline Pattern)
A single npx command generates an information-rich terminal statusline for Claude Code, showing the current directory, Git branch, model, a context-usage progress bar, real-time spend burn rate, and a countdown to usage reset—hooked into live ccusage stats.
Intermediate - 24
Editor noteSkills · MCP · 客製
PROTUTORIALClaude CodeGitHawkAI (Claude Code Output Style Migrator Contributors)2026-06-08Claude Code Output Style Recovery: SessionStart Hook + Marketplace
After Claude Code removed its built-in output style feature, this uses a SessionStart hook to automatically inject a custom response style (tone / format / rules) into every session, with a local marketplace for managing, activating, and applying multiple styles.
Advanced - 25
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
FreeTUTORIALClaude Code2026-06-08Claude Code Plan-First: Force a Reviewable Plan Before Touching Any Code
Applies the spirit of Plan Mode so Claude Code hands over a structured plan (files affected, steps, risks, acceptance criteria) before touching any file—you review, correct, and approve it before execution begins. Prevents the AI from charging ahead and writing a pile of things you didn't want.
Beginner - 26
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
FreeTUTORIALClaude Code2026-06-08Claude Code TDD Loop: Red, Green, Refactor Done Right
Forces Claude Code through a strict red→green→refactor cycle: for every behavior, first write a test that fails (red) and actually run it to prove the failure, then write the minimal implementation that just makes it pass (green), and finally refactor under the safety of the passing tests. Cures the AI's old habit of jumping straight to the happy path, skipping edge cases, and faking test coverage.
Intermediate - 27
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
FreeTUTORIALClaude Code2026-06-08Claude Code Bug-Fix Loop: Reproduce, Isolate, Fix, Verify
Corrects Claude Code's tendency to 'see an error and start randomly editing' into a disciplined 4-step debugging process: reliably reproduce the bug first, isolate the true root cause (not just the symptom) through minimization, write a regression test that fails, apply the smallest possible fix, then run the full test suite to prove it's fixed without breaking anything else.
Intermediate - 28
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
PROTUTORIALClaude Code / Codex2026-06-08Safe Multi-File Refactoring: Map Blast Radius, Then Batch and Verify
A large-refactor playbook for agents: first do a read-only survey of the 'blast radius' — which files, call sites, and tests are affected — then split the change into small batches, each preserving behavior, each run through its own tests, each its own atomic commit. Puts an end to 'change 40 files at once, then the build breaks and no one knows where to start fixing it.'
Advanced - 29
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
FreeTUTORIALClaude Code / Codex2026-06-08AI Agent Definition-of-Done Self-Check Spec
A Definition of Done template you can paste into any coding agent, turning 'what counts as done' into a checklist the agent must self-verify item by item: behavior meets acceptance criteria, tests/lint/typecheck/build all pass (or it states why they didn't run), risky changes come with a rollback plan, and a final 'verification story' is delivered. Puts an end to agents claiming 'done' while everything is actually broken.
Intermediate - 30
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
FreeTUTORIALClaude CodeGitHub, Inc. (github/spec-kit)2026-06-08GitHub Spec Kit: The Four-Stage Spec-Driven Development Workflow (/specify → /plan → /tasks → /implement)
GitHub's official open-source tool for Spec-Driven Development. Using /speckit.specify → /plan → /tasks → /implement, it turns a vague requirement into an executable specification end to end, then has the AI generate code from that spec — fixing the unpredictability of 'vibe coding.'
Intermediate - 31
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
FreeTUTORIALClaude Code / Codexsnarktank (ai-dev-tasks)2026-06-08ai-dev-tasks: PRD to Task List to One-Subtask-at-a-Time AI Workflow
Uses two Markdown templates (create-prd.md and generate-tasks.md) to turn 'dumping a pile of requirements on AI' into a controlled process: first generate a PRD, break it into a checkable task list, then complete one subtask at a time — pausing after each for your go-ahead before continuing.
Beginner - 32
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
PROTUTORIALClaude CodeJesse Vincent (obra)2026-06-08Superpowers: Brainstorm, Plan, and True TDD for Claude Code
Brings obra/superpowers' "spec-first + true red-green TDD" development discipline into your agent: brainstorm to clarify requirements first, break the work into verifiable 2-5 minute tasks, then strictly follow RED-GREEN-REFACTOR, with a two-stage subagent review.
Advanced - 33
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
FreeTUTORIALClaude CodeBrian Casel (Builder Methods / CasJam Media LLC)2026-06-08Agent OS: Extract Codebase Standards and Auto-Inject into AI Agents
Borrowing the three-layer architecture from buildermethods/agent-os (Standards / Product / Specs): have AI first scan your codebase to extract existing conventions into documented standards, then auto-inject them every time it writes code — so you never have to re-explain the rules.
Intermediate - 34
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
FreeTUTORIALClaude CodeSuperClaude-Org2026-06-08SuperClaude Framework: /sc: Commands and Cognitive Personas for Claude Code
Distills the open-source SuperClaude framework's /sc: command system and cognitive-persona mechanism into a ready-to-use workflow prompt, upgrading Claude Code from "one question, one answer" into a structured development process covering everything from brainstorming to implementation, testing, documentation, and version control.
Intermediate - 35
Editor note開發工作流 · 規劃 / TDD / 除錯 / 重構
PROTUTORIALClaude CodePatrick Ellis (OneRedOak)2026-06-08Automated Design Review: UI/UX/Accessibility Audits via Playwright MCP
A curated, ready-to-use version of OneRedOak's design-review workflow: using Playwright MCP in a real browser environment, it automatically audits frontend changes across 7 stages (interaction, responsiveness, visuals, accessibility, robustness, code health) and reports findings graded Blocker/High/Medium/Nitpick.
Advanced - 36
Editor noteCodex 專門技巧
FreeTUTORIALOpenAI Codex2026-06-08Codex's Four-Gate Kickoff: Define the Task → Review the Plan → Check the Diff → Nothing Counts as Done Without Verification
Turns a vague requirement into a full Codex workflow: first force it to nail down a 'definition of done,' use plan mode to produce a plan for your approval, then implement in small steps, run its own tests, and finally produce a reviewable diff with verification evidence.
Intermediate - 37
Editor noteCodex 專門技巧
FreeTUTORIALOpenAI Codex2026-06-08Codex Wrap-Up Officer: Turn Finished Changes into a Semantic Commit + a PR That Passes Review
Once your code changes are done, have Codex read the staged diff, produce a Conventional Commits message, and write a PR description covering background, what changed, why, how it was verified, and risks — without bundling in unrelated changes, exaggerating, or fabricating tests.
Intermediate - 38
Editor noteCodex 專門技巧
FreeTUTORIALClaude Code / Codex2026-06-08Codex Rigorous Diff Reviewer: Correctness, Simplification, and Security in Three Tracks
Has Codex do a disciplined code review of your git diff across three tracks (correctness bugs / simplification-and-reuse / security), listing each finding with a confidence level and a pastable fix, and explicitly instructed to say so when nothing's wrong instead of manufacturing complaints.
Intermediate - 39
Editor noteCodex 專門技巧
FreeTUTORIALClaude Code / Codex2026-06-08Codex Bug-Fix Closed Loop: Reproduce First, Fix Second, With Rerunnable Verification
Forces Codex through a closed loop — write a failing test that reproduces the bug, find the root cause, make the minimal fix, watch that same test go from red to green, then run the full test suite to confirm no regressions — eliminating both 'fixed it without verifying' and 'changed a bunch of unrelated stuff along the way.'
Intermediate - 40
Editor noteCodex 專門技巧
FreeTUTORIALClaude Code / Codex2026-06-08Codex Characterization Tests for Legacy Code: Lock In Current Behavior, Target Edge Cases, Zero Behavior Changes
Has Codex write characterization tests for untested legacy code: it first reads and documents what the code 'actually does right now' (bugs included), systematically covers the happy path plus edge cases and error paths, and is strictly forbidden from modifying the code under test.
Intermediate - 41
Editor noteCodex 專門技巧
PROTUTORIALOpenAI CodexOpenAI Cookbook2026-06-08Codex Iterative Repair Loop: Review → Repair → Validate Until Broken Code or Docs Pass
An OpenAI Cookbook Codex example that turns 'fixing bugs or outdated examples' into a self-iterating closed loop: first review and list the problems, then make a targeted fix on a copy, then run validation and score it, and if it doesn't pass, feed the remaining issues back in for another round — until everything's green or a cap is hit. Includes three ready-to-use prompt templates.
Advanced - 42
Editor noteCodex 專門技巧
PROTUTORIALOpenAI Codexshanraisshan2026-06-08Advanced Codex CLI Playbook: Layered AGENTS.md + config.toml + Research-to-Ship Workflow
Upgrades OpenAI Codex CLI from 'vibe coding' into a controllable engineering agent: layered AGENTS.md, approval and sandbox settings in .codex/config.toml, and Starlark command gating, paired with a five-stage Research → Plan → Execute → Review → Ship workflow.
Advanced - 43
Editor noteCodex 專門技巧
FreeTUTORIALOpenAI CodexRoggeOhta2026-06-08Codex config.toml in Practice: Approval Modes × Sandbox Isolation × Profiles
A ready-to-paste ~/.codex/config.toml template that sets up OpenAI Codex CLI's approval policy, sandbox isolation, reasoning effort, and multiple profiles in one go — balancing automation efficiency with safety boundaries.
Intermediate - 44
Editor noteCodex 專門技巧
PROTUTORIALOpenAI Codexgotalab2026-06-08Codex Skills Mode: Installing Skill Packs and an Autonomous Implementation Loop (cc-sdd)
Uses cc-sdd's --codex-skills install to load reusable skills (SKILL.md) into Codex CLI on demand, and replicates its /kiro-impl autonomous execution loop — a fresh implementer per task, an independent reviewer, and automatic root-cause debugging on failure — so Codex advances steadily through a task list one task at a time.
Advanced - 45
Editor noteCodex 專門技巧
PROTUTORIALOpenAI CodexRoggeOhta2026-06-08Codex exec Non-Interactive Mode: Wiring Codex Into a CI Automation Pipeline
Uses codex exec's non-interactive execution plus a restricted sandbox to plug Codex CLI into CI / scripted workflows for unattended tasks like lint fixes, batch refactors, and auto-repair, guarding the safety boundary with approval_policy=never paired with a workspace-write sandbox.
Advanced - 46
Editor note規則 · 遷移 · 技術棧範本
FreeTUTORIALClaude Code / Codex2026-06-08Migrating from Cursor to Claude Code / Codex: An Inventory-and-Kickoff Prompt
Has the agent automatically inventory your Cursor project (.cursorrules, .cursor/rules, .cursor/mcp.json), produce a step-by-step migration plan, and generate the corresponding CLAUDE.md or AGENTS.md, slash commands, and MCP config — so you're not stuck 'dumber than Cursor' on day one.
Intermediate - 47
Editor note規則 · 遷移 · 技術棧範本
FreeTUTORIALClaude Codeciembor (agent-rules-books)2026-06-08agent-rules-books: Classic Software Books Distilled into AGENTS.md Rules
Distills 14 classic software engineering books (Clean Code, Refactoring, Domain-Driven Design, The Pragmatic Programmer, Working Effectively with Legacy Code, and more) into imperative rule sets you can paste directly into AGENTS.md / CLAUDE.md / Cursor rules, offered in full / mini / nano sizes so you can pick based on your context budget.
Intermediate - 48
Editor note規則 · 遷移 · 技術棧範本
FreeTUTORIALClaude CodePeter Steinberger (steipete)2026-06-08Agent-Rules Pack: Conventional Commits + 6-Persona PR Review + 5 Whys Root-Cause Analysis
Curates three core project-rules from steipete/agent-rules into a single rule pack usable directly as a slash command: semantic commits (12 types plus emoji, with automatic splitting into atomic commits), a 6-persona professional PR review, and 5 Whys root-cause analysis.
Intermediate - 49
Editor note規則 · 遷移 · 技術棧範本
FreeTUTORIALClaude CodePatrickJS2026-06-08Writing Tech-Stack Rules into AGENTS.md / CLAUDE.md (Adapted from awesome-cursorrules)
Borrows the approach from the 40k-star awesome-cursorrules repo to codify 'how to write for a given tech stack' into a project rule file, so Cursor / Claude Code / Codex always produce code in your conventions instead of generic boilerplate.
Beginner - 50
Editor note規則 · 遷移 · 技術棧範本
FreeTUTORIALClaude CodePatrickJS2026-06-08An AGENTS.md / CLAUDE.md Rule Template for Next.js App Router Projects
Rewrites awesome-cursorrules' Next.js App Router standard into an AGENTS.md/CLAUDE.md you can drop straight into your project root, so Claude Code, Codex, and Cursor automatically follow Server-Components-first, file-based routing, TypeScript, and performance conventions when writing Next.js.
Beginner - 51
Editor note規則 · 遷移 · 技術棧範本
PROTUTORIALClaude CodePatrickJS2026-06-08A Production-Grade Layered-Architecture AGENTS.md / CLAUDE.md Template for FastAPI
Rewrites awesome-cursorrules' FastAPI production architecture standard into an AGENTS.md/CLAUDE.md that enforces Router→Service→Repository layering, thin handlers, an anti-corruption layer, and idempotency — so AI automatically rejects anti-patterns when writing Python backends.
Advanced - 52
Editor note規則 · 遷移 · 技術棧範本
FreeTUTORIALClaude CodePatrickJS2026-06-08A Scalability-Focused AGENTS.md / CLAUDE.md Template for Go Backends
Rewrites awesome-cursorrules' Go backend scalability standard into an AGENTS.md/CLAUDE.md covering idiomatic error handling, context propagation, interface abstraction, concurrency, and observability — so AI follows standard conventions and trade-off analysis when writing Go services.
Intermediate