7 Mistakes Developers Make When Using AI Coding Tools: How to Fix Each One With Instructions

# Mistake 1 Fix: The Context Block
# Add this section to every prompt involving existing code

## Before (no context — produces conflicting code):
'Write a function to fetch user data and cache it'

## After (with context — produces integrated code):
'Write a function to fetch user data and cache it.

Existing pattern to match:
```typescript
// From src/hooks/useProducts.ts
export function useProducts() {
  return useQuery({
    queryKey: ['products'],
    queryFn: () => api.get('/products').then(r => r.data),
    staleTime: 5 * 60 * 1000
  })
}
```

API client in this project: src/lib/api.ts exports default axios instance named "api"
Query client: @tanstack/react-query v5
File to create: src/hooks/useUser.ts
Type for the response: src/types/User.ts already exists'

## What the context block must include for React projects:
1. One similar existing hook or component
2. Which libraries are actually installed (with versions if relevant)
3. The exact file path for the output
4. Any existing type definitions the output should use

# Mistake 2 Fix: The 90-Second Review Checklist
# Run this before accepting ANY AI-generated code

## Check 1: Imports (15 seconds)
For each import at the top of the generated file:
- Is this package in package.json?
- Is this import path correct for the current version?
- Does this import already exist in the project's code?

Flag: Any import not already used elsewhere in the project

## Check 2: API calls (20 seconds)
For any external API, database, or service call:
- Is this the current API method for this library version?
- Is authentication/authorization being applied?
- Is error handling present for the call?

Flag: API calls without error handling, API calls without auth where required

## Check 3: Scope creep (15 seconds)
Does the generated code include anything not in the original request?
Extra features look helpful but may conflict with existing behavior.

Flag: Any functionality not explicitly requested

## Check 4: Type safety (20 seconds)
For TypeScript projects:
- Are there any 'as any' type assertions?
- Are there any non-null assertions (!.) without a comment explaining why?
- Are all function parameters and return types typed?

Flag: any as any, any unnecessary non-null assertions

## Check 5: Edge cases (20 seconds)
Does the code handle:
- Empty or null values where the data might be missing?
- Loading states if this is async code?
- Error states if this makes a request or can throw?

Flag: Missing null checks, missing loading states, uncaught errors

// WHAT AI COMMONLY GENERATES (happy path only)
function UserProfile({ userId }: { userId: string }) {
  const { data: user } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId)
  })

  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  )
  // Missing: loading state, error state, null checks on user fields
  // Will crash if: query is loading (user is undefined),
  //               query fails, user.avatar is null
}

// WHAT TO ASK FOR INSTEAD
// Add to every component generation prompt:
// 'Include loading state, error state, and null checks on
//  all data fields. Use skeleton loaders for loading state.'

// WHAT THE PROMPT PRODUCES:
function UserProfile({ userId }: { userId: string }) {
  const { data: user, isLoading, isError } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId)
  })

  if (isLoading) return <UserProfileSkeleton />
  if (isError || !user) return <div>Could not load user profile</div>

  return (
    <div>
      {user.avatar && <img src={user.avatar} alt={user.name ?? 'User'} />}
      <h1>{user.name ?? 'Unknown User'}</h1>
      <p>{user.email ?? 'No email provided'}</p>
    </div>
  )
}