AI, Technologies and Software Engineering

Claude Code Full-Stack Configuration Guide

Posted on:December 9, 2025

(TanStack/TypeScript + Python)

Last Updated: December 2025 – This guide presents a state-of-the-art setup for using Claude Code (Anthropic’s AI coding assistant) in a modern full-stack project. We focus on a TanStack/TypeScript front-end with a Python back-end (Dockerized, deployed via Railway) and a PostgreSQL database, with front-end bundling through Vite and deployment on Cloudflare. The goal is a “bulletproof” workflow that takes advantage of Claude Code’s extensibility – including MCP servers (e.g. Context7), custom skills, slash commands, sub-agents, plugins, and hooks – to guide the AI agent through analysis, planning, implementation, and validation phases of development. We’ll also touch on sensible security practices to keep the workflow safe.

Overview of the Tech Stack

This heterogeneous stack means our AI assistant must seamlessly navigate TypeScript/React code and Python code, plus configuration files (Vite config, Dockerfiles, etc.). The configuration we’ll set up ensures Claude has the right context and tools to handle both sides of the application.

Setting Up the Claude Code Environment

First, ensure you have access to Claude Code (via Anthropic’s platform or the VS Code extension). The VS Code extension (as of late 2025) provides a convenient GUI with a Claude sidebar and plan review mode . It reads the same configuration as the CLI, so you can use whichever interface you prefer . Key steps to get started:

Plan Mode: Claude Code has a “Plan” subagent that can outline steps for complex changes. In VS Code’s extension, you can toggle Plan mode to have Claude produce a plan which you can review/edit before execution . In CLI, a similar effect can be achieved by asking Claude to plan first or using commands (we will see custom /plan commands later). Using plan mode for major features is highly recommended, as it forces the agent to think through the approach before editing code – reducing mistakes.

Integrating Model Context Protocol (MCP) Servers

To give Claude dynamic, context-specific knowledge, integrate Model Context Protocol (MCP) servers. MCPs act as tools that Claude can call for supplemental information. The “MCP stack” below supercharges Claude Code, addressing its weaknesses (like outdated knowledge or limited project awareness):

These three MCP servers – Context7, Serena, and Sequential Thinking – are widely regarded as a “best stack” to use with Claude Code . Together, they dramatically improve accuracy and relevance of Claude’s coding suggestions. In practice, using them transformed one developer’s workflow: “Sequential Thinking mapped out requirements and dependencies, Serena found our existing code patterns, Context7 pulled the latest docs, and Claude synthesized a solution that fit perfectly” . We aim to achieve the same level of quality and speed.

Tip: After adding MCPs, you can craft a prompt or slash command to remind Claude to use them. For example, one power-user created a /go command that tells Claude: “Always use Serena for code retrieval, Context7 for docs, and Sequential Thinking for decision making; and read the CLAUDE.md root file before doing anything.” . This ensures the AI consistently leverages these tools for every task.

Providing Project Context with CLAUDE.md and Skills

To guide Claude effectively across the full stack, we need to supply it with project-specific context and guidelines. Claude Code offers two key mechanisms for this: CLAUDE.md files and Agent Skills.

Documenting the Project in CLAUDE.md

A CLAUDE.md file is an ideal place to put high-level information about your project that you want Claude to always remember. Claude Code automatically loads this file at session start , so it acts like persistent context or “instructions” for the AI. In a full-stack TanStack/Python project, you should include:

Keep the CLAUDE.md concise and bullet-pointed (as above) for readability . The idea is to give Claude the critical context at a glance. This reduces the need for repeated explanations and helps avoid AI mistakes that stem from missing context. If you iterate on CLAUDE.md content, treat it like code: refine it over time for clarity and include it in version control so the whole team benefits .

Pro Tip: You can quickly add to CLAUDE.md during a session by typing # followed by an instruction; Claude will incorporate that into the file for next time . For example, after solving a tricky deployment bug, you might add a line to CLAUDE.md about it so the AI doesn’t repeat the mistake.

Creating Auto-Loaded Skills for Additional Context

Skills in Claude Code are another powerful way to inject context or behavior. A skill is essentially a snippet of instructions or information that Claude can load automatically when certain topics arise . Skills are stored as YAML or Markdown files (in ~/.claude/skills for personal, or in your project’s .claude/skills/ directory for project-specific skills) . Each skill has a description that acts as a trigger, telling Claude when to load it.

Use skills to cover auxiliary or detailed context that might not live in CLAUDE.md or to enforce consistent behavior. Some useful skills for our scenario:

When creating skills, be specific in the description about when to load and when not to. A “WHEN/WHEN NOT” pattern in descriptions greatly improves auto-invocation accuracy . For instance, instead of “Provides information about the database,” write “Auto-invoke when the conversation involves SQL queries, database schema, or migrations. Do NOT load for general discussions unrelated to data storage.” This clarity ensures Claude triggers the skill exactly when needed, and not on irrelevant occasions .

Skills are essentially automatic context injections. They function like extended memory – “I want Claude to remember X automatically → use a Skill” . Unlike CLAUDE.md (which is always loaded globally), skills can be finer-grained, loading only for relevant topics. This helps keep Claude’s context focused and under token limits, while still providing rich info when necessary. In our setup, the combination of a comprehensive CLAUDE.md and targeted skills ensures Claude is aware of our stack’s details at all times (without us re-describing things each time).

Custom Slash Commands for Workflow Automation

Claude Code allows defining custom slash commands – think of these as shortcuts or macros that either expand to some prompt text or trigger certain agent actions. We will create commands to streamline frequent tasks and orchestrate multi-step workflows with a single user input .

Commands can do a few things: they can inject a pre-defined prompt (possibly with placeholders for arguments), run simple shell scripts, or invoke subagents (specialist agents) for complex flows . They reside in .claude/commands/ as YAML files. Here are some useful commands to consider:

Technically, many slash commands are either front-ends to subagents or to simple scripts . For example, you might have a “PlanAgent” subagent and /plan simply invokes it; or /test just runs a bash command internally. Define commands in YAML with a description and either an action (like calling a subagent) or direct bash to run.

By creating intuitive commands, we achieve a streamlined developer experience: instead of lengthy prompts like “Please analyze X, then do Y…”, you issue / argument and Claude knows what to do. This not only speeds things up but also reduces ambiguity, since the command encapsulates best-practice prompts you’ve pre-defined.

Leveraging Sub-Agents for Specialized Tasks

Sub-agents (or just “agents” in some docs) are custom-configured AI personas that operate under specific instructions and tool restrictions. In Claude Code, subagents allow you to break a complex workflow into parts – each handled by a specialized agent – rather than one monolithic AI doing everything. This aligns perfectly with the development phases: we can have different subagents for analysis/planning, implementation, validation, etc. Indeed, a common pattern is: “I want to automate Y workflow step-by-step → use a Subagent.”

Key points about subagents:

For our bulletproof workflow, we can define a few subagents:

When designing subagents, keep them concise and targeted. You don’t need 1000-line prompts for each agent – in fact, “subagents should be concise, not comprehensive; Claude is smart enough to work with well-structured guidance” . Each agent’s instructions should clearly outline its scope (analysis vs coding vs testing) and any special knowledge or tools it should use.

We will orchestrate these agents in the workflow. Typically, you might manually trigger them with commands: e.g. you run /plan FeatureX which invokes the planner subagent and returns a plan. Then you approve or tweak the plan, and either manually prompt main Claude to implement it, or run /implement PlanX. However, you can streamline this with commands and hooks so that it feels like a continuous pipeline.

In summary, subagents allow Claude Code to mimic a multi-role team: one “AI member” analyzes and plans, another codes, another tests. This reduces errors and oversights because each subagent is focused and can even use different strategies. For instance, the planner can do heavy reasoning (with sequential thinking MCP) without being distracted by code editing, while the coder can be set to strictly follow the given plan and project standards. Users have found that complex tasks benefit from this specialist approach – the AI effectively “consults” with itself in different modes and produces more reliable outcomes.

Establishing a Phased Workflow (Analysis → Plan → Implement → Validate)

Now let’s put it all together into a cohesive workflow that spans the entire development cycle for a given task. Our goal is to make the AI agent operate across analysis, planning, implementation, and validation phases methodically. This section outlines how you might execute a feature from start to finish using the configurations above:

  1. Kickoff / Analysis: Begin by describing the feature or problem to Claude. For example, “We need to add a new user profile page where users can update their bio. This requires a new frontend route, a backend API endpoint, and a database field for bio.” Instead of directly asking for code, you invoke your planning command: /plan “Add user profile page with editable bio”.

    • This triggers the Planner subagent which uses Sequential Thinking to clarify requirements and possibly ask follow-up questions (Claude might ask if there’s an existing user model, how authentication is handled, etc., which you answer).

    • The planner then uses Serena to scan relevant parts of the code (maybe finding the User model in Python and the routing setup in React) and Context7 to check any library usage (perhaps looking up the TanStack Router docs for adding a new route).

    • It produces a structured Plan. For example, it might output:

      1. Database – Add a bio column to the users table (and a migration).

      2. Backend – Create an API endpoint /api/user/updateBio to update the bio (validate input, save to DB).

      3. Frontend – Add a /profile route in TanStack Router; create UserProfile.tsx component with a form to edit bio; use TanStack Query to fetch and mutate user data via the new API.

      4. Validation – Update or write tests for the new API and frontend component; ensure authentication is required to access profile.

    • This plan can be saved to a PLAN.md or posted in the chat for review. Review the plan: thanks to the analysis phase, it should be logical and aligned with project patterns (the planner likely even found where in the code to add things, e.g. which file defines routes). You can edit or add any steps if you notice something missing.

  2. Planning Approval: Once you’re satisfied, you signal Claude to proceed. If using a manual approach, you can simply say “Sounds good. Please implement this plan.” If using structured commands, you might run /implement PLAN.md or similar, which passes the plan to the main agent. In some setups (like Tâches create-plans skill), there’s an explicit step to convert the plan into executable tasks , but you can also trust Claude to follow the markdown plan itself.

    • It’s worth noting you could use Claude Code’s Plan Mode UI here: in VS Code, switch to plan mode so that Claude enacts the plan step by step with you approving each change, or use the CLI in segments. This gives you a checkpoint before major changes.

  3. Implementation (Coding Phase): The main Claude agent (with full tool access) now takes over to implement each step:

    • It will start editing files to add the bio field (maybe creating a Alembic migration if using one, or altering an SQLAlchemy model and generating a migration script).

    • Then it will create the new backend route/handler function in the Python code. Because Context7 is available, if Claude needs to recall how to integrate with your framework (say FastAPI syntax for adding a new endpoint), it can fetch that documentation on the fly . Because the plan likely references existing patterns (maybe “use the existing user update logic as reference”), Claude can also use Serena to open those files and ensure consistency (e.g. find how authentication is checked in other routes, and replicate it) .

    • Next, it moves to front-end: it will add the new route in your router configuration, create the UserProfile.tsx component file, use TanStack Query’s hooks for data fetching/updating. Here again, Context7 might pull up TanStack Query docs if needed to ensure correct usage of useQuery and useMutation for form submission, etc. The agent writes the TypeScript code, possibly consulting CLAUDE.md or a style skill to keep code style consistent (like ensuring it uses functional components with proper hooks).

    • Claude will usually do this in a logical order, but if it ever gets off track, you can intervene. Ideally, because it’s following the plan, it should be clear about what to do next. Each file edit or command it wants to run will either auto-apply (if you allowed it) or prompt you for approval. You can generally allow file edits freely (Claude Code lets you always-allow edit and similar safe actions to streamline work ).

    • Keep an eye on the changes: since you gave it architecture context and the plan, the code should align with your expectations. For example, you should see it adding the bio field in both backend and front, not naming things weirdly, etc. If something is off, correct Claude or adjust the plan.

    • This phase ends when Claude believes it has completed all steps of the plan. It might summarize “Implemented all steps. Next, we should run tests.”

  4. Validation (Testing & Review Phase): Now it’s time to verify the changes:

    • Have Claude run the test suites. You can literally ask: “Run the tests to validate everything.” If you set up the /test command or a Post-implementation hook, this might happen automatically. For instance, a PostToolUse hook could detect when Claude finishes a series of edits (or when it’s “Stop” event fires after answering) and trigger npm run build && npm test && pytest behind the scenes. But it may be simpler to explicitly instruct the agent or call /test.

    • Claude executes the tests using the Bash tool and returns the results. If all tests pass and the build succeeds, fantastic – you have high confidence the changes are correct. If there are failures or errors:

      • We enter a debug loop: The agent (or a specialized testing subagent) can analyze the error messages. Thanks to its context, it will know where to look – perhaps using Serena to open the file referenced in a stack trace, etc.

      • Claude suggests a fix for each issue. This is essentially an iteration of the implementation phase for bugfixing. It edits code to address failing tests or runtime errors, then you run tests again. This loop continues until green.

      • If new bugs or edge cases come up, the agent might use Sequential Thinking again to reason out a solution (especially if the fix is non-trivial). You can also prompt it to consider if there are any edge cases or additional validation needed (it might then load the Security skill or recall best practices to add, say, input validation on that new bio field if not already done).

    • Optionally, consider a code review step: you can ask Claude (perhaps via a slash command or a skill) to perform a self-review of the diff and point out any potential issues or improvements. There are community plugins for PR review that do this . This can catch things like missing null checks or stylistic issues that tests didn’t cover.

  5. Deployment or Next Steps: Once validation is done, you can proceed to deploy. If you have a /deploy command, you might run it now. Claude will package the front-end (Vite build output) and publish it to Cloudflare (make sure credentials or API tokens for Cloudflare are available, maybe via environment), and push the backend container to Railway. If you prefer, you can do the deployment manually, but having Claude generate the Dockerfile or deployment script earlier ensures it’s ready. Be cautious when letting Claude deploy: double-check configuration to avoid accidents (e.g. deploying to production accidentally). It’s often wise to deploy to a staging environment first.

    • Claude can also automate creating a Git commit or PR. Because it knows how to use the gh CLI and Git, you could have it commit the changes and even open a pull request with a summary. Claude Code is capable of drafting commit messages describing what was done.

    • These final steps can be fully automated or manual as fits your workflow. In a team setting, you might just use Claude to prepare the code and tests, then you push through the normal review process.

Throughout all phases, our configuration has been doing heavy lifting:

Result: By the end of this workflow, you’ve essentially had Claude operate like a diligent engineer: analyzing requirements, designing a solution, coding it across multiple layers, and testing it thoroughly. This structured, tool-augmented approach significantly reduces the chance of errors or oversights. In fact, anecdotal reports from early adopters of such setups show major improvements: tasks completed faster and with better quality, fewer context-switches for the human, and an AI that feels less like a “code generator with amnesia” and more like a competent collaborator .

Using Plugins to Package Your Setup

Claude Code introduced plugins as a way to bundle and share configurations of commands, subagents, MCP setups, and hooks . If you want to reuse this full-stack setup across projects or share it with teammates, consider turning it into a Claude Code plugin.

A plugin is basically a repository (or local folder) that contains a .claude-plugin directory with YAML files defining all the slash commands, agents, etc., plus a manifest. By packaging your slash commands, subagents, MCP server configs, and hooks into a plugin, you enable others (or your future self on a new project) to install it with a single command (e.g. /plugin install my-fullstack-setup) and instantly get the same capabilities. This promotes consistency across the team.

For example, you might create FullStackPlugin that, when installed:

With a plugin, onboarding a new developer or starting a new similar project becomes easier – just install the plugin and Claude Code is ready to work with the same “brain” and workflow you’ve defined. Anthropic expected such use cases: “Plugins help you standardize Claude Code environments around a set of shared best practices” , “bundling customizations that work together for specific use cases” – exactly what our full-stack configuration is.

There are already community-driven plugin marketplaces. For instance, Dan Ávila’s marketplace offers DevOps and testing plugins, and another collection provides 80+ subagents for specialized tasks . It’s worth exploring those; you might find a pre-made plugin for common needs (perhaps one that handles typical Rails/React or Node/DB workflows which can be adapted to our stack). If not, yours could contribute to filling that gap.

To create a plugin, follow Claude’s docs or use the /plugin create command in Claude Code which guides you. And remember, plugins can be toggled on/off easily – so you can enable your full-stack plugin when working on TanStack/Python projects and disable it if you switch to a different context, keeping Claude’s mind uncluttered.

Security Best Practices for Claude Code Agents

Even without strict compliance requirements, it’s important to enforce “good sense” security in this AI-driven workflow. We’re essentially giving an AI significant control over our codebase and environment; thus, we should configure boundaries to prevent accidents or abuse (especially relevant if using Claude Code on private code or with production deployment capabilities). Here are some security considerations and features:

In short, treat Claude Code as you would a powerful script running on your machine: give it defined boundaries (via sandbox), enforce rules (via hooks/permissions), and keep an eye on it. Claude Code’s design is “conservative by default” with permissions ; by configuring things like sandbox and specific hooks, we can actually allow it to do more on its own (reducing prompt fatigue) while staying safe . This yields a development flow that is fast but doesn’t cut corners on security.

Conclusion

By configuring Claude Code with the above MCP integrations, skills, commands, subagents, hooks, and plugin packaging, you equip the AI to be a true full-stack assistant. It will understand your TanStack/TypeScript + Python project in context, use the latest best practices from documentation, recall your project’s specific details, and follow a structured approach to build and verify features.

This “bulletproof” workflow mirrors how an experienced development team operates: careful planning, adherence to standards, iterative implementation with continuous testing, and safeguarding of quality and security at each step. Developers who have adopted similar setups report dramatic improvements – faster completion of complex features (60–70% time reduction in one case) and higher code quality with fewer bugs – all while reducing the mental load on the human coder.

Remember that every project is unique, so feel free to tweak the skills and commands. The core ideas remain: give Claude as much relevant knowledge as possible, break tasks into phases, and let tools/automation enforce the process. With this configuration, Claude Code can truly function as an “AI pair programmer” that not only writes code, but also plans, reviews, and deploys it following the best practices of modern full-stack development.

By implementing this state-of-the-art setup, you’re at the cutting edge of AI-assisted software engineering. Happy coding with Claude, and enjoy the newfound efficiency and confidence in your TanStack + Python projects!

Sources:

About the author

Stephane Busso
Stephane Busso

Software builder and engineering manager based in New Zealand 🇳🇿. HTDOCS.dev is a medium to share about ai, technologies and engineering.