L1: Backend and Frontend Standards

Backend (Python, Node.js, Java) and Frontend (React/Angular/NextJS) Standards

In Module 4, we learned how to write deterministic prompts and handle ambiguity. In Module 5, we apply those principles directly to code generation. When you ask Claude to "build a feature," it has access to billions of lines of training data encompassing every coding paradigm imaginable. If you do not establish rigid engineering standards, the agent will stitch together a Frankenstein architecture of conflicting patterns.

This lesson covers how to define and enforce Backend and Frontend standards to ensure AI-generated code is production-ready, maintainable, and aligned with your enterprise architecture.

1. The Necessity of Strict Standards

Human engineers learn your company's coding style through onboarding, code reviews, and pair programming. Claude learns it through explicit instruction.

If you ask Claude to write a Node.js endpoint without constraints, it might use require() instead of import, write raw SQL instead of using your ORM, or use an outdated callback pattern.

The Architectural Fix: You must define your "Golden Path." Every time Claude generates code, it must be constrained by a strict set of architectural rules, typically injected via a CLAUDE.md file or the System Prompt.

2. Backend Generation Standards (Python, Node.js, Java)

Backend generation requires enforcing strict data contracts and structural consistency. LLMs excel at writing business logic, but they need guardrails to ensure that logic fits into your broader system.

Type Safety as a Mandate: Agents perform exponentially better in strictly typed environments.
- Node.js: Always enforce TypeScript.
- Python: Mandate the use of Type Hints and frameworks like Pydantic or FastAPI that enforce them.
- Java: Rely on Java's native strong typing (e.g., strict Spring Boot entity mappings).
- Why? When an agent makes a mistake in a typed environment, the compiler throws a specific, deterministic error (e.g., Expected string, got undefined). The agent can use this exact error in a Validation-Retry loop to fix the code autonomously.
Architectural Boundaries (Clean Architecture): You must explicitly instruct Claude on how to separate concerns.
- Constraint Example: "Never put business logic in the routing controller. Controllers must only handle HTTP requests and pass data to the Service layer. The Service layer communicates with the Repository layer for database access."
Dependency Locking: Explicitly tell Claude which libraries to use. "Use SQLAlchemy for all database interactions. Do not use raw psycopg2 cursors." This prevents the agent from hallucinating unapproved open-source packages.

3. Frontend Generation Standards (React, Angular, NextJS)

Frontend generation is highly prone to visual hallucinations. Because Claude cannot "see" the UI it is building in a traditional sense, it relies purely on mathematical representations of the DOM and CSS.

Component Isolation (Atomic Design): Never ask an agent to build a massive, 1,000-line "Dashboard" component.
- Standard: Enforce a modular component architecture. Instruct the agent to build the Button, then the Form, then the Card, and finally compose them into the Dashboard. This reduces cognitive load and context window bloat.
Styling and Design Systems: Unconstrained LLMs will generate inline styles (e.g., <div style={{ color: '#ff4400' }}>) or invent custom CSS classes.
- Constraint Example: "You are strictly forbidden from writing custom CSS. You must only use Tailwind CSS utility classes. For primary actions, use bg-blue-600."
State Management: Frontend frameworks have wildly different ways to handle state. You must define the standard.
- React/NextJS: "Use React Context for global state and useState for local state. Do not use Redux."
- Angular: "Strictly use RxJS Observables and the async pipe for data binding."

4. Codifying Standards via `CLAUDE.md`

As an AI Architect, you do not want developers pasting these rules into the terminal for every single prompt. You codify these standards into the repository itself.

When setting up a project, create a CLAUDE.md (or a system-prompt.txt for your custom tools) that clearly lists these standards.

Example Snippet for a Next.js/TypeScript Repo:

Markdown

## Engineering Standards
- **Framework:** Next.js 14 (App Router). Do not use the Pages router.
- **Language:** TypeScript. Use strict typing. Do not use `any`.
- **Styling:** Tailwind CSS. Do not write raw CSS files.
- **Components:** Use functional components and React Server Components by default. Only use `'use client'` when hooks (`useState`, `useEffect`) are strictly necessary.
- **Data Fetching:** Prefer server-side fetching using native `fetch` over client-side SWR/React Query unless specified.

5. Reviewing AI-Generated Code

When testing AI-generated code in your CI/CD pipeline (using the Generator/Reviewer pattern), the Reviewer Agent must be given this exact same list of standards.

Its prompt becomes: "Review the generated Pull Request. Does it violate any of our defined Engineering Standards? If it uses inline CSS or lacks TypeScript interfaces, fail the build and list the violations." This ensures your architecture remains pure, even when generated by autonomous agents.