Web Development with Cursor

A comprehensive guide to setting up Cursor for modern web development workflows.

---

Overview

Web development requires tight feedback loops between Cursor and external tools like Figma, browsers, and project management systems. This guide covers how to optimize your setup.

---

Recommended Workflow

1. Start with Chat for Scaffolding

Use Agent Chat (Cmd+I) for:

• Bootstrapping new components
• Setting up project structure
• Major feature implementations

2. Switch to Inline Edit for Refinement

Use Inline Edit (Cmd+K) for:

• Quick fixes
• Small modifications
• Targeted changes

3. Use Tab for Flow State

Tab autocomplete keeps you in flow:

• Accept suggestions with Tab
• Reject with Esc
• Works across all file types

---

Integrating External Tools

Figma Integration

Connect Figma designs directly to Cursor:

Setup:

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Usage:

• Select a frame in Figma
• Ask Cursor to implement the design
• Reference Figma components in prompts

Linear Integration

Connect your project management:

Setup:

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "Linear": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.linear.app/mcp"]
    }
  }
}

Usage:

List all issues related to this project

Browser Testing

Use Cursor Browser for live testing:

Open the app in browser and check for console errors

Navigate to login page and test the form

Take a screenshot of the current page

---

Project Rules for Web Development

UI Components Rule

Create .cursor/rules/ui-components/RULE.md:

---
description: Implementing designs and building UI
---

- Reuse existing UI components from `/src/components/ui`
- Create new components by orchestrating primitives
- Ask before creating missing components
- Follow existing naming conventions

React Patterns Rule

Create .cursor/rules/react/RULE.md:

---
description: React development patterns
globs: ["**/*.tsx", "**/*.jsx"]
---

- Use functional components with hooks
- Prefer composition over inheritance
- Use TypeScript for type safety
- Follow file naming: ComponentName.tsx

API Patterns Rule

Create .cursor/rules/api/RULE.md:

---
description: API and data fetching patterns
globs: ["**/api/**", "**/services/**"]
---

- Use our fetch wrapper from @lib/api
- Handle errors with try/catch
- Return typed responses
- Log errors to monitoring service

---

Framework-Specific Tips

React/Next.js

@Codebase What components are available in our design system?

Create a new page at /dashboard that shows user stats
using our existing Card and Chart components

Vue.js

Generate a Vue 3 composition API component for a
dropdown menu following our existing patterns

Tailwind CSS

Include your Tailwind config in context:

Using @tailwind.config.js, create a responsive
navigation component with our color scheme

---

Recommended Extensions

Extension	Purpose
ESLint	Code linting
Prettier	Code formatting
Tailwind CSS IntelliSense	Class completions
TypeScript	Type checking
GitLens	Git integration

---

Debugging Web Apps

Console Errors

Check the browser console and fix any errors

Network Issues

Debug the API call to /users - it's returning 401

UI Bugs

The modal is not closing when clicking outside.
Check the click handler in @Modal.tsx

---

Performance Tips

Large Projects

1. Use .cursorignore to exclude build folders:

   node_modules/
   dist/
   .next/

2. Index only relevant directories

3. Split large files into smaller modules

Fast Iteration

1. Use Tab for quick completions
2. Inline Edit for surgical changes
3. Agent Chat for complex tasks

---

Common Workflows

New Feature Implementation

1. Describe the feature in Agent Chat
2. Review the generated code
3. Refine with Inline Edit
4. Test in Cursor Browser
5. Commit changes

Bug Fixes

1. Describe the bug symptoms
2. Use Debug Mode for investigation
3. Apply fix with Inline Edit
4. Verify fix in browser
5. Add regression test

Refactoring

1. Use Plan mode to outline changes
2. Execute incrementally
3. Run tests after each step
4. Review all changes before commit

---

See Also

• SOP-006: Agent Chat
• SOP-012: MCP Server Setup
• Workflow: AI-Assisted Development