Windsurf Rules Directory

Explore a curated collection of rules.

How to write good rules?

The best rules are specific to the user and tell Cascade things that it would otherwise not know about the user and the codebase.

The following rules are curated by the Windsurf team and are examples of rules that can guide Cascade to better understand the user and their codebase, resulting in higher quality responses.

Windsurf Rules Image
# General Code Style & Formatting - Follow the Airbnb Style Guide for code formatting. - Use PascalCase for React component file names (e.g., UserCard.tsx, not user-card.tsx). - Prefer named exports for components. # Project Structure & Architecture - Follow Next.js patterns and use the App Router. - Correctly determine when to use server vs. client components in Next.js. # Styling & UI - Use Tailwind CSS for styling. - Use Shadcn UI for components. # Data Fetching & Forms - Use TanStack Query (react-query) for frontend data fetching. - Use React Hook Form for form handling. - Use Zod for validation. # State Management & Logic - Use React Context for state management. # Backend & Database Use Prisma for database access.

Next.js

Shadcn UI

# General Code Style & Formatting - Use functional and declarative programming patterns; avoid classes. - Prefer iteration and modularization over code duplication. - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError). - Structure files: exported component, subcomponents, helpers, static content, types. - Follow Expo's official documentation for setting up and configuring projects. # Naming Conventions - Use lowercase with dashes for directories (e.g., components/auth-wizard). - Favor named exports for components. # TypeScript Best Practices - Use TypeScript for all code; prefer interfaces over types. - Avoid any and enums; use explicit types and maps instead. - Use functional components with TypeScript interfaces. - Enable strict mode in TypeScript for better type safety. # Syntax & Formatting - Use the function keyword for pure functions. - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements. - Use declarative JSX. - Use Prettier for consistent code formatting. # Styling & UI - Use Expo's built-in components for common UI patterns and layouts. - Implement responsive design with Flexbox and useWindowDimensions. - Use styled-components or Tailwind CSS for styling. - Implement dark mode support using Expo's useColorScheme. - Ensure high accessibility (a11y) standards using ARIA roles and native accessibility props. - Use react-native-reanimated and react-native-gesture-handler for performant animations and gestures.

React Native

TypeScript

# General Code Style & Formatting - Use English for all code and documentation. - Always declare the type of each variable and function (parameters and return value). - Avoid using any. - Create necessary types. - Use JSDoc to document public classes and methods. - Don't leave blank lines within a function. - One export per file. # Naming Conventions - Use PascalCase for classes. - Use camelCase for variables, functions, and methods. - Use kebab-case for file and directory names. - Use UPPERCASE for environment variables. - Avoid magic numbers and define constants. # Functions & Logic - Keep functions short and single-purpose (<20 lines). - Avoid deeply nested blocks by: - Using early returns. - Extracting logic into utility functions. - Use higher-order functions (map, filter, reduce) to simplify logic. - Use arrow functions for simple cases (<3 instructions), named functions otherwise. - Use default parameter values instead of null/undefined checks. - Use RO-RO (Receive Object, Return Object) for passing and returning multiple parameters. # Data Handling - Avoid excessive use of primitive types; encapsulate data in composite types. - Avoid placing validation inside functions—use classes with internal validation instead. - Prefer immutability for data: - Use readonly for immutable properties. - Use as const for literals that never change.

TypeScript

- You are a PyTorch ML engineer - Use type hints consistently - Optimize for readability over premature optimization - Write modular code, using separate files for models, data loading, training, and evaluation - Follow PEP8 style guide for Python code

Python

- You are a data scientist who specializes in Python-based data science and machine learning - Use Python 3 as the primary programming language - Use PyTorch for deep learning and neural networks - Use NumPy for numerical computing and array operations - Use Pandas for data manipulation and analysis - Use Jupyter for interactive development and visualization - Use Conda for environment and package management - Use Matplotlib for data visualization and plotting

Python

- Do not give me code unless I explicitly ask for it. - Guide me in problem-solving instead of providing direct answers. - When I ask about programming concepts (e.g., "What is a hook?"), give me a direct and clear explanation. - Break problems into smaller, manageable steps and help me think through them. - Ask leading questions and provide hints instead of just telling me the answer. - Encourage me to debug independently before offering suggestions. - Refer me to relevant documentation instead of providing solutions. - Encourage modular thinking—breaking problems into reusable components. - Remind me to reflect on what I learned after solving an issue. - If I explicitly ask for code (e.g., "Give me the code"), then you can provide it.
- Encourage me to read and understand error messages instead of just fixing the issue for me. - Help me identify patterns in my mistakes so I can improve my debugging skills. - Suggest different approaches instead of leading me to one specific solution. - Guide me toward using console.log(), browser dev tools, and other debugging techniques. - Help me understand how to search effectively (e.g., Googling error messages or checking documentation
-# Core System Components - The main application logic is in src/core. - Shared utilities and helpers are in src/utils. - Feature flags and configuration settings are in src/config. # Cascade - Cascade's backend logic is in server/cascade_engine. - All API request handlers for Cascade are in server/cascade_api. - Cascade's task execution queue is managed in server/cascade_tasks/queue.py. # Frontend Code Structure - The UI components for the assistant are in frontend/components/assistant. - The AI command panel logic is handled in frontend/components/command_panel.tsx. - Styles for the AI interface are in frontend/styles/assistant.css. # Data & Storage - Vector embeddings are stored in server/data/vector_store. - User session history is saved in server/data/sessions. - Logs and analytics are collected in server/logs/usage_tracking.log. # Testing & Debugging - End-to-end tests for Cascade are in tests/e2e/cascade_tests. - Mock API responses for local testing are in tests/mocks/api_mocks.py. - Debugging scripts are located in scripts/debugging_tools.