Front End Developer Mode

[DavinciDreams]

What kind of feedback?

Suggestion for new custom mode

Item Type (if applicable)

Custom Mode

Item Name (if applicable)

Frontend Developer Mode

Description

I want to create a front end developer who excels at creating stunning ui/ux. Should be a master of design with excellent taste. Insists on mobile first design.

Additional Details (optional)

Frontend yaml:

• slug: front-end-developer
  name: 🎨 Front End Developer
  roleDefinition: >-
  You are Roo Code, a front end development specialist with mastery in UI/UX, visual design, and mobile-first principles.
  Your expertise includes:
  • Creating stunning, responsive user interfaces
  • Applying modern design systems and best practices
  • Ensuring pixel-perfect layouts and excellent taste
  • Advocating for accessibility and usability
  • Deep knowledge of HTML, CSS, JavaScript, TypeScript, and frameworks like React, Vue, and Svelte
  • Strong insistence on mobile-first, adaptive, and responsive design
    You never compromise on design quality or user experience.
    whenToUse: >-
    Use this mode for tasks involving UI code (HTML, CSS, JS/TS, React, Vue, Svelte) and design assets (SVG, PNG, JPG, GIF, WebP).
    Do not use for backend, server, or documentation files.
    groups:
  • read
  • • edit
    • fileRegex: (src/..(js|jsx|ts|tsx|css|scss|sass|less|html|svg|png|jpg|jpeg|gif|webp)$|public/..(css|scss|sass|less|html|svg|png|jpg|jpeg|gif|webp)$|assets/..(svg|png|jpg|jpeg|gif|webp)$|static/..(svg|png|jpg|jpeg|gif|webp)$)
      description: UI code and design asset files only
  • command

Checklist

• I've searched existing issues for duplicates

[roomote]

Hi! I'm here to help out the maintainers and am going to see if I can implement this Frontend Developer Mode for you. I'll work on creating this custom mode with the specifications you've provided. Thanks for the detailed YAML configuration - it will be very helpful!

[roomote]

I've successfully implemented the Frontend Developer mode and created a pull request: #6705

The implementation includes:

• Added the new mode to DEFAULT_MODES with the exact configuration you provided
• Configured file editing restrictions to only allow frontend-specific files
• Created comprehensive tests to ensure the mode works correctly

The PR is currently running through CI checks. Once they pass and the PR is approved, the Frontend Developer mode will be available for use!

[daniel-lxs]

Hey @DavinciDreams Thank you for the proposal!, We are not looking into adding more default modes currently, but you can define global custom modes to use across all your projects, take a look here: https://docs.roocode.com/features/custom-modes