🔒Confidential — Internal Only

AI Frontend

TL;DR — One man army. Using AI to 10x your frontend workflow — not by magic, but by building systems and habits that compound.

The Philosophy

One-man show = You do everything alone, slowly. One-man army = AI handles the grunt work, you handle the architecture.

The difference is leverage.

Core Principles

1. Prompt Engineering is Programming

Your prompts are code. Version them. Iterate on them. Build a personal library.

You're a Senior Frontend Engineer at [COMPANY]. You follow these conventions:
- File structure: feature-based with shared/ui/core split
- Styling: Tailwind CSS, functional classes
- State: Zustand for global, useState for local
- Types: TypeScript strict mode

When I describe a feature, output:
1. File structure
2. Implementation code
3. Key decisions & trade-offs

2. Context is King

Give AI what you'd give a junior dev:

Architecture overview
Existing patterns in codebase
Constraints and non-negotiables
What you've already tried

3. Scaffold First, Refine Second

Don't ask for complete implementations. Ask for:

Skeleton + directory structure
Boilerplate with placeholders
Patterns you can iterate on

Then code-review and refine.

AI Workflows

Code Generation

Task	Approach	Expected Output
New component	Describe UI + behavior + constraints	Full component with types
Refactor	Show before + target pattern	Diff with explanations
Test	Give component + edge cases	Unit + integration tests
Migration	Current code + target stack	Step-by-step migration

Debugging

I'm getting [ERROR]. I've tried:
1. [Attempt 1]
2. [Attempt 2]

My current hypothesis: [Your guess]
Environment: [Relevant config]

Help me verify or disprove my hypothesis.

Learning

Don't just ask "how do I use useSyncExternalStore". Ask: "Show me a real-world example of useSyncExternalStore in a TanStack Query integration, with proper cleanup and error handling."

Tools & Setup

The Stack

Primary: Claude Code (CLI-first, agentic)
Code Assistant: Cursor / Zed with LLM integration
Research: Perplexity / Web Search for docs
Testing: Playwright + AI-generated tests

Environment Setup

/
├── .claude/
│   ├── commands/     # Custom slash commands
│   └── prompts/      # Reusable prompt templates
├── ai-scaffolds/    # Saved component patterns
└── docs/
    └── decisions/    # ADRs for architectural choices

Patterns That Work

1. The 80/20 Rule

Let AI handle 80% of boilerplate. You focus on 20% that matters:

Architecture decisions
Edge cases
Performance optimization
User experience

2. Batch Context

Don't chat one message at a time. Write a comprehensive brief:

Context: [Project state]
Task: [What you need]
Format: [How you want it]
Constraints: [What's off-limits]

3. Always Review

AI generates. You verify. Never ship AI code without understanding it.

Anti-Patterns

❌ Asking "build me a React app" without specs ❌ Pasting entire codebase and expecting magic ❌ Accepting first output without iteration ❌ Using AI as a crutch instead of a lever

What's Next

Building out:

Prompt library for common frontend tasks
Scaffold templates for new features
Testing strategies powered by AI
Code review automation

Contributors welcome. This is my personal playbook — steal what works.

Introduction