Custom-Modes-Roo-Code

🥈Silver

Custom-Modes-Roo-Code enables developers to create tailored AI coding assistance configurations for the Roo Code VS Code extension. It benefits developers and teams by optimizing workflows for specific projects or coding styles. The skill connects to VS Code and integrates with Claude for enhanced coding assistance.

163210Updated 2w ago

Intermediate30min to implementautomation

Saves ~60 min per use

Quick InstallView Source

git clone https://github.com/jtgsystems/Custom-Modes-Roo-Code.git

Works with:

Claude

Overview

About This Skill

How to Use

[{"step":"Install the Roo Code VS Code extension and ensure you have VS Code installed (version 1.75+ recommended).","action":"Go to Extensions in VS Code, search for 'Roo Code', and install it. Restart VS Code after installation."},{"step":"Create a new configuration file in your project root named '.roocode.json' or use an existing one.","action":"In VS Code, create a new file in your project root and save it as '.roocode.json'. Alternatively, open an existing configuration file if your project already has one."},{"step":"Paste the generated configuration into the file and customize the placeholders for your project.","action":"Replace all [PLACEHOLDERS] with your actual project details like project name, your name, and specific requirements. Adjust settings like temperature, max_tokens, and tools based on your needs."},{"step":"Save the file and reload VS Code to apply the new configuration.","action":"Save the file (Ctrl+S or Cmd+S) and then reload VS Code to ensure the new configuration is loaded. You can verify it's active by checking the Roo Code status bar icon in the bottom-right corner of VS Code."},{"step":"Test the configuration by asking Roo Code to generate or refactor code using your new templates.","action":"Open a relevant file in your project and use a prompt like 'Generate a new styled component for a Button component' or 'Refactor this component to use TypeScript interfaces'. Verify the output matches your expectations and adjust the configuration as needed."}]

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/jtgsystems/Custom-Modes-Roo-Code

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a custom Roo Code configuration for [PROJECT_NAME] that optimizes [SPECIFIC_TASK] in [PROGRAMMING_LANGUAGE]. Include best practices for [FRAMEWORK/LIBRARY] and [DEVELOPMENT_STYLE]. The config should prioritize [PERFORMANCE/READABILITY/MAINTAINABILITY] and include [SPECIFIC_TOOLS/PLUGINS]. Output the configuration as a JSON file with comments explaining key decisions.

Example Output

```json
{
  "name": "React-TS-Styled-Components-Config",
  "description": "Optimized Roo Code config for React TypeScript projects using styled-components with strict TypeScript, ESLint, and Prettier rules.",
  "settings": {
    "ai_model": "claude-3-opus-20240229",
    "context_window": 16384,
    "temperature": 0.3,
    "top_p": 0.9,
    "max_tokens": 4096,
    "stop_sequences": ["\n\nHuman:", "\n\nAssistant:"]
  },
  "tools": {
    "eslint": {
      "enabled": true,
      "config_file": ".eslintrc.json",
      "rules": {
        "@typescript-eslint/explicit-function-return-type": "error",
        "react/prop-types": "off",
        "import/no-extraneous-dependencies": ["error", {"devDependencies": true}]
      }
    },
    "prettier": {
      "enabled": true,
      "config_file": ".prettierrc",
      "printWidth": 100,
      "tabWidth": 2,
      "useTabs": false,
      "semi": true,
      "singleQuote": true,
      "trailingComma": "es5"
    },
    "typescript": {
      "enabled": true,
      "tsconfig_file": "tsconfig.json",
      "strict": true,
      "noImplicitAny": true,
      "strictNullChecks": true
    },
    "styled_components": {
      "enabled": true,
      "babel_plugin": true,
      "displayName": true,
      "ssr": true
    }
  },
  "prompts": {
    "file_header": "// React TypeScript Component - styled-components\n// Project: [PROJECT_NAME]\n// Author: [YOUR_NAME]\n// Date: {{date}}\n\n",
    "component_template": "import React from 'react'\nimport styled from 'styled-components'\n\ninterface {{ComponentName}}Props {\n  [props]\n}\n\nexport const {{ComponentName}}: React.FC<{{ComponentName}}Props> = ({ [props] }) => {\n  return (\n    <{{StyledComponentName}}>\n      [content]\n    </{{StyledComponentName}}>\n  )\n}\n\nconst {{StyledComponentName}} = styled.div`\n  [styles]\n`\n",
    "test_template": "import { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\nimport {{ComponentName}} from './{{ComponentName}}'\n\ndescribe('{{ComponentName}}', () => {\n  it('renders correctly', () => {\n    render(<{{ComponentName}} [props] />)\n    expect(screen.getByText('[expected text]')).toBeInTheDocument()\n  })\n})\n"
  },
  "workflows": {
    "new_component": {
      "steps": [
        "Generate component skeleton using component_template",
        "Add TypeScript interfaces for props",
        "Create styled component with appropriate styles",
        "Generate test file using test_template",
        "Run ESLint and Prettier to format code"
      ]
    },
    "refactor": {
      "steps": [
        "Analyze existing component structure",
        "Suggest TypeScript improvements",
        "Optimize styled-components usage",
        "Update tests to match new implementation",
        "Verify ESLint and Prettier compliance"
      ]
    }
  }
}
```

This configuration is designed for a React TypeScript project using styled-components. It enforces strict TypeScript rules, includes ESLint and Prettier for consistent code quality, and provides templates for component creation and testing. The settings optimize the AI's context window and response quality for React-specific tasks. The workflows automate common development patterns, reducing boilerplate code and improving consistency across the team. The configuration includes specific rules for styled-components to ensure proper integration with the styling library.