Cursor AI: Automating Lint Fixes and Test‑Driven Development

Overview

This guide follows the exact workflow shown in the Volo Builds video. You’ll:

1. Create a new React + Tailwind project with Cursor.
2. Write a comprehensive test suite first.
3. Let Cursor’s Agent run the tests, fix failures, and iterate until all tests pass.
4. Enable YOLO mode to let the agent automatically run commands (e.g., npm run build, tsc).
5. Use Cursor’s built‑in lint‑fixing and build‑validation features.

Prerequisites

• Cursor IDE installed (free plan with 2‑week Pro trial is fine).
• Node.js 20+ and npm.
• Basic familiarity with React, Tailwind, and Vitest.

Step‑by‑Step Instructions

1. Start a New Project

1. Open Cursor and create an empty folder.
2. In the AI chat panel, switch to Agent mode.
3. Prompt: Create a new React + Tailwind project using Vite.
4. Accept the generated commands and let Cursor run them.
5. Run npm run dev in the terminal to confirm the app starts.

2. Write Tests First

1. In the AI chat, switch to Ask mode.
2. Prompt: Write a comprehensive Vitest test suite for a landing page component that uses Tailwind. Include tests for headings, paragraphs, buttons, and responsive classes.
3. Cursor will create src/components/LandingPage.test.tsx and a stub src/components/LandingPage.tsx.
4. Review the tests; they should all fail initially.

3. Enable YOLO Mode

1. Go to File → Preferences → Cursor Settings.
2. Scroll to Features and enable YOLO Mode.
3. Add an allow list: npm run build, tsc, npm test.

4. Let the Agent Iterate Until Tests Pass

1. In the AI chat, switch back to Agent mode.
2. Prompt: Implement the LandingPage component to satisfy all tests.
3. Cursor will:
   • Generate implementation code.
   • Run vitest automatically.
   • If tests fail, fix the implementation and re‑run.
   • Repeat until all tests pass.
4. Watch the green “All tests passed” message.

5. Fix Build & Lint Errors Automatically

1. In the AI chat, prompt: Run tsc, eslint, and vitest. Fix any failures automatically.
2. Cursor will execute npx tsc --noEmit, npx eslint src/ --ext .ts,.tsx, and npx vitest run.
3. It will apply auto‑fixes where possible and iterate until the build passes.

6. Commit and Review

1. In the Source Control panel, review the changes.
2. Use Cursor’s Bug Finder (Command Shift P → Bug Finder) to scan for potential issues.
3. Commit with a generated message (Command Shift P → Generate Commit Message).

Tips & Gotchas

• Use Agent mode for code changes; Ask mode is better for questions or small tweaks.
• YOLO mode can be risky; enable it only after you’re comfortable with the agent’s behavior.
• If the agent starts adding unwanted files, stop the run and use Command I to exclude them from context.
• Keep the test suite focused on public API; avoid asserting internal implementation details.
• When tests fail repeatedly, double‑check that the test file itself hasn’t been modified by the agent.
• For large projects, split the workflow into separate chats: one for tests, one for implementation.

Resources

• Cursor website: https://www.cursor.com/
• Vite + React + Tailwind starter: https://github.com/vitejs/vite/tree/main/packages/create-vite
• Vitest docs: https://vitest.dev/
• ESLint: https://eslint.org/