Prompting Strategies by Project Type

The Problem

You use the same prompting approach for every project. "Build me a login page" works okay for vanilla HTML but produces garbage for Next.js because you didn't specify App Router patterns. Your Rails prompt gets Ruby code that doesn't follow ActiveRecord conventions. AI gives you technically correct code that doesn't fit the framework.

The issue: Every framework has patterns, conventions, and gotchas. Generic prompts ignore these and produce code that works but doesn't belong.

AI knows thousands of frameworks, but you need to activate the right context. Different architectures need different prompting strategies.

The Core Insight

Effective prompts include three layers: what to build (feature), how to build it (patterns), and what to avoid (anti-patterns). The "how" and "avoid" parts are stack-specific.

Think of it as speaking the framework's dialect. React prompts mention hooks and composition. Rails prompts reference ActiveRecord and convention-over-configuration. Vanilla JS prompts emphasize web standards and progressive enhancement.

Framework-Specific Prompting Patterns

Next.js (App Router)

Context AI needs: App Router vs Pages Router, Server vs Client Components, new caching rules.

# BAD: Generic React prompt
"Create a blog post page that fetches data"

# GOOD: Next.js App Router-specific
"Create a blog post page using Next.js 14 App Router.

Requirements:
- Use Server Components for the post content
- Fetch data with async/await in the component (not getServerSideProps)
- Use 'use client' only for interactive comments section
- Implement route params: app/blog/[slug]/page.tsx
- Add metadata export for SEO

Follow Next.js 14 App Router patterns, not Pages Router."

React (Vite/CRA)

Context AI needs: Hooks vs classes, state management approach, TypeScript usage.

# Prompt pattern for React components:
"Create a [ComponentName] component using React 18.

Stack:
- React 18 with hooks (no class components)
- TypeScript with strict mode
- Zustand for global state (not Context)
- React Query for server state
- Tailwind for styling

Component should:
- [Feature description]
- Handle loading/error states
- Use proper TypeScript types (no 'any')

Follow React hooks best practices. Use useMemo/useCallback only when needed."

Ruby on Rails

Context AI needs: Rails version, Hotwire vs traditional REST, ActiveRecord patterns.

# Prompt for Rails feature:
"Create a Rails 7.1 feature for managing blog posts.

Stack:
- Rails 7.1 with Hotwire (Turbo + Stimulus)
- PostgreSQL
- ActiveStorage for images

Requirements:
- RESTful controller following Rails conventions
- Use Turbo Frames for inline editing
- Stimulus controller for rich text editor
- ActiveRecord validations and scopes
- System tests with Capybara

Follow Rails conventions:
- Fat models, skinny controllers
- Use concerns for shared behavior
- Service objects for complex business logic"

Django

Context AI needs: MTV pattern, Django ORM, forms vs serializers.

# Prompt for Django view:
"Create Django view for user profile editing.

Stack:
- Django 5.0
- Class-based views (not function views)
- Django forms (not DRF serializers)

Requirements:
- UpdateView for profile model
- Form with validation
- Image upload to media/
- Login required decorator
- Success message with Django messages framework

Follow Django best practices:
- Use get_object_or_404
- Proper form validation in clean() methods
- Template inheritance from base.html"

Laravel

Context AI needs: Eloquent ORM, Blade vs Inertia, Livewire patterns.

# Prompt for Laravel feature:
"Create a Laravel 11 resource for managing products.

Stack:
- Laravel 11
- Eloquent ORM
- Livewire 3 for interactive components
- Tailwind CSS

Requirements:
- Resource controller with route model binding
- Form requests for validation
- Livewire component for real-time search
- Eloquent relationships (Product hasMany Reviews)
- Database migrations with proper indexes

Follow Laravel conventions:
- Use route resource
- Validation via FormRequest classes
- Eloquent scopes for queries
- Gate/Policy for authorization"

Vanilla JavaScript (No Framework)

Context AI needs: Web standards, progressive enhancement, no build step.

# Prompt for vanilla implementation:
"Create a modal dialog using vanilla JavaScript.

Requirements:
- Zero dependencies, no framework
- Web standards: 
 element
- Progressive enhancement (works without JS)
- Accessible (ARIA, keyboard navigation)
- Works in all modern browsers (no transpilation)

Implementation:
- Use native 
 showModal()
- Event delegation for buttons
- CSS with modern features (grid, custom properties)
- No polyfills (assume evergreen browsers)

Avoid:
- jQuery patterns
- Framework-style abstractions
- Build step requirements"

Anti-Pattern Specifications

Just as important as what to do is what to avoid. Each framework has landmines:

Next.js: Avoid These

"DO NOT:
- Use getServerSideProps or getStaticProps (App Router)
- Import 'next/router' (use 'next/navigation')
- Use  tags (use  from next/link)
- Create API routes for data used in Server Components
- Default to 'use client' for everything"

"DO NOT:
- Use class components
- Mutate state directly
- Create unnecessary useEffect calls
- Use index as key in lists
- Put all state in Context (use proper state management)"

"DO NOT:
- Put business logic in views
- Use find() without error handling (use find_by or find_by!)
- Create N+1 queries (use includes/joins)
- Skip validations
- Use raw SQL when ActiveRecord query interface works"

# Specify versions to get modern patterns:
"Using Next.js 14 App Router (NOT Pages Router)..."
"Using React Router 6 (NOT v5 Switch/Route patterns)..."
"Using Vue 3 Composition API (NOT Options API)..."
"Using Python 3.12 (use match/case, not if/elif chains)..."

# .ai/stack-context.md

## Project Stack

- Framework: Next.js 14 (App Router)
- Language: TypeScript (strict mode)
- Styling: Tailwind CSS
- State: Zustand (global), React Query (server)
- Database: PostgreSQL with Prisma ORM
- Auth: Clerk
- Deployment: Vercel

## Conventions

- Server Components by default
- 'use client' only for interactivity
- All API calls via Server Actions or Route Handlers
- Type safety required (no 'any')
- Mobile-first responsive design

## File Structure

app/
  (auth)/         # Route groups for auth pages
  (dashboard)/    # Protected routes
  api/            # API routes (minimal, prefer Server Actions)
components/       # Shared components
lib/              # Utilities and config

## Prompting Template

When asking AI for features:
"Add [feature] to this Next.js 14 App Router project.
Follow the stack defined in .ai/stack-context.md.
[Feature-specific requirements]"

# Universal structure:
"Create [feature] for [framework + version].

Stack:
- [Key dependencies with versions]
- [State management approach]
- [Styling solution]

Requirements:
- [Functional requirements]
- [Non-functional requirements]

Follow [framework] best practices:
- [Convention 1]
- [Convention 2]

Avoid:
- [Anti-pattern 1]
- [Anti-pattern 2]"

# Copy-paste these at the start of prompts:

Next.js: "Next.js 14 App Router, TypeScript, Tailwind, Vercel"
React: "React 18, Vite, TypeScript, Zustand, React Query"
Rails: "Rails 7.1, Hotwire, PostgreSQL, Tailwind"
Django: "Django 5.0, PostgreSQL, htmx, Tailwind"
Vanilla: "Modern HTML/CSS/JS, no build step, no frameworks"