PROMPTS LIBRARY

I have a runtime error in my Next.js app. Here is the full stack trace:

```
[paste stack trace]
```

Analyze this error step by step:
1. Identify the root cause - not just the symptom.
2. Explain why this error occurs in plain language.
3. Provide the minimal code change to fix it.
4. Suggest a gua...

My Next.js app has a hydration mismatch error:

```
[paste the hydration warning from the console]
```

Relevant component code:

```tsx
[paste component]
```

Identify what differs between the server render and the client render. Show me the exact fix. If the component legitimately needs client-onl...

I have a React component that fetches data and updates state, but sometimes it shows stale data or the wrong result - likely a race condition.

Component code:

```tsx
[paste component]
```

Identify all potential race conditions. Rewrite the data-fetching logic using one of these patterns:
- AbortC...

I have a TypeScript error that I cannot resolve:

```
[paste the full error message including TS code]
```

Relevant code:

```tsx
[paste the code around the error]
```

Trace the type mismatch back to its origin. Show me the type chain from expected to actual. Provide the fix and explain whether th...

This component has logic that should be extracted into a custom hook:

```tsx
[paste component]
```

Extract the stateful logic into a custom hook. Requirements:
- Name the hook descriptively (useXxx pattern)
- Return a clean, minimal API
- Add TypeScript types for all parameters and return values
-...

These components pass props through multiple layers:

```tsx
[paste the component tree showing the prop drilling]
```

Refactor to use React Context. Provide:
1. A typed context with a provider component
2. A custom hook (useXxx) that throws if used outside the provider
3. Updated components consumi...

Convert this class component to a modern function component with hooks:

```tsx
[paste class component]
```

Requirements:
- Replace lifecycle methods with useEffect
- Replace this.state with useState or useReducer
- Preserve all existing behavior exactly
- Add TypeScript prop types if not already p...

Create a Next.js Server Action for this use case:

[describe the feature - e.g. "a contact form that sends an email"]

Requirements:
- Use Zod for input validation with descriptive error messages
- Return a typed result: { success: boolean; message: string; errors?: Record<string, string[]> }
- Hand...

I have a list of items fetched from an API. When the user deletes or updates an item, I want instant UI feedback while the mutation runs in the background.

Current code:

```tsx
[paste the component or describe the data flow]
```

Implement optimistic updates:
1. Update the UI immediately on user a...

Add keyboard shortcuts to this page/component:

```tsx
[paste component]
```

Shortcuts needed: [list shortcuts, e.g. "Cmd+K to open search, Escape to close"]

Requirements:
- Detect platform (Mac vs Windows) and show the correct modifier key
- Do not fire shortcuts when the user is typing in an inp...

Build a search feature for this data:

```ts
interface Item {
  [describe your data shape]
}
```

Requirements:
- Debounce the search input by 300ms
- Filter on [specify fields] using case-insensitive substring matching
- Show result count and "no results" state
- Highlight matching text in results
...

Write comprehensive unit tests for this function:

```ts
[paste function]
```

Use Vitest (or Jest). Cover:
- Happy path with typical inputs
- Edge cases (empty strings, zero, null, undefined, max values)
- Error cases that should throw
- At least one snapshot test if the output is a complex object
...

Write integration tests for this Next.js API route:

```ts
[paste the route handler]
```

Test the following with supertest or direct handler invocation:
1. Successful request with valid payload - assert status code and response shape
2. Invalid payload - assert 400 and error message
3. Missing auth...

Write a component test for this React component:

```tsx
[paste component]
```

Use React Testing Library and Vitest. Test:
1. Initial render - verify key elements are present
2. User interaction - click buttons, fill inputs, submit forms
3. Async behavior - wait for loading states to resolve
4. Acc...

Add JSDoc documentation to every exported function, type, and constant in this module:

```ts
[paste module]
```

Requirements:
- @param and @returns with TypeScript types
- @example with a realistic usage snippet
- @throws if the function can throw
- Keep descriptions concise - one sentence for sim...

Write a README.md for this internal package/module:

Package name: [name]
Purpose: [one sentence]
Main exports:

```ts
[paste the public API - exported functions, types, constants]
```

Include:
1. One-paragraph overview
2. Installation / import instructions
3. Quick start example
4. API reference t...

Document this TypeScript type system so a new team member can understand it:

```ts
[paste types, interfaces, generics, discriminated unions]
```

Provide:
1. A plain-language overview of the domain model
2. A type hierarchy diagram using ASCII or markdown
3. For each major type: purpose, when to us...

Review this code diff for correctness and potential issues:

```diff
[paste the diff or changed files]
```

Check for:
1. Logic errors - off-by-one, wrong comparisons, missing null checks
2. Security issues - injection, XSS, exposed secrets, missing auth checks
3. Performance - unnecessary re-render...

Audit this component for accessibility issues:

```tsx
[paste component]
```

Check against WCAG 2.1 AA:
1. Semantic HTML - correct heading levels, landmarks, lists
2. Keyboard navigation - all interactive elements focusable and operable
3. Screen reader support - aria labels, live regions, alt text...

Analyze this React component (or page) for performance issues:

```tsx
[paste component or page]
```

Look for:
1. Unnecessary re-renders - missing useMemo, useCallback, or React.memo
2. Large bundle impact - imports that should be dynamically loaded
3. Layout shifts - images without dimensions, lat...

Design a database schema for this feature:

[describe the feature and its data requirements]

Provide:
1. Table definitions with columns, types, and constraints
2. Primary keys and foreign key relationships
3. Indexes for common query patterns
4. A TypeScript interface for each table (for use with D...

Build a type-safe API client for this REST endpoint:

Base URL: [url]
Endpoints:
- GET /items - returns Item[]
- GET /items/:id - returns Item
- POST /items - body: CreateItemInput, returns Item
- PATCH /items/:id - body: Partial<CreateItemInput>, returns Item
- DELETE /items/:id - returns void

Req...

Write a data migration script for this schema change:

Before:
```ts
[paste current schema or types]
```

After:
```ts
[paste target schema or types]
```

Provide:
1. The migration SQL (or Prisma/Drizzle migration file)
2. A TypeScript script to backfill or transform existing data
3. A rollback plan...

Create a GitHub Actions workflow for a Next.js TypeScript project.

Triggers: push to main, pull requests

Steps:
1. Install dependencies (use pnpm or bun - specify caching)
2. Lint with ESLint
3. Type check with tsc --noEmit
4. Run unit tests with Vitest
5. Build the project
6. Deploy to [Vercel / ...

Write a production Dockerfile for a Next.js app with these requirements:

- Multi-stage build (deps, build, run)
- Use the standalone output mode
- Final image should be under 200MB
- Non-root user for security
- Health check endpoint
- Build-time args for environment variables
- Copy only the neces...

Set up runtime environment variable validation for a Next.js app.

Variables needed:
```
[list your env vars, e.g. DATABASE_URL, CLERK_SECRET_KEY, OPENAI_API_KEY]
```

Requirements:
- Use Zod to validate at build time and runtime
- Separate server-only and client (NEXT_PUBLIC_) variables
- Fail fast...