Windsurf AI Prompts 2026:
60+ Templates for the Cascade Agent

I need you to implement a complete user authentication system for this Next.js app. It should include:
1. A /login page with email/password form
2. A /signup page with validation
3. JWT token handling in secure HTTP-only cookies
4. Protected route middleware that redirects unauthenticated users to /login
5. A useAuth() hook for accessing user state anywhere
6. A logout button in the header that clears the session

Use NextAuth.js with the credentials provider. Look at the existing codebase structure first, then implement everything needed without breaking existing functionality. Show me your plan before you start coding.

Refactor this JavaScript project to full TypeScript. Please:
1. Analyse the full codebase to understand all data structures and function signatures
2. Add proper TypeScript types and interfaces throughout
3. Create a types/ directory with shared interface definitions
4. Add a tsconfig.json with strict mode enabled
5. Fix any type errors that arise during conversion
6. Ensure the build still passes after refactoring

Work through the files systematically starting with the most shared utilities. Show me your plan and which files you'll touch before starting.

Add unit and integration tests to this codebase using Vitest and React Testing Library. First, analyse the most critical and complex files that have no tests. Then:
1. Write unit tests for the 5 most important utility functions
2. Write component tests for the 3 most critical UI components
3. Write integration tests for the main user flows (sign-up, checkout, etc.)
4. Set up coverage reporting and aim for 70%+ on critical paths

Show me your testing plan before you start writing any test files.

I need to add a [new_field] column to the [table_name] table in our PostgreSQL database with zero downtime. Please:
1. Analyse the current schema and all places that read/write this table
2. Write a safe migration script that adds the column as nullable first
3. Write a backfill script to populate existing rows
4. Update all relevant queries, ORM models, and API responses
5. Add the NOT NULL constraint only after backfill is complete

Walk me through the migration strategy and risk factors before generating any code.

Explain this code to me in plain English: @[filename]

I need to understand:
1. What problem is it solving and why does it exist in the codebase?
2. How does the main algorithm or logic work step by step?
3. What design patterns are being used and why?
4. What are the key assumptions and potential edge cases?
5. What should I know before modifying it without breaking something?

Assume I haven't worked on this part of the codebase before.

I want to add [feature description] to this codebase. Before writing any code, help me plan the approach:

1. Analyse the existing codebase to find relevant patterns and conventions already in use
2. Suggest 2-3 implementation approaches with their tradeoffs
3. Recommend which approach fits best with the existing architecture
4. Outline which files will need to change, in what order, and why

Only give me the plan. I'll review it and ask you to implement once I approve.

There's a bug in @[filename] — [describe the symptom, e.g. "the form submits but the user isn't saved to the database"].

Before fixing anything, please:
1. Trace through the code and identify the root cause
2. Explain why the bug happens in plain English
3. Show me the exact line(s) where the problem originates
4. Describe the fix you would make and why it's the right approach

Only explain — don't change any code yet. I want to understand before we fix.

Review @[filename] as if you were a senior engineer doing a pull request review. Check for:
- Logic errors or off-by-one mistakes
- Missing error handling or edge cases
- Performance issues (unnecessary re-renders, N+1 queries, etc.)
- Security concerns (XSS, injection, exposed secrets, etc.)
- Code quality issues (naming, duplication, complexity)
- Anything that violates the patterns I see elsewhere in this codebase

List all issues with severity (Critical / High / Medium / Low) before suggesting any fixes.

I'm getting this error in production:

[paste full error message and stack trace]

The error occurs when [describe what the user does to trigger it].

Please:
1. Analyse the stack trace and identify the root cause
2. Find the relevant code in @[filename or component]
3. Explain what's going wrong in plain English
4. Provide the fix with an explanation of why it resolves the issue
5. Check if the same issue could exist elsewhere in the codebase

I have an intermittent bug that seems to be a race condition or async issue. It only happens sometimes when:
[describe the scenario]

The relevant code is in @[filename].

Please:
1. Identify all the async operations involved and their execution order
2. Find where race conditions or timing issues could occur
3. Explain the specific sequence of events that causes the bug
4. Provide a fix that eliminates the race condition properly
5. Suggest how to write a test that would catch this in future

This test is failing and I don't understand why:

[paste the failing test code and error output]

Please:
1. Analyse both the test and the implementation it's testing
2. Identify why the test fails — is it a bug in the code or in the test itself?
3. If it's a code bug, show me the fix
4. If the test is wrong, explain what it should actually be testing
5. Check whether any other tests might be affected by the same underlying issue

This component/function is slow: @[filename]

Performance issue description: [e.g. "re-renders 20+ times when a user types in the search box"]

Please:
1. Identify all the performance bottlenecks in this code
2. Explain what's causing each issue (unnecessary re-renders, missing memoisation, expensive computation in render, etc.)
3. Prioritise the top 3 issues by impact
4. Show me the exact changes needed to fix each one
5. Estimate the expected improvement for each fix

Add a comprehensive JSDoc/TSDoc comment block to this function. Include:
- A one-sentence summary of what the function does
- @param tags for every parameter with type and description
- @returns tag describing the return value and its type
- @throws if any errors can be thrown
- @example with a realistic usage example
- Any important side effects or caveats

Keep it accurate to what the code actually does — don't describe what it should do.

This component fetches data but has no loading or error handling. Add all three states:

1. Loading state — show a skeleton loader that matches the shape of the loaded content
2. Error state — show a user-friendly error message with a Retry button that re-fetches
3. Empty state — show a helpful empty state message if the data array is empty or null

Use the same styling patterns already present in this codebase. Don't change the data-fetching logic — only add the UI states around it.

This component only works well on desktop. Make it fully responsive:

1. Implement mobile-first CSS with proper breakpoints for mobile, tablet, and desktop
2. Ensure all tap targets are at least 44px for touch screens
3. Replace any hover-only interactions with alternatives that work on touch
4. Stack layout elements that are side-by-side on desktop when on mobile
5. Test that text is readable without zooming on a 375px viewport

Don't change the logic or data — only the layout and responsive behaviour.

This database query is slow and causing performance issues:

[paste the query]

Please:
1. Identify what's causing the slowness (missing index, full table scan, N+1, cartesian product, etc.)
2. Suggest the right index or indexes to add and explain why
3. Rewrite the query if it can be made more efficient
4. Check if similar slow patterns exist in nearby queries
5. Estimate the performance improvement from your changes

Show the EXPLAIN output interpretation if relevant.

I'm building a [describe the project — e.g. "SaaS dashboard with multi-tenancy and role-based access control"] using [tech stack].

Before I write any code, help me design the folder and file structure:
1. Propose a directory layout with explanations for each top-level directory
2. Show where feature modules, shared utilities, and config files should live
3. Explain the naming conventions you'd use and why
4. Highlight any structural decisions that will be hard to change later
5. Show an example of where a specific feature (e.g. auth, billing) would live in this structure

Review the API design in @[filename or route folder]. I want to know:
1. Does the URL structure follow RESTful conventions? Where does it deviate?
2. Are HTTP methods used correctly (GET for reads, POST for creates, etc.)?
3. Are there any response shape inconsistencies across endpoints?
4. Is there anything that would make this API painful to consume as a frontend developer?
5. What changes would you recommend to improve consistency and usability?

Suggest concrete changes with before/after examples.

Do a technical debt audit of @[filename or directory]. I want to understand:
1. What are the biggest maintainability problems in this code?
2. What will become a major problem as the codebase scales?
3. What's safe to leave for now vs. what needs to be fixed soon?
4. Are there any security or performance time bombs hiding in here?
5. If you had to prioritise a refactor list, what are the top 5 items?

Be honest and direct — I want to know the real state of this code.

Review how state is managed in this application by looking at @[relevant files]. I need to know:
1. What state management approach is being used and is it appropriate for the app's scale?
2. Where is state being held too high or too low in the component tree?
3. Is there any redundant or duplicated state that could cause sync issues?
4. Where is server state being mixed up with UI state (and is that causing bugs)?
5. What would you recommend changing about the state architecture and in what order?