JS Mastery
Workflow guide

Every skill, the files that carry the work, and one idea followed all the way to shipped.

A set of skills that take a change from a rough idea to shipped, tested and documented code, one skill per stage. The important state lives in files in your repository, not in a chat, so the work survives across sessions and is shared with your whole team.

/scope/audit/architect/develop/check/test/document/sync/debug

The nine skills

There are nine. You run only the ones a change needs, in whatever order fits.

scope
Turns an idea into a high-level plan of what to build and in what order.On a new project, run it first. On an existing one, it takes stock of what is there, then plans the new work. In a monorepo, one scope per workspace.
audit
Writes the context files that tell every other skill how your project works.On an existing codebase, run it first. On a new one, after the stack is chosen and the project is set up.
architect
Makes a decision the build depends on (a stack, a data model, a page design) and writes it as a spec.A choice the build depends on is still undecided, or develop says one is missing.
develop
Builds a feature, user interface or backend, from its spec.After the decision exists. If something is still undecided, it points you to architect first.
check
Confirms a change before merge, by running the real app and by a second review.verify after develop; review before a PR, with a fresh pair of eyes on a different model.
test
Writes a test suite for the code you just changed.After building a feature or fixing a bug. Works out the framework per package in a monorepo.
document
Writes the human-facing text: a pull request body, a changelog, a release note.A finished change needs writing up.
sync
Brings the context files, the scope and the specs back in line with the code.The last step around merge.
debug
Finds and fixes the root cause of a bug, then hands a test to test.Anytime something is failing, throwing, or behaving wrong.

Skill reference

One entry per skill: what it does, when to run it, what it writes, and what it will not touch. Every entry is self-contained, so you can jump straight to the one you need.

SKILL 01Plan
/scope

Turn an idea into a plan of what to build

The entry point for a product or a new slice of one. It turns what you describe into a high-level plan of what to build and in what order, written to docs/scope/, and it keeps that plan current as features land.

WhenTo start a new product, or to plan the next slice. Run it bare anytime to see where things stand.
Writesdocs/scope/
ReadsAGENTS.md, and the existing scope if there is one
Per projectNew project: run it first. Existing codebase: it takes stock of what is there, then plans the new work. Monorepo: one scope per workspace.
How it works
01Reads the context files and any existing scope, so it never asks what it can already see.
02Breaks the idea into slices, starting with the foundation and the first real feature.
03Asks how you want to deliver the work: tracer bullet, MVP, UI-first prototype, or vertical slice. Your pick becomes the project default and shapes the build order later.
04Asks for a workflow depth (Prototype, Alpha, Beta or GA), which sets the suggested checks after each build.
Hands off toarchitect, to decide the stack or design the first feature.
Will notDesign anything. It fixes what to build, never how.
SKILL 02Plan
/audit

Write the context files every other skill reads

It reads your real code and writes AGENTS.md: the plain-text description of your stack, your commands and your conventions. Every other skill reads it, which is why nothing else has to guess how your project works.

WhenOn an existing codebase, run it first. On a new one, after the stack is chosen and the project is set up.
WritesAGENTS.md, plus a thin CLAUDE.md pointer
ReadsYour source tree, config, package manifests and scripts
Per projectMonorepo: each workspace gets its own nested AGENTS.md, so local rules stay local.
How it works
01Reads the real project rather than a description of it: the stack, the package scripts, the folder conventions already in use.
02Writes a root AGENTS.md for rules that apply everywhere.
03Writes nested AGENTS.md files inside folders that have their own rules, so a skill working on payments reads both the project-wide and the local ones.
04Drops a tiny CLAUDE.md that points at AGENTS.md, so there is one source and no copy to drift.
Hands off toscope or architect, both of which now read your conventions.
Will notInvent conventions your code does not already show.
SKILL 03Plan
/architect

Make the decision, and write it as a spec

A design conversation that ends in a file. A stack, a data model, a provider, a page design: any decision the build depends on gets made here and written to docs/specs/ as the contract the build follows.

WhenA choice the build depends on is still undecided, or develop says one is missing.
Writesdocs/specs/, status Proposed
ReadsAGENTS.md, the scope, and any close existing spec
Two modesStack mode compares options for a whole stack. Feature mode designs one thing.
How it works
01Sorts every open question three ways: what it can work out itself (it never asks), what only you know (it asks), and what expertise settles (it recommends, with a reason and a runner-up).
02Asks before searching the web or reaching for an outside connector, and records anything it relied on in the spec.
03Checks whether a close spec already exists, and asks whether this is a new decision, an update, or a replacement.
04Turns each requirement into a short numbered acceptance criterion: the thread every later stage traces back to.
05Writes the spec as Proposed and links it to its row in the scope.
Hands off todevelop, which builds from the spec.
Will notWrite code, or present a plain list of options with no recommendation.
SKILL 04Build
/develop

Build the feature from its spec

The only skill that writes application code. It builds a feature, user interface or backend, from its spec, runs migrations for real, and moves the scope and the spec status forward as work lands.

WhenOnce the decision exists. If something is still undecided, it stops and points you to architect first.
Writesyour source tree, design.md, spec status, scope
ReadsThe spec (requirements, acceptance criteria, decision, build plan), AGENTS.md
Per projectMonorepo: builds inside the target workspace using that workspace’s own commands.
How it works
01Checks first: would building this mean inventing something you have not decided? If so it stops, and offers to decide it in architect, build directly if you judge there is nothing to decide, or skip for now, which records the guess as an Assumed spec.
02Sorts the task into interface work, backend work, or both.
03Backend runs in fixed phases, each with a senior engineering rule baked in: run the migration and confirm the tables exist, make repeated requests safe, check that a caller is allowed to touch this particular thing, read secrets from the environment, delete replaced code.
04Interface work starts with where the design comes from (a design tool, an image, your design system, or nothing yet) and every screen ships complete, including empty, loading and error states.
05Moves the spec to In Progress, ticks what truly landed, updates the scope, and writes manual check steps drawn from the acceptance criteria.
Hands off tocheck verify, to prove it runs.
Will notMark a feature done. Built is not done.
SKILL 05Prove
/check

Prove it runs, then read it with fresh eyes

Two modes with one job: confirm a change before it merges. Verify drives the real running app against the spec. Review reads the code on a different model than the one that wrote it.

Whenverify right after develop; review before opening a PR.
Writesdocs/reviews/ (review mode only)
ReadsThe spec and its acceptance criteria, the running app, the diff
Per projectAny project type.
How it works
01Verify drives the real app and walks every promised behavior and every promised screen, not just a passing test file.
02It checks against the numbered acceptance criteria from the spec, so nothing important goes unmeasured.
03Review runs on a different model than wrote the code, because a model reviewing its own work tends to agree with itself.
04Findings go to docs/reviews/ sorted worst-first, and it also says what the change did well.
Hands off totest, once the behavior is proven.
Will notEdit your code. Review reads and reports; you decide what to change.
SKILL 06Prove
/test

Lock the proof into a test suite

Writes a real test suite for the code you just changed, so what was proven once stays proven. It works out your framework the first time and remembers the choice.

WhenAfter building a feature or fixing a bug.
Writesyour test directories
ReadsYour uncommitted change, the spec, AGENTS.md
Per projectMonorepo: works out the framework per package.
How it works
01Scopes itself to the code you actually changed rather than the whole repo.
02Covers the normal path, the edge cases, the error states, and the accessibility of any interface.
03Saves your framework choice so it never asks twice.
04Once verification has passed and tests are in, the feature can be marked done and its spec moves to Accepted.
Hands off tocheck review, then document.
Will notWrite tests that assert whatever the code happens to do today.
SKILL 07Land
/document

Write the human-facing text from the real diff

Reads the actual commits and the actual diff and writes the prose a finished change needs: a pull request body, a changelog entry, a release note, a postmortem.

WhenA finished change needs writing up.
WritesPR body, CHANGELOG.md, docs/releases/, docs/postmortems/
ReadsThe commits and the diff
Per projectAny project type.
How it works
01Reads the real commits and diff rather than a summary of what you meant to do.
02Picks the right form for the moment and puts each piece in the right place.
03Writes for the person reading it later, not for the tool that produced it.
Hands off tosync, the last step around merge.
Will notWrite code or specs.
SKILL 08Land
/sync

Bring the knowledge back in line with the code

The closing step. It looks at what the repo now shows and reconciles the durable files to it, so the next session starts from an accurate picture instead of a stale one.

WhenThe last step around merge. It keeps your context fresh for the next session.
Writessurgical edits to AGENTS.md, the scope, spec statuses
ReadsThe repo as it now stands
Per projectMonorepo: reconciles the right workspace.
How it works
01Updates the context files if the build introduced a new convention.
02Brings the scope back in line with what actually shipped.
03Flags any spec the change quietly made out of date, so a human can settle it.
04Makes small, surgical edits only: adding lines and fixing the lines it owns.
Hands off toA cleared session, and the next feature.
Will notRewrite your prose or reach into another skill’s files.
SKILL 09Off the rail
/debug

Find the real cause, then keep it fixed

Not part of the sequence. Reach for it anytime something is failing, throwing, or behaving wrong. It does one thing only, find and fix the real cause, and adds no features along the way.

WhenAnytime something breaks. No scope and no spec needed.
Writesthe smallest fix that works
ReadsThe failure, the code around it, AGENTS.md
Per projectAny project type.
How it works
01Reproduces the failure, so it is fixing something real and not a guess.
02Narrows down where the fault actually lives.
03Forms one clear hypothesis, tests it, and forms another if it was wrong, rather than piling on random changes.
04Makes the smallest fix that works and confirms the problem is gone.
05Hands a regression test to test, so the same bug cannot come back quietly.
Hands off totest, for the regression test.
Will notTidy unrelated code or add features while it is in there.

The files that carry the work

Everything the workflow knows is written into files in your repo. This is the whole idea. A chat can end, a session can be cleared, a teammate can pull the branch, and the knowledge is still there because it was never trapped in a conversation. There are four kinds of file, and each one has a clear life.

The context files, named AGENTS.md

These describe how your project actually works (its stack, its commands, its conventions) in plain text any coding agent can read. On a project that uses Claude Code there is also a tiny CLAUDE.md that does nothing but point at AGENTS.md, so there is only ever one real source and no copy to drift.

The key idea is that these files nest. One at the root for rules that apply everywhere; more inside folders for rules that apply only to that area. When a skill works on the payments code, it reads the nearest one, so it sees both the project-wide rules and the local ones.

your-repo/AGENTS.md ← project-wide rulesCLAUDE.md ← a pointer, nothing moresrc/payments/AGENTS.md ← rules only payments follows

audit creates these files. Every other skill reads them. sync keeps them current as the code changes. No skill guesses your conventions when a context file already states them.

The scope, in docs/scope/

The high-level plan of what to build and in what order. scope creates it. develop advances it as features get built, marking a feature in progress and ticking milestones, but never marking a feature fully done on its own, because built is not the same as verified. A bare run of scope, and sync at merge time, reconcile it back against what the code now shows.

The specs, in docs/specs/

A spec is the written record of one real decision, and it is the contract the build follows. This is the file type people ask about most, so here is its full life.

Createdarchitect
The moment a real decision is made: which login method, what the data looks like. Born Proposed; a spec written to document something already shipped is born Accepted.
Loadeddevelop
When the build starts. It reads only what it needs to build: the requirements and their acceptance criteria, the decision, the design and the ordered build plan, not the long reasoning, because that is history, not build input.
Changeddevelop
In a very narrow way. develop moves the status line from Proposed to In Progress, and later to Accepted once the feature is built and verified. It touches only that one line, and never the decision itself.
Replacedarchitect
When a decision is genuinely overturned. A new spec is written and the old one is marked Superseded, with a pointer to its replacement, so the history stays readable.
Flaggedsync
If a later change quietly made a spec out of date, so a human can bring it back in line.

Two rules keep this clean. Only architect writes the content of a spec. Only develop moves the status. That single ownership is why the files do not turn into mush over time.

The design system, in design.md

This holds the art direction for your interface: the character, and the rules for how pages are put together. The real values, the exact colors and sizes, live in your project's CSS, and design.md only points at them, so a value is never written in two places. develop creates it the first time you build an interface, or extracts it from your existing screens.

Who owns which file

The files stay trustworthy because ownership is fixed. Here is who creates each file, who reads it, and who is allowed to change it.

FileCreated byRead byChanged by
AGENTS.md + CLAUDE.mdauditevery skillsync
docs/scope/scopearchitect, developdevelop advances it; scope and sync reconcile it
docs/specs/architectdevelopdevelop moves the status line only; architect owns the content and marks a replacement; sync flags a stale one
design.md + CSS valuesdevelopdevelop, checkdevelop

The one thread that ties the stages together

Under all the stages runs a single thread that keeps the work honest: the acceptance criteria. When architect writes a spec, it turns each requirement into a short, numbered statement of what done means, for example, that a signed-in person sees only their own tasks.

architectTurns each requirement into a short, numbered statement of what done means.
build planEvery task names which numbered rule it serves.
developThe check steps it writes trace back to those same numbered rules.
check verifyRuns those steps against the real running app.
testLocks the lasting ones into a test suite.

So a single requirement can be followed in a straight line, from the decision, to the code that satisfies it, to the proof that it works, to the test that keeps it working. Nothing important is left unmeasured, and nothing is marked done that was not actually proven.

Workflow depth

At the end of scope you pick a workflow depth for the project, and you can override it per feature anytime. The depth is a suggested checking tail after develop, never a track you are locked onto. You run or skip any step and mark a feature done when you decide it is. The one thing the workflow asks, at every depth, is that a load-bearing decision gets written down.

Prototype
/develop
·/check verify
·/test
·/check review
·/document
Alpha
/develop
/check verify
·/test
·/check review
·/document
Beta
/develop
/check verify
/test
·/check review
·/document
GA
/develop
/check verify
/test
/check review
/document

If building would mean inventing an undecided design, provider or data model, develop stops and points you to architect. You can override and build anyway, but the override is not free: the assumption is recorded as an Assumed spec and flagged on the feature until architect confirms it. The flag does not block you from marking done: it is a standing reminder that a decision still needs confirming, so it never gets silently lost in chat.

A worked example, from idea to shipped

To make the flow concrete, follow one idea all the way through. The idea is a small app where people sign in and keep their own to-do list. It is a brand new project, so it touches almost every stage. At each stage the workflow asks a small number of questions, and each answer changes what happens next.

STAGE 01/scope

Scope the idea

It turns the idea into a high-level plan and writes it to docs/scope/. Because there is no code yet, it treats this as a brand new project and plans the first slices, starting with the foundation and the first real feature.

The one real question here is how you want to deliver the work. Your pick shapes the order everything is built in later, and is recorded as the project default: any single feature can override it.

Tracer bulletthin thread first
One narrow path all the way through every layer, screen to database, working end to end. Then thicken it.
MVPskateboard · smallest usable thing
The smallest version a person could actually use, then grow it. Good when you want to ship and learn fast.
UI-first prototypefacade · look first, wire later
Screens on mock data first so you can see and feel the product, then wire the real backend.
Vertical sliceone whole journey
Finish one complete user journey, every state of it, before starting the next.
STAGE 02/architect

Decide the stack

Because this is a new project with no stack yet, architect works in stack mode: a wide comparison of options with a clear recommendation. Before it asks anything, it reads whatever context files exist, so it never asks what it can already see.

If a decision could be helped by an outside connector or a ready-made skill, it asks first whether you want it to look, and only searches if you say yes. Anything it finds and relies on gets written into the spec. When the conversation is done it writes the decision as a spec in docs/specs/, status Proposed.

Works it out itself
Anything it can derive from your idea or your code. It never asks; it just uses it.
Asks you
Only things you alone know: a rule your business must follow, a preference you hold.
Recommends
Things expertise settles, with a short reason and a runner-up so you can override. Never a plain list of options, never a silent pick.
STAGE 03/audit

Set up and read the real project

You set up the empty project with the stack’s own setup tool, so there is a real project to read. Then audit reads it and writes the context files: a root AGENTS.md with a tiny CLAUDE.md pointer beside it, recording the stack, the commands, and the conventions it can see.

The order matters. The stack is chosen and the project exists before audit runs, so audit reads a real project instead of guessing about an empty folder.

STAGE 04/architect

Design the sign-in feature

Now architect works in feature mode: a focused design of one thing rather than a whole stack comparison, using the same three kinds of questions.

Before writing, it checks whether a spec for this already exists. If a very close one is found, it asks whether to treat this as a brand new decision, an update, or a replacement. It also decides the shape: a single file for a simple decision, a small folder when the decision is large. It writes the spec as Proposed and links it to the matching row in the scope.

STAGE 05/develop

Build it

This is where the most branching happens, and it happens in a set order. First the check: to build this, would it have to invent something you have not decided? For sign-in the spec exists, so it goes ahead and builds. If a decision were missing it would stop and offer to decide it first in architect (recommended), build directly if you judge there is nothing to decide, or skip for now and leave a mark that a decision is still needed.

Then it sorts the task into user interface work, backend work, or both. Sign-in is both.

The backend part runs in fixed phases, each with a senior rule baked in: build the data layer and actually run the migration and confirm the tables exist; build core logic with repeated requests made safe so a double tap cannot create two accounts; build endpoints that check not just that a caller is logged in but that they are allowed to touch this particular thing; wire outside services with secrets read from the environment; delete replaced code so two versions never sit side by side; finish with a safety pass. If the spec turns out to be wrong partway through, it stops and sends you back to architect rather than quietly building something else.

The interface part starts with one question (where does the design come from) and every screen must leave as a complete, professional product: brand, real wording, layout, and the empty, loading and error states. Before reporting done it looks at its own work, rendering the screen if it can, and fixes visual defects.

When the build lands, develop moves the spec from Proposed to In Progress, ticks the parts of the plan that truly landed, and updates the scope. It does not mark the feature done: that waits for verification and tests. Finally it writes concrete manual check steps derived from the acceptance criteria, and asks whether to save them to a verify.md beside the spec.

From a design tool
If Figma is connected and the spec says to use it, it pulls the real frames and builds to them.
From an image
It copies the image faithfully and adds no flourishes beyond it.
From your design system
If design.md and CSS values exist, new screens are designed inside that system so they match what shipped.
From nothing
It creates the system first: asks for direction, then a mood, then derives one accent, a grey ladder, type, spacing, corners and motion, and checks contrast to the accessibility standard in light and dark before writing any CSS.
STAGE 06/check verify

Prove it runs

It drives the real running app and proves the feature actually works against its spec: every promised behavior and every promised screen, not just that a test file passed. For the to-do app that means it can really sign up, sign in, and see its own list.

STAGE 07/test

Write the tests

It writes a real test suite for the code you just changed, working out your test framework and asking and remembering it the first time. It covers the normal path, the edge cases, the error states and the accessibility of any interface. When verification has passed and the tests are in, the feature can finally be marked done, and its spec moves from In Progress to Accepted.

STAGE 08/check review

Get a second opinion

It runs a senior code review on a different model than the one that wrote the code, because a model reviewing its own work tends to agree with itself. It writes its findings to docs/reviews/, sorted from the most serious down to small preferences, and it also says what the change did well. It reads the code; it does not change it.

STAGE 09/document

Write it up

It reads the real commits and the real difference in the code and writes the human-facing text (a pull request body, a changelog entry, a release note, whatever the moment needs) and puts each in the right place. It writes no code and no specs.

STAGE 10/sync

Bring the knowledge back in line

It looks at what the code now shows and reconciles the durable files back to it: updates the context files if the build introduced a new convention, reconciles the scope, and flags any spec the change made out of date. It makes small, surgical edits (adding lines and fixing the lines it owns) and never rewrites your prose.

At this point the loop is closed. The feature is shipped, proven, tested, reviewed, written up, and the files that carry the project's knowledge are current again. You clear the session and start the next feature fresh, and because everything lives in files, the fresh session knows exactly where things stand.

When something breaks: the debug loop

You run debug. It does one thing only (find and fix the real cause) and it adds no features and tidies no unrelated code along the way. You reach for it anytime something is failing, throwing, or behaving wrong, and you need no scope and no spec to run it.

01Reproduce itSo it is fixing something real and not a guess.
02Narrow it downFind where the fault actually lives.
03Form one guessA single clear hypothesis about the cause.
04Test the guessIf it is wrong, form another, rather than piling on random changes.
05Make the smallest fixThen confirm the problem is gone.
06Hand a test to /testA regression test, so the same bug cannot come back quietly.

On an existing codebase, and in a monorepo

The worked example was a brand new project. Two common situations differ slightly.

On an existing codebase, run audit first. It reads your real code and writes the context files, so every later skill understands your stack and conventions before it touches anything. Then scope enrolls what already exists and plans the new slice on top. From there the loop is the same.

In a monorepo (one repository holding several projects) everything scopes to the one workspace you are working in. Each workspace gets its own scope, its own specs, and its own nested context files, and every skill stays inside the target workspace and uses that workspace's own commands. A change to one app does not reach into another.

Safe to resume, and safe on a team

Because the state lives in files, you can stop at any handoff, clear the session, and pick up later with nothing lost. When develop resumes a half-built feature, it reads which tasks are already done and starts at the first unfinished one, so it never rebuilds what already shipped.

On a team, before it changes anything, develop checks a few things and warns you rather than charging ahead. These are warnings, not walls, but they surface before any code is written.

is your branch behind the shared branch? a teammate may already have shipped this
do you have uncommitted work in the area it is about to touch?
does a teammate look to be partway through the same feature?

What the workflow will not do

The limits matter as much as the features.

It will not mark a feature done on its own.Built is not done. Done waits for check in verify mode to pass and for tests to be in.
It will not invent a decision you have not made.If building would mean guessing a provider, a data shape, or a design, develop stops and sends you to architect.
It will not reach the internet without your go-ahead.It asks before searching for an outside connector or looking anything up, and it records what it used.
The review does not edit your code.It reads and reports, and you decide what to change.
No skill rewrites your prose or reaches into another skill’s files.Ownership is fixed, which is what keeps the files trustworthy over time.

Frequently Asked Questions

Getting started

Install with npx skills. Pick the line for your agent, then commit the installed skills folder so your whole team shares the same workflow.

Claude Code: installs into .claude/skills, then restart Claude Code
npx skills@latest add JavaScript-Mastery-Pro/skills -a claude-code
Generic .agents/skills: read by Codex and other agents
npx skills@latest add JavaScript-Mastery-Pro/skills

For a brand new product start at stage 1 above. For an existing codebase run audit first, then plan the next slice with scope and follow the same loop. For a bug, go straight to debug. For a tiny change, run just develop and then check verify.