feat: add Frontend Developer mode #6705

roomote · 2025-08-05T09:09:31Z

Summary

This PR adds a new Frontend Developer mode as requested in issue #6704. The mode is specifically designed for frontend development with a focus on UI/UX, visual design, and mobile-first principles.

Changes

Added Frontend Developer mode to DEFAULT_MODES in packages/types/src/mode.ts
Configured the mode with:
- Expertise in HTML, CSS, JavaScript, TypeScript, and frameworks like React, Vue, and Svelte
- Strong emphasis on mobile-first, adaptive, and responsive design
- File editing restrictions to only allow frontend-specific files
Added comprehensive tests to verify the mode configuration

File Restrictions

The mode restricts file editing to:

Frontend source directories: src/(components|pages|views|ui|styles|layouts|hooks|utils|lib|features)/
CSS/style files anywhere in src/
Public assets and static files
Design assets (SVG, PNG, JPG, etc.)

This ensures the mode stays focused on frontend development and doesn't accidentally modify backend or configuration files.

Testing

Created comprehensive test suite in packages/types/src/__tests__/mode.test.ts
All tests pass successfully
Verified the file regex pattern correctly allows/denies appropriate files

Fixes #6704

Important

Adds a new Frontend Developer mode focused on UI/UX and mobile-first design, with file editing restricted to frontend-specific files, and includes comprehensive tests.

Behavior:
- Adds Frontend Developer mode to DEFAULT_MODES in mode.ts for UI/UX and mobile-first design.
- Restricts file editing to frontend-specific directories and design assets.
Testing:
- Comprehensive tests in mode.test.ts to verify mode inclusion, configuration, and file regex patterns.
- Tests ensure only frontend files are editable and mode is correctly added to DEFAULT_MODES.
Configuration:
- Configures expertise in HTML, CSS, JavaScript, TypeScript, React, Vue, and Svelte.
- Emphasizes mobile-first, adaptive, and responsive design principles.

^{This description was created by}^{for ce373b2. You can customize this summary. It will automatically update as commits are pushed.}

- Add new Frontend Developer mode to DEFAULT_MODES - Configure mode with UI/UX focus and mobile-first principles - Restrict file editing to frontend-specific directories and files - Add comprehensive tests for the new mode Fixes #6704

roomote

I reviewed my own code and found issues. This is fine. Everything is fine.

roomote · 2025-08-05T09:14:00Z

packages/types/src/mode.ts

 			"Your role is to coordinate complex workflows by delegating tasks to specialized modes. As an orchestrator, you should:\n\n1. When given a complex task, break it down into logical subtasks that can be delegated to appropriate specialized modes.\n\n2. For each subtask, use the `new_task` tool to delegate. Choose the most appropriate mode for the subtask's specific goal and provide comprehensive instructions in the `message` parameter. These instructions must include:\n    *   All necessary context from the parent task or previous subtasks required to complete the work.\n    *   A clearly defined scope, specifying exactly what the subtask should accomplish.\n    *   An explicit statement that the subtask should *only* perform the work outlined in these instructions and not deviate.\n    *   An instruction for the subtask to signal completion by using the `attempt_completion` tool, providing a concise yet thorough summary of the outcome in the `result` parameter, keeping in mind that this summary will be the source of truth used to keep track of what was completed on this project.\n    *   A statement that these specific instructions supersede any conflicting general instructions the subtask's mode might have.\n\n3. Track and manage the progress of all subtasks. When a subtask is completed, analyze its results and determine the next steps.\n\n4. Help the user understand how the different subtasks fit together in the overall workflow. Provide clear reasoning about why you're delegating specific tasks to specific modes.\n\n5. When all subtasks are completed, synthesize the results and provide a comprehensive overview of what was accomplished.\n\n6. Ask clarifying questions when necessary to better understand how to break down complex tasks effectively.\n\n7. Suggest improvements to the workflow based on the results of completed subtasks.\n\nUse subtasks to maintain clarity. If a request significantly shifts focus or requires a different expertise (mode), consider creating a subtask rather than overloading the current one.",
 	},
+	{
+		slug: "front-end-developer",


Is this intentional? The slug uses "front-end-developer" (with hyphen) but the issue requested "frontend" without a hyphen. This inconsistency might cause confusion since the test descriptions already use "Frontend" without hyphen.

roomote · 2025-08-05T09:14:00Z

packages/types/src/mode.ts

+		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.",
+		description: "Create stunning UI/UX with mobile-first design",
+		groups: [


The mode is missing the "browser" group that other UI-focused modes have. Frontend developers often need to preview their work in a browser. Could we add it?

Suggested change

groups: [

groups: [

"read",

[

"edit",

{

fileRegex:

"^(src/(components|pages|views|ui|styles|layouts|hooks|utils|lib|features)/.*\\.(js|jsx|ts|tsx|css|scss|sass|less|html|svg)$|src/.*\\.(css|scss|sass|less)$|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",

},

],

"browser",

"command",

],

roomote · 2025-08-05T09:14:01Z

packages/types/src/mode.ts

+				"edit",
+				{
+					fileRegex:
+						"^(src/(components|pages|views|ui|styles|layouts|hooks|utils|lib|features)/.*\\.(js|jsx|ts|tsx|css|scss|sass|less|html|svg)$|src/.*\\.(css|scss|sass|less)$|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)$)",


The file regex is missing some important frontend file extensions that are mentioned in the roleDefinition:

.vue files (Vue.js)

.svelte files (Svelte)

.json files in allowed directories (component configs)

.md files in allowed directories (component docs)

Could we update the regex to include these?

roomote · 2025-08-05T09:14:01Z

packages/types/src/mode.ts

+		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.",


The roleDefinition formatting uses a hyphenated list which is inconsistent with other modes. Consider reformatting to match the paragraph style used by other modes for better consistency.

roomote · 2025-08-05T09:14:01Z

packages/types/src/__tests__/mode.test.ts

+import { describe, it, expect } from "vitest"
+import { DEFAULT_MODES, modeConfigSchema } from "../mode.js"
+
+describe("DEFAULT_MODES", () => {


Consider adding tests to verify:

The mode can be properly selected/activated

File restrictions work correctly in practice (not just regex validation)

Integration with the rest of the system

This would provide more confidence that the mode works as expected.

roomote · 2025-08-05T09:14:01Z

packages/types/src/__tests__/mode.test.ts

+import { describe, it, expect } from "vitest"
+import { DEFAULT_MODES, modeConfigSchema } from "../mode.js"
+
+describe("DEFAULT_MODES", () => {


Consider organizing related tests in nested describe blocks for better structure:

Suggested change

describe("DEFAULT_MODES", () => {

describe("DEFAULT_MODES", () => {

describe("Frontend Developer mode", () => {

it("should include the Frontend Developer mode", () => {

const frontEndMode = DEFAULT_MODES.find((mode) => mode.slug === "front-end-developer")

expect(frontEndMode).toBeDefined()

expect(frontEndMode?.name).toBe("🎨 Front End Developer")

})

daniel-lxs · 2025-08-06T00:38:35Z

Closing, not planned #6704 (comment)

feat: add Frontend Developer mode

ce373b2

- Add new Frontend Developer mode to DEFAULT_MODES - Configure mode with UI/UX focus and mobile-first principles - Restrict file editing to frontend-specific directories and files - Add comprehensive tests for the new mode Fixes #6704

roomote bot requested review from cte, jr and mrubens as code owners August 5, 2025 09:09

github-project-automation bot added this to Roo Code Roadmap Aug 5, 2025

github-project-automation bot moved this to New in Roo Code Roadmap Aug 5, 2025

github-project-automation bot added this to Roo Code Roadmap Aug 5, 2025

github-project-automation bot moved this to Triage in Roo Code Roadmap Aug 5, 2025

dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. enhancement New feature or request labels Aug 5, 2025

roomote bot mentioned this pull request Aug 5, 2025

Front End Developer Mode #6704

Closed

1 task

roomote bot commented Aug 5, 2025

View reviewed changes

hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Aug 5, 2025

daniel-lxs closed this Aug 6, 2025

github-project-automation bot moved this from New to Done in Roo Code Roadmap Aug 6, 2025

github-project-automation bot moved this from Triage to Done in Roo Code Roadmap Aug 6, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add Frontend Developer mode #6705

feat: add Frontend Developer mode #6705

Uh oh!

roomote bot commented Aug 5, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

roomote bot left a comment

Uh oh!

roomote bot Aug 5, 2025

Uh oh!

roomote bot Aug 5, 2025

Uh oh!

roomote bot Aug 5, 2025

Uh oh!

roomote bot Aug 5, 2025

Uh oh!

roomote bot Aug 5, 2025

Uh oh!

roomote bot Aug 5, 2025

Uh oh!

daniel-lxs commented Aug 6, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

-describe("DEFAULT_MODES", () => {
+describe("DEFAULT_MODES", () => {
+	describe("Frontend Developer mode", () => {
+		it("should include the Frontend Developer mode", () => {
+			const frontEndMode = DEFAULT_MODES.find((mode) => mode.slug === "front-end-developer")
+			expect(frontEndMode).toBeDefined()
+			expect(frontEndMode?.name).toBe("🎨 Front End Developer")
+		})

feat: add Frontend Developer mode #6705

feat: add Frontend Developer mode #6705

Uh oh!

Conversation

roomote bot commented Aug 5, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

File Restrictions

Testing

Uh oh!

roomote bot left a comment

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

roomote bot Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

daniel-lxs commented Aug 6, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

roomote bot commented Aug 5, 2025 •

edited by ellipsis-dev bot

Loading