AI-Assisted Development: GitHub Copilot, Cursor & Prompt Engineering

// Technique 1: Descriptive comments drive better completions

// ✅ GOOD COMMENT: Specific, detailed, includes edge cases
// Validate email address using RFC 5322 regex.
// Returns true for valid emails, false otherwise.
// Must handle: subdomains, plus aliases (user+tag@domain.com),
// and reject emails without TLD.
function validateEmail(email: string): boolean {
  // Copilot generates accurate regex based on the detailed comment
}

// ❌ BAD COMMENT: Too vague — Copilot guesses
// validate email
function validateEmail(email) {
  // Copilot may generate incomplete validation
}

// Technique 2: Type signatures provide context
interface BlogPost {
  id: string;
  title: string;
  content: string;
  tags: string[];
  published: boolean;
  createdAt: Date;
}

// Copilot sees the type and generates correct implementation
function filterPublishedPosts(posts: BlogPost[]): BlogPost[] {
  // Copilot: return posts.filter(post => post.published);
}

// Technique 3: Copilot Chat commands
// /explain — Explain this complex regex
// /fix — Suggest fixes for this error
// /tests — Generate unit tests for this function
// @workspace — "Where is the authentication middleware?"

// Cursor Cmd+K (inline edit) — Example prompts

// Select a function, press Cmd+K, type:
"Add comprehensive error handling with try-catch,
 log errors with context, and return appropriate HTTP status codes"

// Select a React component, press Cmd+K, type:
"Convert to Server Component. Move data fetching inside the component
 using async/await. Extract interactive parts into a Client Component."

// Cursor Chat (Cmd+L) — Reference files with @

// In chat, type:
"@user.service.ts @user.routes.ts
 Add pagination to the user listing endpoint.
 Use keyset pagination (not OFFSET).
 Return cursor for next page."

// Cursor Composer — Multi-file edits
// Open Composer, describe the change:
"Add a 'bookmark' feature:
 1. Create a BookmarkButton client component
 2. Add POST /api/bookmarks endpoint
 3. Add bookmark count to the post listing query
 4. Update the BlogCard component to show bookmark count"
// Cursor edits all 4 files with diff preview

// CRISP Prompt Template for Code Generation

// PROMPT:
// Context: Next.js 15 App Router with TypeScript, using Prisma ORM
//   and Zod validation. Follow patterns in @user.service.ts.
//
// Requirements:
// - Create a blog post creation endpoint
// - Validate: title (3-200 chars), content (min 10 chars), 
//   category (enum: Frontend, Backend, Database, DevOps, QA)
// - Authenticate user via JWT (use @auth.middleware.ts pattern)
// - Return 201 with created post, or 400/401/409 with error
//
// Interface:
// - Input: { title: string, content: string, category: Category }
// - Output: { id: string, title: string, ... } | { error: string }
//
// Style: 
// - Use early returns for error cases
// - Log with structured logging (request.log)
// - Use custom AppError classes from @errors.ts
//
// Patterns: Follow the createUser pattern in @user.service.ts

// RESULT: AI generates production-quality code that matches your
// existing codebase patterns, error handling, and validation style.

// AI Code Review Prompts

// Security Review:
"Review this code for security vulnerabilities:
 - SQL injection
 - XSS (cross-site scripting)
 - CSRF
 - Authentication/authorization bypasses
 - Sensitive data exposure in logs or responses
 - Insecure cryptography"

// Performance Review:
"Review this code for performance issues:
 - N+1 queries
 - Missing database indexes
 - Unnecessary re-renders in React
 - Large bundle imports that should be lazy-loaded
 - Missing caching opportunities"

// Error Handling Review:
"Review this code for error handling gaps:
 - Unhandled promise rejections
 - Missing try-catch in async functions
 - Generic error messages (leaking internal details)
 - Missing input validation
 - Incomplete cleanup in error paths"

// Architecture Review:
"Review this code for architecture issues:
 - Tight coupling between modules
 - Business logic in route handlers (should be in services)
 - Missing dependency injection
 - Violations of single responsibility principle"

// Prompt for test generation:
// "Generate comprehensive Vitest + React Testing Library tests for
//  the LoginForm component (@LoginForm.tsx).
//  Test these scenarios:
//  1. Successful login → shows welcome message
//  2. Invalid email → shows validation error
//  3. Wrong password → shows 'invalid credentials' error
//  4. Network error → shows 'something went wrong' message
//  5. Submit button disabled during loading
//  6. Password field is type='password' (not visible)
//  Use MSW for API mocking. Follow patterns in @auth.test.ts."

// AI generates tests like:
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { server } from '../test/mocks/server';
import { LoginForm } from './LoginForm';

describe('LoginForm', () => {
  const user = userEvent.setup();

  it('successful login shows welcome message', async () => {
    render(<LoginForm />);
    await user.type(screen.getByLabelText(/email/i), 'ash@ih.com');
    await user.type(screen.getByLabelText(/password/i), 'secure123');
    await user.click(screen.getByRole('button', { name: /sign in/i }));
    await waitFor(() => {
      expect(screen.getByText(/welcome/i)).toBeInTheDocument();
    });
  });

  it('network error shows error message', async () => {
    server.use(
      http.post('/api/auth/login', () => HttpResponse.error())
    );
    render(<LoginForm />);
    await user.type(screen.getByLabelText(/email/i), 'ash@ih.com');
    await user.type(screen.getByLabelText(/password/i), 'pass');
    await user.click(screen.getByRole('button', { name: /sign in/i }));
    await waitFor(() => {
      expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();
    });
  });
  // ... 4 more test cases
});