Framework Components

Framework components represent the vocabulary of your tech stack. AI models have learned these patterns from training data, and referencing them correctly unlocks better code generation.

Why Framework Knowledge Matters

AI has seen millions of examples of popular frameworks. When you use correct terminology:

• AI generates idiomatic code
• Patterns match framework conventions
• Integration with existing code improves
• Less correction needed

Common Framework Components by Stack

React/Next.js:

• Server Components / Client Components
• App Router conventions
• Hooks (useState, useEffect, etc.)
• Suspense boundaries
• Loading and error states

Backend patterns:

• Controllers and routes
• Middleware
• Repository pattern
• Service layers
• Dependency injection

Database:

• Models and schemas
• Migrations
• Query builders
• Relations and joins
• Transactions

Communicating Framework Components to AI

Vague: "Create a page"

Specific: "Create a Next.js App Router page with:

• Server component for data fetching
• generateMetadata for SEO
• Loading state component
• Error boundary"

Building Your Framework Vocabulary

1. Know your stack's core concepts
2. Use official terminology in prompts
3. Reference specific APIs and patterns
4. Include framework version when relevant

The more precisely you describe framework components, the more accurate AI output becomes.