Building Web Apps with Claude Code: A Senior Developer’s Playbook

A structured playbook for senior developers to leverage Claude Code for building production-ready web applications efficiently.

By Central
This guide details a systematic approach using soul.md files and skill decomposition to generate reliable code with Claude Code.
Highlights
  • Claude Code reads a soul.md file at the start of every session to define its identity and constraints.
  • Decompose your application into atomic skills, each with a skill.md file containing step-by-step instructions.
  • Iteratively improve skills by feeding back flaws from generated code, achieving production-ready output over time.

You have built web apps before. You know the stack, the patterns, the pain points. What you haven’t done is let a language model write the scaffolding, the routes, the tests, and the config files while you focus on architecture and business logic. Claude Code changes that — but only if you treat it like a senior engineer, not a code generator you copy-paste from.

The mistake most experienced developers make is treating Claude Code like a smarter autocomplete. They give it a vague prompt, accept the first draft, and spend hours debugging generated code that looks right but isn’t. The alternative is a structured system that produces production-ready output on the first or second pass. Here is that system.

Two agents with the same prompt but different soul files produce radically different code.

Step 1: Write a Project-Level Identity File Before a Single Line of Code

Claude Code reads a soul.mdcode file at the start of every session. This file defines the agent’s identity: its tone, its constraints, what it does without asking permission, and what it refuses to do. On a fresh project, this file is your first deliverable.

“`

soul.md

You are a senior full-stack web developer specializing in Next.js and PostgreSQL.

  • Always use TypeScript with strict mode.
  • Prefer server components over client components unless interactivity is required.
  • Every query must be parameterized; no raw string interpolation.
  • Generate unit tests for every utility function and integration tests for every API route.
  • When unsure about a pattern, ask before implementing.

“`

Two agents with the same prompt but different soul files produce radically different code. This file sets the bar. Put it in the project root and reference it explicitly: “Read soul.md and follow its rules for all subsequent tasks.”

Why this matters: Without a soul file, Claude Code defaults to generic best practices that often conflict with your specific stack and conventions. Write it once, and every session inherits the same constraints.

Step 2: Decompose Your Application into Skills

A skill is a folder containing a skill.mdcode file and optionally scripts, templates, and reference material. Each skill handles one atomic task. For a web app, your skill library might include:

  • scaffold-pagecode: generates a page component, layout, and route with error boundaries
  • api-endpointcode: creates a Next.js API route with validation, error handling, and logging
  • db-schemacode: writes a Prisma schema file based on a natural-language description of the data model
  • test-suitecode: generates unit and integration tests for a given module
  • deploy-configcode: creates Dockerfile, docker-compose, and deployment manifests

Each skill.md starts with a YAML front matter block that names the skill and describes when it applies. The body contains step-by-step instructions, pitfalls to avoid, and a verification checklist.

“`

name: api-endpoint

description: Generate a Next.js API route with Zod validation, error handling, and logging.

tags: [backend, api, validation]

When to Use

When the user asks you to create a new API endpoint for a specific resource.

Procedure

  1. Ask for the HTTP method, path, request body shape, and expected response.
  2. Generate the route file in app/api/[resource]/route.tscode.
  3. Define a Zod schema for the request body (if applicable).
  4. Implement the handler with try/catch and structured error responses.
  5. Add a logger call at the start and end of each handler.
  6. Write a unit test for validation logic and an integration test for the endpoint.

Pitfalls

  • Do not omit input validation even for GET endpoints (query parameters).
  • Do not use anycode; infer types from Zod schemas.
  • Do not hardcode status codes; use NextResponsecode status constants.

Verification

  • Confirm the route file exists and follows the file naming convention.
  • Run the test suite after generation.
  • Check that the endpoint is registered in the API documentation file (if any).

“`

Install the skill by placing the folder in claude/skills/code (or the equivalent for your project). Claude Code reloads skills automatically and picks them up on the next session.

The payoff: With a library of 10–15 skills, you can generate an entire CRUD application from a single conversation prompt. Each skill fires automatically when its description matches the task.

Step 3: Chain Skills with a Verification Loop

A skill generates output. A verification skill checks that output. This two-step loop is what separates amateur use from professional-grade automation.

After a skill runs, invoke a verification skill that performs both objective and subjective checks:

  • Objective: Does the file exist? Does it pass TypeScript strict mode? Are there any console.logcode statements left in? Do all tests pass?
  • Subjective: Does the code structure match the patterns already in the codebase? Is the error handling consistent with existing endpoints? Does the naming convention align with the project style?

The source material on verification loops shows that adding a verification step raises output quality from ~75% to ~95%. The key is to make the verification skill explicit about what “done” looks like. Without it, Claude Code will mark a task complete even when the output is sloppy.

“`

name: verify-api-endpoint

description: Review a generated API route for correctness, consistency, and compliance with project conventions.

tags: [verification, backend]

Procedure

  1. Locate the generated route file.
  2. Check that the file imports from the correct paths (not relative guesses).
  3. Verify that every code path returns a NextResponsecode or NextRequestcode object.
  4. Ensure the Zod schema matches the actual request body shape described in the task.
  5. Run npm run typecheckcode on the file.
  6. Run the associated test file.
  7. If any check fails, report the failure and do not mark the task as complete.

“`

Run the generation skill, then the verification skill. If verification fails, feed the error back into the generation skill and ask it to fix. This loop typically converges in 1–3 iterations.

Step 4: Manage Context Windows Strategically

Claude Code has a large but finite context window. A senior developer knows that dumping the entire codebase into context is the fastest way to get vague, hallucinated answers. Instead, be surgical.

  • Use the --includecode flag to point Claude Code at only the files relevant to the current task.
  • Keep skill descriptions short — the agent reads the description to decide whether to open the skill. A vague description like “handles backend tasks” means it will open the wrong skill half the time.
  • Split your project into subdirectories with their own soul.mdcode files. For example, a frontend/code folder with a soul that prefers client components, and a backend/code folder with a soul that enforces REST conventions.

The rule of thumb: if you can describe the task in under 50 words, you don’t need to load the entire project. If the task requires understanding the full data model, load only the schema files and the relevant route handlers.

Step 5: Integrate with Your Toolchain (Git, CI, Prettier)

Claude Code can write code, but it won’t format it to your project’s standards unless you tell it to. Add a skill called format-projectcode that runs Prettier and ESLint after every generation batch. Hook this into your CI pipeline as a pre-commit check.

More importantly, teach Claude Code to write commit messages that follow your convention. Create a skill commit-messagecode that reads the diff from the last skill run and outputs a conventional commit string (e.g., feat(api): add user preferences endpointcode). You then paste this into your terminal.

The source material on agent skills emphasizes that a skill is only valuable if it runs while you’re not watching. Set up a scheduled task (via cron or GitHub Actions) that triggers a nightly skill run: “Review all new files in the last 24 hours and flag any violations of soul.md rules.” This catches drift before it becomes technical debt.

Comparison Table: Prompting Strategies for Claude Code

Strategy Setup Effort Output Consistency Debug Time per Task Best For
Monolithic prompt (single request) Low (2 min) Low (40-60% usable) High (30-60 min) One-off prototypes
Skill library + manual verification Medium (2-3 hours) Medium (70-85% usable) Medium (15-30 min) Small apps, solo projects
Skill library + automated verification loop High (8-12 hours) High (90-95% usable) Low (5-10 min) Production apps, team projects

The middle column (skill library + manual verification) is the sweet spot for most senior devs. The full automated loop pays off when you have multiple contributors or a large codebase where consistency matters.

Step 6: Treat Skills as Living Documents

No skill is ever finished. Every time you run a skill and find a flaw in the output, feed that flaw back into the skill as a new pitfall or verification check. This is the “bicycle method” from the source material: each iteration removes one more edge case.

Concretely, after a session, review the generated code. Identify one thing that was wrong or suboptimal. Then update the skill.md with a new pitfall or a tighter instruction. Over 20 iterations, a skill goes from “mostly works” to “production-ready every time.”

I keep a changelog at the top of each skill.md to track what was added and why. This also helps when onboarding other team members — they can see the reasoning behind each rule.

The Next Frontier: Multi-Agent Architectures

Everything above assumes a single Claude Code agent working on your project. But the real power comes from splitting responsibilities across agents. One agent owns the skill library and verification, another handles code generation, and a third monitors the CI pipeline and files bug reports. This is not science fiction — the infrastructure exists today in Claude Code’s skill system and the ability to chain agents via file-based communication.

Start by creating a “project manager” agent whose only job is to read your feature requests, break them into tasks, dispatch them to the appropriate skill, run verification, and report results. You become the reviewer, not the operator. That is the shift this entire playbook is designed to enable.

Questions answered
  • What is a soul.md file in Claude Code?A soul.md file defines the agent's identity, tone, constraints, and rules for code generation, ensuring consistency across sessions.
  • How do you decompose an application into skills?Create a folder for each atomic task with a skill.md file containing YAML front matter and step-by-step instructions.
  • What is the bicycle method for improving skills?After each session, identify a flaw in the generated code and update the skill.md with a new pitfall or tighter instruction to remove edge cases.
  • What is the next frontier for Claude Code?Multi-agent architectures where one agent manages skills, another generates code, and a third monitors CI, enabling you to become a reviewer instead of an operator.
Share This Article