StarterApp Docs
AI Workflow

Overview

AI-assisted development patterns and tooling for consistent code generation

The codebase implements AI-first development through context engineering, pattern templates, and automated validation. AI assistants understand the complete architecture and generate code that follows established conventions.

Core Components

The AI workflow relies on four interconnected systems that work together to ensure consistent, production-ready code generation.

Context Documentation

Documentation files in /llms/ provide comprehensive codebase knowledge. AI assistants read these files to understand architectural decisions, security requirements, and development patterns.

Pattern Templates

Reference implementations in /llms/templates/ provide complete, production-ready code patterns. Templates include security measures, validation schemas, and error handling.

llms/templates/
llms/templates/ ├── auth-api-route-template.ts # Protected API with CSRF ├── auth-page-template.tsx # Protected page layout ├── auth-server-component-template.tsx # Server component patterns ├── next-safe-action-template.ts # Safe Actions v8 ├── server-action-template.ts # Server action with validation ├── billing-api-gating-template.ts # Subscription gating ├── billing-component-template.tsx # Billing UI components ├── db-component-template.tsx # Convex data access └── test-integration-template.test.tsx # Integration testing

Pro Tip

AI assistants reference these templates when generating new code. Instead of inventing patterns, they copy and adapt existing implementations, ensuring consistency and security.

IDE Integration

Pre-configured files for multiple IDEs enable immediate AI assistance without manual setup.

Validation Pipeline

Automated checks catch errors in AI-generated code before they reach production. The pipeline runs TypeScript compilation, linting, formatting, and tests.

Validation commands
# Full validation suite pnpm validate # Individual checks pnpm typecheck # TypeScript compilation pnpm lint # ESLint + Biome pnpm format # Prettier + Biome pnpm test # Vitest + Playwright

Heads up

AI-generated code must pass all validation checks before committing. The pipeline ensures type safety, code quality, and test coverage requirements are met.

Development Workflow

The development process follows a structured four-phase approach that ensures quality and consistency.

Research Phase

AI analyzes existing patterns in the codebase. It searches for similar implementations, identifies relevant templates, and understands the architectural context.

Research tools
# AI uses these approaches: - Pattern search: Find similar features - Template reference: Identify applicable templates - Context loading: Read relevant documentation

Planning Phase

AI proposes an implementation approach based on research findings. The plan references specific files, templates, and patterns to follow.

Plans include file structure, dependency ordering, validation steps, and rollback procedures.

Implementation Phase

AI generates code using identified templates and patterns. Generated code follows existing conventions, includes proper validation, and maintains security requirements.

Implementation occurs task-by-task, with validation checkpoints between steps.

Validation Phase

Automated quality checks verify the implementation. TypeScript compilation, linting, and tests run to catch errors.

Validation workflow
# Checkpoint validation pnpm typecheck # Type safety pnpm lint # Code quality pnpm test # Test coverage # Full validation before commit pnpm validate

If validation fails, AI fixes issues and re-runs checks until all pass.

IDE Setup Guides

Detailed configuration instructions for each supported IDE.

Next Steps