Windsurf - Cheatsheet

Overview

Estimated time: 10โ€“15 minutes (reference material)

Quick reference guide for Windsurf's AI-powered features, keyboard shortcuts, and workflow automation. Perfect for maximizing productivity with Codeium's AI editor.

Tip: Windsurf excels at understanding entire codebases and maintaining context across complex projects. Use this cheatsheet to leverage its unique strengths.

Essential Keyboard Shortcuts

AI Features

Cmd+I / Ctrl+I     - AI chat interface
Cmd+K / Ctrl+K     - Quick AI command
Cmd+Shift+I        - Codebase-wide AI
Alt+C              - AI code completion
Cmd+.              - AI quick actions
Tab                - Accept AI suggestion

Workflows

Cmd+Shift+W        - Create workflow
Cmd+R / Ctrl+R     - Run workflow
Cmd+Shift+R        - Repeat last workflow
Cmd+Alt+W          - Workflow history
F5                 - Refresh workflow
Cmd+Shift+F5       - Force workflow restart

Code Navigation

Cmd+P / Ctrl+P     - Quick file search
Cmd+Shift+P        - Command palette
Cmd+T / Ctrl+T     - Symbol search
Cmd+G / Ctrl+G     - Go to line
F12                - Go to definition
Cmd+F12            - Go to implementation

Multi-file Operations

Cmd+Shift+A        - AI refactor across files
Cmd+Alt+F          - Find and replace all files
Cmd+Shift+O        - Organize imports globally
Cmd+Alt+R          - Rename symbol globally
Cmd+Shift+D        - Duplicate across files

AI Chat Commands

Context References

File References

@file:path/to/file.js  - Reference specific file
@folder:src/           - Reference entire folder  
@function:myFunction   - Reference function
@class:MyClass         - Reference class
@current               - Reference current file
@selection             - Reference selected code

Project References

@project               - Entire project context
@dependencies          - Package.json dependencies
@config                - Configuration files
@tests                 - Test files
@docs                  - Documentation files
@git                   - Git changes and history

Quick Commands

Code Generation:
/component [name]      - Generate React component
/hook [name]           - Generate custom hook
/api [endpoint]        - Generate API route
/test [function]       - Generate test cases
/type [name]           - Generate TypeScript types

Code Analysis:
/explain               - Explain selected code
/review                - Code review suggestions
/optimize              - Performance optimization
/security              - Security analysis
/refactor              - Refactoring suggestions

Documentation:
/docs                  - Generate documentation
/readme                - Update README
/comments              - Add code comments
/changelog             - Update changelog

Workflow Automation

Built-in Workflows

Development Workflows

- Feature Implementation
- Bug Fix Process  
- Code Refactoring
- Test Generation
- API Integration
- Component Creation

Maintenance Workflows

- Dependency Updates
- Code Cleanup
- Performance Audit
- Security Scan
- Documentation Sync
- Git Workflow

Custom Workflow Examples

# Feature Implementation Workflow
name: "New Feature"
steps:
  - create_component:
      name: "{{ feature_name }}"
      type: "functional"
  - add_tests:
      framework: "jest"
      coverage: "80%"
  - update_routes:
      path: "/{{ feature_name }}"
  - generate_docs:
      format: "markdown"
# Code Review Workflow  
name: "Code Review"
steps:
  - analyze_changes:
      scope: "git_diff"
  - check_standards:
      rules: "eslint"
  - security_scan:
      level: "strict"
  - generate_report:
      format: "markdown"

Codebase Understanding

Architecture Analysis

Project Structure

  • "Analyze the project architecture"
  • "Show me the data flow"
  • "Map component dependencies"
  • "Identify design patterns used"

Code Quality

  • "Find potential performance issues"
  • "Identify code duplication"
  • "Check for security vulnerabilities"
  • "Suggest architectural improvements"

Smart Context Queries

Business Logic:
- "Where is user authentication handled?"
- "How are payments processed?"
- "What's the error handling strategy?"
- "Show me the API integration points"

Technical Debt:
- "What code needs refactoring?"
- "Which components have poor test coverage?"
- "What dependencies are outdated?"
- "Where are the performance bottlenecks?"

Advanced Features

Multi-file Refactoring

Large-scale Changes

Prompts:
"Convert all class components to hooks"
"Migrate from Redux to Zustand"  
"Update all API calls to use new auth"
"Convert JavaScript files to TypeScript"

Pattern Updates

Examples:
"Apply the factory pattern to all services"
"Add error boundaries to all route components"
"Implement consistent logging everywhere"
"Add loading states to all async operations"

Intelligent Code Generation

Context-Aware Generation:
- Understands existing patterns and conventions
- Maintains consistency with codebase style
- Respects architectural decisions
- Follows project-specific best practices

Example:
"Add a new user management feature following the same patterns as the existing admin panel"
โ†’ Windsurf analyzes admin panel structure and replicates the architecture

Configuration & Settings

AI Model Configuration

{
  "windsurf.ai.model": "codeium-latest",
  "windsurf.ai.contextWindow": "large",
  "windsurf.ai.temperature": 0.2,
  "windsurf.ai.enableCodebaseIndex": true,
  "windsurf.ai.maxSuggestions": 5
}

Workflow Settings

{
  "windsurf.workflows.autoSave": true,
  "windsurf.workflows.parallelExecution": true,
  "windsurf.workflows.errorHandling": "graceful",
  "windsurf.workflows.confirmationLevel": "minimal"
}

Performance Optimization

{
  "windsurf.performance.enableCache": true,
  "windsurf.performance.indexingStrategy": "smart",
  "windsurf.performance.memoryLimit": "4GB",
  "windsurf.performance.backgroundProcessing": true
}

Integration Capabilities

Git Integration

Git-aware Features

  • Analyze commit history
  • Generate commit messages
  • Review pull requests
  • Conflict resolution assistance

Branch Management

  • Feature branch workflows
  • Merge conflict detection
  • Code review automation
  • Release preparation

Package Manager Integration

Commands:
- "Update all dependencies safely"
- "Find security vulnerabilities"
- "Suggest alternative packages"
- "Optimize bundle size"
- "Check for unused dependencies"

Debugging & Troubleshooting

AI-Powered Debugging

Error Analysis

Features:
- Automatic error detection
- Root cause analysis
- Fix suggestions
- Prevention strategies

Debug Commands

Cmd+Shift+D  - Start debugging session  
F9           - Toggle breakpoint
F10          - Step over
F11          - Step into
Shift+F11    - Step out

Performance Analysis

Analysis Types:
- Bundle size analysis
- Runtime performance profiling
- Memory usage optimization  
- Database query optimization
- API response time analysis

Team Collaboration

Shared Workflows

# Team workflow configuration
team_standards:
  code_style: "prettier + eslint"
  testing_framework: "jest"
  documentation: "jsdoc"
  git_workflow: "gitflow"

shared_workflows:
  - name: "feature_branch"
    trigger: "branch_create"
    steps: ["create_tests", "update_docs", "run_checks"]
  
  - name: "code_review"
    trigger: "pull_request"
    steps: ["lint_check", "test_run", "security_scan"]

Code Standards Enforcement

Automatic Checks

  • Code style consistency
  • Naming convention compliance
  • Documentation requirements
  • Test coverage thresholds

Quality Gates

  • Pre-commit validation
  • Pull request requirements
  • Deployment readiness
  • Performance benchmarks

Project Templates

Frontend Templates

React Templates:
- react-typescript-starter
- react-nextjs-fullstack  
- react-native-expo
- react-electron-desktop

Vue Templates:
- vue3-composition-starter
- nuxt3-fullstack
- vue-electron-app

Backend Templates

Node.js Templates:
- express-typescript-api
- nestjs-microservices
- fastify-graphql
- serverless-functions

Python Templates:
- fastapi-async
- django-rest-api
- flask-microservice

Best Practices

Effective Prompting

Context Optimization

  • Reference relevant files explicitly
  • Provide architectural context
  • Mention existing patterns
  • Specify quality requirements

Workflow Design

  • Break complex tasks into steps
  • Define clear success criteria
  • Include validation checkpoints
  • Plan for error scenarios

Code Quality Maintenance

Regular Practices:
- Weekly dependency updates
- Monthly performance audits  
- Quarterly architecture reviews
- Continuous test coverage monitoring

Automation Rules:
- Auto-format on save
- Run tests before commit
- Generate docs on build
- Update changelog on release

Troubleshooting Guide

Common Issues

Performance Issues

  • Reduce context window size
  • Clear codebase index
  • Disable unused workflows
  • Restart AI service

Context Issues

  • Rebuild project index
  • Check file inclusion patterns
  • Verify workspace configuration
  • Clear conversation history

Debug Commands

System Commands:
- windsurf.restart-ai-service
- windsurf.clear-cache
- windsurf.rebuild-index
- windsurf.show-logs
- windsurf.check-health
- windsurf.export-settings

Advanced Customization

Custom AI Instructions

# .windsurf/config.yaml
ai_instructions:
  code_style:
    - "Use functional programming patterns"
    - "Prefer composition over inheritance"
    - "Always include error handling"
    - "Add comprehensive TypeScript types"
  
  documentation:
    - "Include JSDoc for all public functions"
    - "Add README for each module"
    - "Document API endpoints with OpenAPI"
  
  testing:
    - "Minimum 80% test coverage"
    - "Use AAA pattern for tests"
    - "Mock external dependencies"

Workspace Configuration

{
  "windsurf.workspace.name": "MyProject",
  "windsurf.workspace.type": "fullstack",
  "windsurf.workspace.frameworks": ["react", "node", "typescript"],
  "windsurf.workspace.patterns": {
    "components": "src/components/**/*.tsx",
    "tests": "**/*.test.{js,ts,tsx}",
    "configs": "*.config.{js,ts,json}"
  }
}

Next Steps

Continue mastering Windsurf with these resources: