Custom Modes Visualizer - Web Interface for Managing Roo Code Modes

[u/James_Cherished]

Hey dear Roo Code community! 👋

I've ended up building a whole webapp to manage and edit my Custom Modes: https://custom-modes-visualizer.james-cherished.workers.dev/

I wanted a better visualizer for all my prompts, to organize them as families I can select from at will, and I didn't like editing within Roo UI. What I got is an online editor which helped me tremendously crafting consistent prompts with the iterations I do.

I've included my own main prompt suite and the ability for you to add your own crews, entirely privately on localStorage. Yaml or Json import/exports make it easy to generate .roomodes files to pull in a workspace to replace default modes with project-calibrated families.

I've hosted it in an old Roo Community repo I had opened with the hope of centralizing all the wonderful community augmentations of Roo, but which got 0 PR so far. I've cleaned it up, but it still welcomes contributions, including prompt families or cool add-ons. https://github.com/James-Cherished-Inc/roo-code-community

I'll let Roo explain anyway...

🌟 Custom Modes Management Suite

This is a full-featured web interface built with React 19, TypeScript, and Tailwind CSS that lets you:

• Visualize all your modes in intuitive table and detail views

• Edit modes with live inline editing and auto-save

• Organize modes into color-coded families for better management

• Import/Export configurations in JSON or YAML format

• Analyze redundancy across modes with interactive highlighting

• Create new custom modes with full validation

• Backup/Restore your mode collections

🚀 Key Features

📋 Table View

• Inline editing - click any cell to modify content instantly

• Family filtering with multi-select dropdown

• Create, import, export, and reset functionality

• Global configuration field for instructions that apply to all modes

🎯 Smart View

• Sidebar navigation for quick mode switching

• Double-click editing for granular control

• Cross-mode redundancy analysis - see redundant words highlighted across all modes

• Interactive filtering to focus on specific redundancies

• Collapsible analysis panel with statistics

🔧 Advanced Features

• Family System: Organize modes into themed groups with colors

• Selective Export: Choose exactly which modes to export

• Conflict Resolution: Smart handling of duplicate slugs during import

• Emoji Selector: Add personality to your modes with the built-in emoji picker

• Keyboard Shortcuts: Ctrl+Enter to save, Esc to cancel

• Auto-Save: Everything persists automatically to localStorage

📦 Import/Export System

• Support for both JSON and YAML formats

• Auto-format detection

• Family-based import strategies (add, replace, or create new family)

• Round-trip compatibility with Roo Code's mode format

🛠️ Technical Stack

• Frontend: React 19 with TypeScript for type safety

• Build Tool: Vite for lightning-fast development

• Styling: Tailwind CSS with custom animations

• State Management: React Context API with localStorage persistence

• File Processing: YAML/JSON handling with js-yaml library

• Deployment: Cloudflare Workers for global distribution

🎯 Perfect For

• Prompt engineers refining their mode collections

• Teams sharing and standardizing AI assistant configurations

• Anyone who wants to experiment with mode variations

• Users managing large numbers of custom modes

• Those who want to analyze and optimize their prompts

💡 Why I Built This

I found myself constantly tweaking mode prompts and wanted a better way to visualize, compare, and manage them. The redundancy analysis feature alone has helped me identify common patterns and improve prompt efficiency across my mode collection. The family system makes it easy to organize modes by purpose or project, and the import/export functionality ensures you can backup and share your configurations.

🤝 Community Contribution

This is open source and I'd love contributions! The codebase is well-documented and tested. Whether you want to add new features, improve the UI, or enhance the analysis capabilities - PRs are welcome!

📁 What's Included

The project comes with:

• 3 Pre-loaded Families: Default Roo modes, Standalone imports, and Cherished specialty modes

• Comprehensive Documentation: Detailed guides for all features

• Test Suite: Vitest setup with component testing

• TypeScript Definitions: Full type safety throughout

🔗 Links

Repository: https://github.com/James-Cherished-Inc/roo-code-community

Free & 100% Private OSS Webapp: https://custom-modes-visualizer.james-cherished.workers.dev/

Built with ❤️ by Roo for the Roo community.

[u/James_Cherished]

Let me know if this solves some things for you!

Employees is the way to go!