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...

Review this code with the eye of a senior engineer who cares about shipping reliable software:

```
[paste code]
```

For each issue found, provide:
1. The exact line or section
2. What the problem is
3. Why it matters (bug? perf? security? maintenance?)
4. The fix, as a code snippet

Prioritize by ...

Refactor this code to improve readability, maintainability, and correctness:

```
[paste code]
```

Constraints:
- Preserve all existing behavior exactly
- Do not change the public API (exports, function signatures)
- Explain each change and why it improves the code

Specifically look for:
1. Functi...

I have a bug in my application. Help me find and fix it.

Expected behavior:
[describe what should happen]

Actual behavior:
[describe what actually happens]

Relevant code:
```
[paste the code you think is related]
```

Steps to reproduce:
[list the steps]

Environment: [Node version, browser, OS i...

Write thorough tests for this code:

```
[paste function, component, or module]
```

Use [Vitest/Jest] with the following structure:

1. Happy path tests - typical usage with expected inputs
2. Edge cases:
   - Empty inputs (empty string, empty array, 0, null, undefined)
   - Boundary values (max in...

Design a REST API for this feature:

[describe the feature and its requirements]

Provide:
1. Endpoint list with HTTP methods, paths, and descriptions
2. Request/response types (TypeScript interfaces)
3. Error responses with appropriate status codes
4. Authentication requirements for each endpoint
5...

Design a database schema for this application:

[describe the app and its data requirements]

Provide:
1. Table definitions with columns, types, constraints, and defaults
2. Primary keys (prefer UUIDs or nanoids over auto-increment)
3. Foreign key relationships with ON DELETE behavior
4. Indexes for...

Analyze this code for performance issues and optimize it:

```
[paste code - can be a component, API route, utility, or full page]
```

Context: [describe traffic/load expectations]

Check for:
1. Unnecessary re-renders (React): missing memo, inline objects/functions
2. N+1 queries: sequential DB ca...

Audit this code for security vulnerabilities:

```
[paste code]
```

Check for these categories:
1. Injection: SQL injection, XSS, command injection, template injection
2. Authentication: missing auth checks, insecure token handling, session fixation
3. Authorization: broken access control, IDOR, pr...

Generate documentation for this codebase:

```
[paste the module, API, or component code]
```

Generate:
1. Module overview: what it does, when to use it, key concepts
2. API reference for every export:
   - Function signature with parameter descriptions
   - Return type and what it represents
   - ...

Plan a migration for this codebase change:

Current state:
```
[paste current code, schema, or architecture]
```

Target state:
```
[paste or describe the target]
```

Provide a step-by-step migration plan:
1. Pre-migration checklist (backups, feature flags, monitoring)
2. Migration steps in order, ...

Write a technical blog post about:

[topic]

Target audience: [beginner/intermediate/advanced] developers
Target length: [800/1200/2000] words

Structure:
1. Hook - open with a relatable problem or surprising fact (2-3 sentences)
2. Context - why this matters now, what changed (1 paragraph)
3. Core ...

Convert this article/blog post into a Twitter/X thread:

[paste article or provide URL]

Thread structure:
1. Hook tweet - the single most interesting insight or claim (stop-scrolling worthy)
2. Context tweet - why this matters (1-2 sentences)
3. Core tweets (5-8) - one key point per tweet, each can...

Write a developer newsletter issue from these updates:

[list recent articles, releases, tools, or news items]

Format:
1. Subject line - specific and curiosity-driven (not clickbait)
2. One-line personal intro (what I've been working on)
3. Main story (150-200 words) - the most important item, with...

Write a video script outline for a developer YouTube video:

Topic: [topic]
Target length: [5/10/15] minutes
Style: Faceless voiceover with screen recordings and visual assets

Structure:
1. HOOK (0:00-0:30): Start with the problem or result, not an intro
   - Show the end result first (demo)
   - "...

Generate a README.md for this project:

Project name: [name]
One-line description: [what it does]
Tech stack: [list technologies]

Main code:
```
[paste the main entry point or key module]
```

Generate:
1. Project title + badges (build status, npm version, license)
2. One-paragraph description
3. F...

Write a changelog entry for this release:

Version: [version number]
Release date: [date]

Changes (raw notes):
[paste git log, PR descriptions, or bullet points of what changed]

Format using Keep a Changelog conventions:

### Added
- New features (describe the user benefit, not the implementation)...

Write a pull request description for these changes:

```diff
[paste the git diff or describe the changes]
```

Context: [why this change is being made]

Format:
## Summary
[2-3 sentences describing the change and its motivation]

## Changes
- [bullet list of specific changes]

## Testing
- [ ] [chec...

Write a commit message for these changes:

```diff
[paste the diff]
```

Follow conventional commits format:

<type>(<scope>): <short description>

<body - explain WHY, not WHAT>

<footer - breaking changes, issue refs>

Types: feat, fix, refactor, docs, test, chore, perf, ci
Scope: optional, the ar...

Write a step-by-step technical tutorial:

Topic: [what the reader will build or learn]
Prerequisites: [what the reader should already know]
End result: [what they'll have when done]

Structure:
1. Introduction: What we're building and why (with a screenshot/demo of the final result)
2. Setup: Prereq...

Write a comparison article:

[Tool/Framework A] vs [Tool/Framework B]

Audience: Developers choosing between them for [use case]

Structure:
1. TL;DR: Table comparing key dimensions (3-5 rows)
2. Overview of each (2-3 sentences, no marketing language)
3. Comparison dimensions (dedicate a section to ...

You are a research agent. Your job is to deeply investigate a topic and produce a structured research report.

Topic: [topic]

Process:
1. Break the topic into 3-5 research questions
2. For each question, search for information using your available tools
3. Cross-reference multiple sources for accur...

You are a code review agent. You review pull requests with the thoroughness of a senior engineer who has seen production incidents.

Your review process:
1. Read the PR description to understand the intent
2. Review every changed file, considering:
   - Correctness: Does the logic do what it claims?...

You are a QA testing agent. Your goal is to find bugs before users do.

Application under test: [describe the app or feature]

Your testing approach:
1. Read the feature requirements or user stories
2. Generate test cases for:
   - Happy paths (expected usage)
   - Boundary conditions (min/max value...

You are a technical writing agent. You transform complex code and systems into clear, useful documentation.

Code/system to document:
```
[paste code, architecture diagram, or system description]
```

Your process:
1. Identify the audience (users, contributors, operators)
2. Map the architecture: co...

You are a DevOps agent responsible for infrastructure, deployment, and operational reliability.

System context:
[describe your stack, cloud provider, deployment target]

Your capabilities:
1. Write and debug CI/CD pipelines (GitHub Actions, etc.)
2. Configure infrastructure (Docker, Kubernetes, clo...

You are a data analysis agent. You turn raw data into actionable insights.

Data description:
[describe the dataset, schema, or paste a sample]

Analysis request:
[what questions should the data answer?]

Your process:
1. Understand the data: schema, types, cardinality, quality
2. Clean and validate...

You are a design critique agent. You evaluate UI designs with the standards of a principal designer at a top product company.

UI to review:
[paste component code, describe the screen, or provide a screenshot]

Evaluate against:
1. Visual hierarchy: Is the most important element the most prominent?
...

You are a performance auditing agent. You find and fix performance bottlenecks in web applications.

Application context:
[describe the app, stack, and what feels slow]

Audit checklist:
1. Network: Bundle size analysis, code splitting, lazy loading, image optimization
2. Rendering: Layout shifts (C...

You are a security scanning agent. You systematically check applications for vulnerabilities following OWASP guidelines.

Application context:
[describe the app, stack, auth system, and what data it handles]

Scan categories (check all):
1. A01 Broken Access Control: IDOR, missing auth checks, privi...

You are a project management agent. You break down large projects into manageable, shippable iterations.

Project description:
[describe what needs to be built]

Your process:
1. Clarify requirements: List assumptions, identify ambiguities, note risks
2. Define the MVP: The smallest version that del...