L3: Setup for UI, Backend & Knowledge Base

Installing Claude Code or configuring API keys is only the first step. For an AI agent to autonomously navigate a repository, write reliable backend logic, and generate pixel-perfect UIs, the enterprise development environment must be strictly organized. This lesson covers how to structure your projects so that Claude can operate efficiently without context confusion.

1. The "Agent-Ready" Repository

Human developers can intuitively navigate messy, deeply nested folders and infer undocumented logic. Claude, however, relies entirely on the explicit context provided in the file system. An "Agent-Ready" repository prioritizes rigid structure and explicit documentation.

The Golden Rule of Agentic Setup: Predictability over cleverness. If your backend uses a non-standard custom router, Claude will spend hundreds of tokens trying to understand it (or hallucinating ways to use it). If you use standard frameworks (like Express, FastAPI, or Next.js App Router) and establish clear folder hierarchies (/controllers, /services, /components), Claude can immediately begin generating code via pattern matching.

2. Backend Setup for Agentic Automation

When preparing a backend environment (Python, Node.js, Java) for Claude, the architect's goal is to create a deterministic environment where the agent can test its own code.

Strict Typing & Linting: You must enforce strict static typing (e.g., TypeScript, Python's Pydantic/mypy) and aggressive linters (e.g., ESLint, Ruff, Black).
- Architectural Why: As covered in the Validation-Retry loop, an agent needs explicit error messages to fix its own mistakes. If your backend is loosely typed, Claude might inject a string where an integer belongs, and the code will fail silently. Strict linters provide the exact terminal output Claude needs to self-correct in Plan Mode.
Scaffolding the Patterns: Do not ask Claude to build the entire backend from an empty folder. Create the first Model, the first Route, and the first Controller yourself. Claude's LLM engine is a pattern-matching machine; providing that initial scaffold guarantees the agent will match your exact architectural style for the next 50 endpoints.

3. UI Setup and Frontend Constraints

Frontend generation requires a different setup strategy. LLMs are notoriously bad at guessing design systems and will often hallucinate inline CSS or random HEX codes if left unconstrained.

Component Isolation (Atomic Design): Agents struggle to safely modify massive, monolithic 2,000-line frontend files. Set up your React/Angular/Next.js environment using an Atomic Design pattern (/atoms, /molecules, /organisms). This allows Claude to safely isolate, generate, and test one small piece of the UI at a time.
Design System Provisioning: Before asking Claude to build a UI, you must lock down the styling parameters.
- The Implementation: Configure Tailwind CSS (or your chosen framework) heavily. Place a design-tokens.md or update your CLAUDE.md file with explicit instructions: "Only use Tailwind utility classes. Primary button color isbg-blue-600. Do not use custom CSS." This forces the agent to use your established UI kit rather than inventing its own.

4. Knowledge Base Integration (The Agent's Brain)

For Claude to act as a developer, it needs to know what to build and why. An agent cannot write a correct API endpoint if it doesn't know the business rules.

Local Context Injection:

Instead of developers pasting Jira tickets or requirements into the terminal every time, architects build the Knowledge Base directly into the repository.

The/docs Directory: Create a dedicated folder containing the Business Requirements Documents (BRDs), database schema diagrams (in Markdown/Mermaid format), and API contracts.
When you instruct Claude Code to "Implement the payment endpoint," it can autonomously read /docs/payment-requirements.md to learn the business logic before it writes a single line of code.

Dynamic Context (MCP):

For enterprise setups, the Knowledge Base is rarely static. By setting up Model Context Protocol (MCP) servers (as covered in earlier modules), you can connect your local dev environment directly to Confluence, Notion, or internal wikis. This allows the agent to fetch the most up-to-date architectural decisions on the fly without cluttering the local repository with stale Markdown files.

5. Context Fences (`.gitignore` and Context Management)

The biggest enemy of a local AI agent is token bloat. If Claude attempts to read your node_modules folder, your Python venv, or compiled build artifacts, it will instantly blow out the context window and crash the session.

Architectural Enforcement: Ensure your .gitignore is completely up to date before launching Claude Code. Claude natively respects .gitignore rules, using them as a "Context Fence" to know which directories are off-limits for reading and writing, ensuring the agent's attention remains strictly on your source code and documentation.