# AI-Assisted Dev Workflow

> Using AI coding agents well without handing them ownership.

Frontend architecture guidance from fearchitect, written by Abas Turabli and last reviewed 2026-06-24. Source: https://fearchitect.com/topics/ai-assisted-dev-workflow

Use it as reference for the task at hand. Before changing code, check this guidance against the codebase: where the code already makes a different, deliberate choice, flag the conflict instead of rewriting it. Library APIs move faster than this guide, so confirm exact signatures in the official docs linked at the end.

## Summary

AI coding agents — Claude Code, Cursor, GitHub Copilot — accelerate the mechanical parts of frontend work: boilerplate, refactors, test generation. Their output is plausible but not correct by default. The senior's role shifts to spec-writing, context-feeding, and reviewing every diff. Guardrails — types, lint, tests, CI — are what catch mistakes the agent doesn't catch itself.

## Definition

An AI coding agent accepts a prompt plus optional repo context and produces code changes as diffs or file edits. Tools like Claude Code, Cursor, and GitHub Copilot operate at different granularities — inline completion, single-file generation, or multi-file agentic runs — but share one constraint: the model does not know your invariants, domain rules, or team conventions unless you encode them.

Productivity gains are real on bounded tasks: scaffolding components, writing tests from a spec, or adapting a known pattern. Gains drop on cross-cutting judgment — architecture changes, security-sensitive code, or anything where "correct" isn't visible in the local file.

## Where AI agents are and aren't effective

- Strong at boilerplate, test scaffolding, known-pattern refactors, and docs generation.
- Weak at cross-cutting concerns: auth flows, perf-sensitive hot paths, API contract changes.
- AI does not know your team conventions — it hallucinates plausible-looking code instead.
- Context quality determines output quality: types, tests, and a CLAUDE.md act as the spec.
- Longer agentic runs compound errors; review incremental diffs, not just the final state.

## Giving an agent useful context

### 1. Write a conventions file

A `CLAUDE.md` (or `.cursorrules`) at the repo root tells the agent your stack, naming conventions, banned patterns, and test strategy. One file replaces repeating the same context in every prompt.

### 2. Anchor to types and interfaces

Point the agent at your TypeScript interfaces and Zod schemas before asking it to implement anything. Strong types act as a machine-readable spec the agent can check its output against.

### 3. Use tests as a spec

Write or describe the expected test first, then ask the agent to make it pass. This constrains the solution space and gives you an objective pass/fail signal without reading every line of generated code.

### 4. Scope tasks tightly

One file or one function per agentic run. Multi-file tasks produce diffs too large to review carefully. Break work at natural boundaries; compose small correct pieces.

## AI coding tools at a glance

| Tool | Primary mode | Best for | Context window |
| --- | --- | --- | --- |
| **Claude Code** | Agentic CLI with file edits | Multi-step refactors, codebase-wide tasks | 200k tokens — reads whole repo |
| **Cursor** | IDE with inline + Composer modes | Single-file generation, inline completion | Composer reads selected files |
| **GitHub Copilot** | Inline completion + chat | Tab-completion, quick snippets | Open files and recent context |

## AI-assisted workflow trade-offs

**Pros**

- Boilerplate and test generation in seconds, not minutes.
- Faster onboarding to unfamiliar APIs when the agent reads the docs.
- Refactors across many files without manual search-and-replace.
- Frees senior time for architecture, review, and decision-making.

**Cons**

- Agent output is plausible, not correct — review burden shifts, not disappears.
- Agents ignore implicit conventions unless you encode them explicitly.
- Long agentic runs can introduce subtle cross-file inconsistencies.
- Over-relying on agents erodes the team's own understanding of the codebase.
- Security-sensitive diffs (auth, sanitization) carry extra review risk.

## Watch out: The human owns correctness

Review every diff before committing — the agent is not responsible for bugs that ship. CI is not a substitute for reading the diff; it catches what your tests cover, not what they don't. Never approve a diff you don't understand because the agent said it was correct. If a change touches auth, CSP headers, or data mutations, treat it as high-risk regardless of how clean it looks.

## Key terms

- **Agentic run**: A multi-step AI session that reads files, makes edits, and executes commands autonomously until the task completes or errors.
- **CLAUDE.md**: A repo-level conventions file Claude Code reads as persistent context — stack, patterns, banned APIs.
- **Diff review**: Reading every line of AI-generated changes before committing; the primary human quality gate.
- **Context window**: The maximum tokens the model can read in one session; limits how much repo code an agent sees.

## Related topics

- [Design-to-Code with MCP](https://fearchitect.com/topics/design-to-code-mcp.md): Feed real design tokens to an AI agent via MCP.
- [AI Chat UIs & MCP Tools](https://fearchitect.com/topics/mcp-tool-uis.md): Render tool calls, stream results, and gate risky actions behind human consent.
- [Frontend Testing Strategy](https://fearchitect.com/topics/frontend-testing.md): Test what the user sees, not how the code is wired.
- [CI/CD for Frontend](https://fearchitect.com/topics/ci-cd-frontend.md): Automated pipeline from commit to production with quality gates.
- [Framework MCP Servers (Live Docs for AI Agents)](https://fearchitect.com/topics/framework-mcp-servers.md): Stop agents hallucinating APIs by feeding them the framework's current types.

## Further reading

- [Claude Code — overview](https://code.claude.com/docs/en/overview)
- [GitHub Copilot — getting started](https://docs.github.com/en/copilot/getting-started-with-github-copilot)
- [Cursor — documentation](https://cursor.com/docs)