Roo Code Tips & Tricks

repository·main·Indexed 19 days ago

https://github.com/michaelzag/roocode-tips-tricks

A collection of utilities, documentation, and frameworks to optimize the Roo Code AI coding assistant experience. It features the Handoff Manager system for context management, custom mode configuration, and handling large files through automated conversation extraction, milestone organization, and a modular system prompt assembly process.

Tokens
83K
Snippets
191
Records
359
Agent score
64%

What's inside roocode-tips-tricks

  1. What is the Handoff Manager system?

    main

    The Handoff Manager is a system designed to facilitate and manage handoffs between developers. It provides a structured way to transfer context and tasks using Roo-Code. The system consists of:

    • Custom modes for Roo-Code: Specialized operational modes.
    • System prompts: Components used to build handoff management prompts.
    • Utility scripts: Tools for creating handoffs and managing milestones.
    • Documentation: Guides for end-users.
  2. Access Roo Code technical documentation

    main
    The personal_roo_docs/technical/ directory contains in-depth technical documentation regarding Roo Code's internal workings. This documentation is divided into two main categories: Core Implementation (covering specific feature architectures like Browser Automation and Checkpoint Systems) and Core Systems (covering operational mechanisms like File Filtering and MCP Server Integration).
  3. Understand the performance benefits of context optimization

    main

    Implementing context optimization techniques in Roo-Code provides the following measurable improvements:

    1. File filtering: Can reduce context size by 70-90% in projects with many dependencies.
    2. Sliding window: Prevents context overflow during long conversations.
    3. Size-based filtering: Prevents large files from consuming excessive tokens.
    4. Binary detection: Prevents unintelligible binary content from wasting context.
    5. Caching: Improves filtering performance by 30-50% in large directories.
  4. Navigate the Roo Code Documentation Collection

    main

    The personal_roo_docs/ directory serves as a centralized knowledge base for Roo Code, categorized by technical depth. Use the following categories to find information:

    • Normal Documentation: Found in the normal/ directory. These are user guides designed to help you maximize Roo's potential through practical usage.
    • Technical Documentation: Found in the technical/ directory. These provide in-depth implementation details, architecture, and advanced usage patterns. These are specifically optimized to be used as references for the LLM when working with Roo features.
  5. What is a Component Set in Handoff Publisher?

    main

    A Component Set is a modular collection of files designed to provide specific functionality within the Handoff Publisher system. It is the primary unit of organization for code and configurations.

    A Component Set must satisfy four requirements:

    1. A dedicated directory.
    2. Numbered component files (e.g., 1-utils.js, 2-backup.js) to control execution/loading order.
    3. A configuration file (e.g., src-config.json or system-prompt-config.json).
    4. An entry in the publish-config.json file under the componentSets array.
  6. What is the Model Context Protocol (MCP)?

    main
    The Model Context Protocol (MCP) is an extension mechanism for Roo-Code that allows it to connect to external tools and data sources. MCP servers act as bridges, providing Roo-Code with new tools, access to additional data sources, connections to external APIs, and the ability to perform specialized tasks (like database querying or document processing) that are not built into the core Roo-Code installation.
  7. Handoff Publisher Architecture and Modules

    main

    The Handoff Publisher uses a modular architecture to separate concerns, making it easy to maintain and extend. The core logic is distributed across the following modules:

    • index.js: The main entry point for the publisher script.
    • system-prompt.js: Responsible for assembling the system prompt and processing root files.
    • src-assembler.js: Responsible for assembling source code components.
    • installer-assembler.js: Responsible for processing directories and generating the final installer script.
    • config-merger.js: Handles the merging of various configuration files.
    • file-utils.js: Provides general file operation utilities.
  8. Use Tool Groups and File Restrictions

    main

    Modes control capabilities through TOOL_GROUPS. When a mode is active, the AI can only use tools belonging to the groups explicitly listed in its configuration.

    Available Tool Groups:

    • read: Includes read_file, search_files, list_files, list_code_definition_names.
    • edit: Includes apply_diff, write_to_file, insert_content, search_and_replace.
    • browser: Includes browser_action.
    • command: Includes execute_command.
    • mcp: Includes use_mcp_tool, access_mcp_resource.

    File Restrictions: To prevent a mode from modifying sensitive files, use a tuple in the groups array. For the edit group, providing a fileRegex ensures that tools like apply_diff or write_to_file only operate on files matching that pattern. If a tool attempts to access a file outside this pattern, a FileRestrictionError is thrown.

    // Example of a group with a file restriction
    ["edit", { 
      "fileRegex": "\\.(ts|js)$", 
      "description": "TypeScript and JavaScript files only" 
    }]
  9. Optimize file filtering performance

    main

    To optimize performance when filtering large codebases, apply filters in order of computational cost (fastest to slowest). This reduces the number of files processed by expensive operations. The recommended order is:

    1. Extension Filtering: Very fast.
    2. Ignore Pattern Filtering: Moderately fast (use caching if possible).
    3. Size Filtering: Requires filesystem stat calls.
    4. Binary Detection: Most expensive; perform last on the smallest possible set.
    // Example of optimized filtering approach
    async function optimizedFileFiltering(options: FilterOptions): Promise<string[]> {
      // 1. Start with fast, broad filters
      const files = await getInitialFileList(options.directory);
      
      // 2. Apply extension filtering (very fast)
      const extensionFiltered = filterByExtension(files, options.extensions);
      
      // 3. Apply ignore patterns (moderately fast with caching)
      const ignoreFiltered = applyIgnorePatterns(extensionFiltered, options.ignorePatterns);
      
      // 4. Apply size filtering (requires stat calls)
      const sizeFiltered = await filterBySize(ignoreFiltered, options.maxSize);
      
      // 5. Apply binary detection (expensive, do last)
      const binaryFiltered = options.excludeBinary 
        ? await filterOutBinaryFiles(sizeFiltered)
        : sizeFiltered;
      
      return binaryFiltered;
    }
  10. How browser automation actions work

    main

    Browser automation in Roo-Code follows a controller pattern using Puppeteer. The workflow follows a strict sequence: Launch $\rightarrow$ Interaction $\rightarrow$ Feedback $\rightarrow$ Close.

    Core Actions

    • Launch: Initializes a headless Chrome/Chromium instance, sets the viewport, and navigates to the provided URL. It waits for networkidle2 to ensure the page is loaded.
    • Click: Uses mouse coordinates (formatted as X,Y) to perform a click and waits for network activity to settle.
    • Type: Simulates keyboard input for the provided text.
    • Screenshot & Logs: After every interaction, the system captures a JPEG screenshot (80% quality) and retrieves any messages captured from the browser's console to provide context to the LLM.
  11. Understand the Roo-Code settings resolution hierarchy

    main

    Roo-Code uses a multi-layered settings system to allow for both global preferences and project-specific overrides. When the system requests a setting, it resolves the value using the following priority order:

    1. Workspace Settings: Project-specific settings found in VSCode's workspace configuration (highest priority).
    2. VSCode Global State: User-wide preferences stored in the extension's global state.
    3. Default Values: The fallback value used if no workspace or global setting is defined.

    This hierarchy ensures that you can have general settings for all your coding tasks while maintaining specific configurations for individual repositories.