Addy Osmani’s Agent Skills: Making Claude Code a Disciplined AI Coding Partner
This guide walks developers through the open‑source addyosmani/agent‑skills repository, explains its seven essential slash commands, shows how to install them via plugin or manual copy, demonstrates a complete AI‑assisted development loop, and compares the workflow with ECC agents.
Introduction
Who benefits? Developers who use Claude Code for writing requirements, modifying code, or pairing with AI, as well as newcomers.
Scope Only the seven slash commands and the required skill directories are covered; additional tools like browser MCP or CI pipelines can be added later.
Installation overview Two options: (1) plugin installation using /plugin install (which also installs the commands), or (2) manually copying the skills/ directory (the commands live in .claude/commands/ and will not appear in /help without the plugin).
What the repository provides
addyosmani/agent-skills is an open‑source skill pack that compresses the full development workflow – requirement → specification → task breakdown → incremental implementation → testing → review → shipping – into seven slash commands plus a set of Markdown SKILL.md files.
When installed, the model is forced to consider boundaries before generating code, reducing mindless code generation.
Core 7 Slash Commands (must master)
These commands cover the entire development lifecycle, forming a muscle memory for daily Claude Code usage.
Relation between commands and skills Each /xxx command reads the corresponding skills/<directory>/SKILL.md . The command files reside in .claude/commands/ . Copying only the Markdown files to ~/.claude/skills makes the skill descriptions available but does not expose the slash shortcuts in /help .
1. /spec – Requirement Specification (most important)
Purpose : Convert vague spoken requirements into a structured, testable specification.
Why it helps : Automates the “stage 0: slice the requirement” step, making the scope, acceptance criteria, and edge cases explicit before any code is written.
Directory : skills/spec-driven-development/ Try it :
/spec Implement a user registration form with mandatory phone number, email login support, and friendly error messagesThe command returns a structured spec containing goals, scope, acceptance criteria, and open issues.
2. /plan – Task Breakdown & Impact Analysis
Purpose : Turn the spec into a list of small tasks and surface dependencies and potential failure points.
Where it fits : Mirrors the usual “stage 1: impact analysis” step – you see the map before changing code.
Directory : skills/planning-and-task-breakdown/ Example :
/plan Based on the previous spec, implement the registration formThe output is a task list with impact notes and suggested breakdowns, giving the developer confidence before invoking the AI.
3. /build – Incremental Implementation
Purpose : Apply the plan piece by piece instead of a massive diff.
Directory : skills/incremental-implementation/ Scenario : Prevents the “AI changes ten files at once, impossible to review” problem and aligns with the “small‑step PR” practice.
Example : /build Task 1: create the form component After each chunk, pause for a human review before proceeding.
4. /test – Test‑Driven Development & Verification
Purpose : Push the model to think about tests before implementation, binding verification into the workflow.
Directory : skills/test-driven-development/ Useful for core logic or behavior‑changing bugs; saves effort compared to “write code then add tests”.
5. /review – Code Review
Purpose : Run a pre‑merge check using the “senior colleague” standard.
Directory : skills/code-review-and-quality/ If you already use ECC’s Reviewer Agent, the semantics are similar, but this skill focuses on engineering conventions.
Example :
/review Show changes in the current branch6. /code-simplify – Code Simplification
Purpose : Transform runnable code into a form that remains readable months later, curbing over‑clever AI output.
Directory :
skills/code-simplification/7. /ship – Release Checklist
Purpose : Run a pre‑launch checklist (docs, version, rollback plan, etc.) to avoid hidden fire‑fighting costs.
Directory :
skills/shipping-and-launch/Command‑Skill Mapping (minimal daily set)
/spec– spec-driven-development – "Specification first" – required for almost every new feature. /plan – planning-and-task-breakdown – task breakdown & impact – used together with /spec. /build – incremental-implementation – write in small chunks – needed when a change touches many files. /test – test-driven-development – test‑driven – for core logic or behavior changes. /review – code-review-and-quality – pre‑merge screening – run before every merge. /code-simplify – code-simplification – readability cleanup – during refactor or finalization. /ship – shipping-and-launch – launch checklist – executed on the actual release day.
Full Installation Workflow (recommended for Claude Code users)
Path A: Plugin Installation (recommended)
# 1. Add marketplace (use HTTPS if SSH is unavailable)
/plugin marketplace add https://github.com/addyosmani/agent-skills.git
# 2. Install the plugin
/plugin install agent-skills@addy-agent-skillsAfter a restart, the seven commands appear in the panel; this is the most hassle‑free route because you do not need to remember which directory to copy.
Path B: Manual Skill Copy (no plugin)
Suitable for users who refuse plugins or have unstable plugin sources; only the skill context is needed, not the slash buttons.
git clone https://github.com/addyosmani/agent-skills.git --depth 1
mkdir -p ~/.claude/skills
cp -r agent-skills/skills/{spec-driven-development,planning-and-task-breakdown,incremental-implementation,test-driven-development,code-review-and-quality} ~/.claude/skills/With this path, /help will not list the slash shortcuts; you must invoke the skills via natural language or switch to Path A for button‑style execution.
Verify Installation
Restart Claude Code.
Run /help. If Path A was used, you should see /spec, /plan, /build, /test, /review, /code-simplify, and /ship.
Co‑existence with Existing Tools
If ECC or Superpowers already provide a /review command, keep the one you prefer and disable the duplicate.
Skill directories can coexist; resolve conflicts by disabling commands with identical names.
Daily AI‑Coding Loop (default after installation)
Requirement → /spec (pin the spec).
Plan → /plan (break tasks, assess impact).
Implement → /build (incremental slices).
Validate → /test (run tests, optionally lint / build locally).
Review → /review (pre‑merge check).
Finalize → /code-simplify (optional readability cleanup).
Ship → /ship (final checklist).
Choosing Between agent‑skills and Everything Claude Code
Form : agent‑skills offers 7 commands + Markdown skills; Everything Claude Code provides a full suite of agents, skills, and hooks.
Installation effort : agent‑skills is low (plugin or simple copy); Everything Claude Code often requires consulting profiles.
Daily presence : agent‑skills stays lightweight; the full suite can become noisy when many hooks are active.
Best fit : agent‑skills for teams that want a lightweight, standardized workflow without heavy overhead; Everything Claude Code for those needing a comprehensive engineering ecosystem.
Conclusion
The value of addyosmani/agent-skills lies not in the number of commands but in forcing the model to follow the engineer’s rhythm: /spec → /plan → /build → /test → /review → /ship. This chain encodes “think first, move in small steps, review before merging, and checklist before launch”, turning Claude Code from a free‑wheeling code generator into a disciplined pair‑programming partner.
Quick Start
Install the plugin :
/plugin marketplace add https://github.com/addyosmani/agent-skills.gitthen /plugin install agent-skills@addy-agent-skills and restart.
Run a small real‑world task : Execute the full loop /spec → /plan → /build → /test → /review on a modest feature; you’ll see the reduction in rework.
Align with ECC : If you already use ECC, compare overlapping commands (e.g., /review) and keep the preferred set.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Frontend AI Walk
Looking for a one‑stop platform that deeply merges frontend development with AI? This community focuses on intelligent frontend tech, offering cutting‑edge insights, practical implementation experience, toolchain innovations, and rich content to help developers quickly break through in the AI‑driven frontend era.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.
