Skills & My AI Dev Workflow

The Claude Code + Codex setup I actually use every day — a handful of skills and a plan-first, phase-gated loop that stops an AI agent from calling work "done" before it really is.

New here? Jump to Quick Start — one skill (ship-loop) runs the whole thing. You'll want Claude Code installed (Codex is optional but recommended).

⚠️ Run skills at your own risk — skim a skill's SKILL.md before installing. Some can edit files, run commands, browse sites, or extract content.

⭐ Find it useful? Star it — I update this repo constantly.

Quick Start

Use ship-loop when you want Claude Code to run my full development workflow. It's the single entry point — it tells Claude Code to:

1. plan the work
2. pressure-test the plan with grill-with-docs
3. split the work into phases
4. design the system first for UI work
5. implement each phase
6. run the definition-of-done gate before calling a phase complete

Just ask Claude Code something like:

Use the ship-loop skill for this feature. Set up anything missing, plan first, grill the plan, split it into phases, then execute each phase through the completion gate.

On first use, ship-loop checks the tools it needs and tells you what's missing. It can install copyable skills after you approve them. For the Codex plugin, it hands you the /plugin commands to run yourself.

Claude Code + Codex

This workflow uses Claude Code as the main agent and Codex as the review/delegation partner.

🖼️ View the Claude Code + Codex workflow diagram

Install the official Codex plugin for Claude Code:

/plugin marketplace add openai/codex-plugin-cc
/plugin install codex@openai-codex
/reload-plugins
/codex:setup

The plugin lets Claude Code delegate work to Codex or ask Codex for review while still using your local Codex install and auth.

Claude Code also ships useful native skills — /simplify (reviews changed code for cleanups and applies them) and /verify (builds/runs the app to check a change actually works, not just that tests pass). I use those built-in versions rather than keeping copies here. See the commands reference and skills docs.

Frontend Design Workflow

For design and frontend work, ship-loop uses a design-first flow that separates design-system creation from page implementation:

🎨 View the frontend design workflow diagram

1. Collect references — images, screenshots, and UI examples for the look and feel I want.
2. Design the system — generate a design system from them: color tokens, typography, spacing, components, interaction patterns.
3. Refine until it feels right — review and edit the system before building; swap components, tune tokens, adjust spacing, and keep looping until approved.
4. Share with Claude Code — move the approved system into a new or existing project.
5. Build from the system — generate pages from the approved tokens and components, so screens stay consistent with less visual drift.

The payoff: pages aren't improvised one by one — they're built from a shared system first, then verified in the running app.

Install Any Skill

Each skill lives in its own folder with a SKILL.md (frontmatter + instructions). To install any of them — mine or someone else's — give your agent the URL of the SKILL.md, and say whether you want it installed at the project or global level. The agent copies it into the right place.

Skills Created By Me

• ship-loop — my Claude Code shipping loop: plan, grill, phase, implement, verify, simplify, review, smoke, and commit.
• structural-code-review — strict maintainability review for architecture, abstraction quality, boundaries, file growth, duplicated logic, and code that works but makes the system harder to evolve.
• frontend-visual-qa — real-browser frontend QA checklist: desktop/mobile screenshots, overflow checks, state coverage, keyboard paths, real assets, and design-system consistency.
• extract-spa-docs — browser-driven extraction that turns rendered SPA/app docs into agent-readable Markdown under a site-named docs/ folder.

Skills I Use From Other Authors

• grill-with-docs by Matt Pocock — use docs as evidence while pressure-testing an implementation or technical direction.
• opensrc by Vercel — open-source oriented workflow and project tooling from Vercel Labs.
• thermo-nuclear-code-quality-review from Cursor — extremely strict maintainability review for abstraction quality, large files, and spaghetti growth.
• excalidraw-diagram-skill by coleam00 — create Excalidraw diagrams for architecture, workflows, systems, and visual explanations.

Under The Hood

You don't need these to use ship-loop — they're here if you want to see how the gate is wired:

• AGENTS.md — the always-on rule for agents in this repo: don't mark work done until the gate is green.
• PHASE_CHECKLIST.md — a short pointer to the real gate, which lives inside ship-loop.
• ship-loop/reference/phase-checklist.md — the actual gate: verify → simplify → independent review → structure review → runtime smoke → commit.
• ship-loop/reference/setup.md — what first-run setup does, if you want to inspect or run it yourself.

Troubleshooting

• /codex:review doesn't actually call Codex? The skill may have disable-model-invocation: true. Ask Claude Code to edit that skill and set it to false.