feat: add Frontend Developer mode

- 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

Author: roomote

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

@@ -0,0 +1,90 @@
+import { describe, it, expect } from "vitest"
+import { DEFAULT_MODES, modeConfigSchema } from "../mode.js"
+
+describe("DEFAULT_MODES", () => {
+	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")
+	})
+
+	it("should have valid configuration for Frontend Developer mode", () => {
+		const frontEndMode = DEFAULT_MODES.find((mode) => mode.slug === "front-end-developer")
+		expect(frontEndMode).toBeDefined()
+
+		// Validate against schema
+		const result = modeConfigSchema.safeParse(frontEndMode)
+		expect(result.success).toBe(true)
+	})
+
+	it("should have correct groups for Frontend Developer mode", () => {
+		const frontEndMode = DEFAULT_MODES.find((mode) => mode.slug === "front-end-developer")
+		expect(frontEndMode).toBeDefined()
+		expect(frontEndMode?.groups).toHaveLength(3)
+		expect(frontEndMode?.groups[0]).toBe("read")
+		expect(frontEndMode?.groups[2]).toBe("command")
+
+		// Check edit group with file regex
+		const editGroup = frontEndMode?.groups[1]
+		expect(Array.isArray(editGroup)).toBe(true)
+		if (Array.isArray(editGroup)) {
+			expect(editGroup[0]).toBe("edit")
+			expect(editGroup[1]).toHaveProperty("fileRegex")
+			expect(editGroup[1]).toHaveProperty("description", "UI code and design asset files only")
+		}
+	})
+
+	it("should have correct file regex pattern for Frontend Developer mode", () => {
+		const frontEndMode = DEFAULT_MODES.find((mode) => mode.slug === "front-end-developer")
+		const editGroup = frontEndMode?.groups[1]
+
+		if (Array.isArray(editGroup) && editGroup[1]?.fileRegex) {
+			const regex = new RegExp(editGroup[1].fileRegex)
+
+			// Test valid UI files
+			expect(regex.test("src/components/Button.tsx")).toBe(true)
+			expect(regex.test("src/styles/main.css")).toBe(true)
+			expect(regex.test("src/pages/Home.jsx")).toBe(true)
+			expect(regex.test("src/ui/Modal.tsx")).toBe(true)
+			expect(regex.test("src/hooks/useAuth.ts")).toBe(true)
+			expect(regex.test("src/main.css")).toBe(true)
+			expect(regex.test("public/index.html")).toBe(true)
+			expect(regex.test("assets/logo.svg")).toBe(true)
+			expect(regex.test("static/banner.png")).toBe(true)
+
+			// Test invalid files (backend/server files)
+			expect(regex.test("server.js")).toBe(false)
+			expect(regex.test("README.md")).toBe(false)
+			expect(regex.test("package.json")).toBe(false)
+			expect(regex.test("src/api/routes.ts")).toBe(false)
+			expect(regex.test("src/App.jsx")).toBe(false) // App.jsx at root of src is not in allowed folders
+			expect(regex.test("src/server/index.ts")).toBe(false)
+		}
+	})
+
+	it("should have all required fields for Frontend Developer mode", () => {
+		const frontEndMode = DEFAULT_MODES.find((mode) => mode.slug === "front-end-developer")
+
+		expect(frontEndMode).toMatchObject({
+			slug: "front-end-developer",
+			name: "🎨 Front End Developer",
+			roleDefinition: expect.stringContaining("front end development specialist"),
+			whenToUse: expect.stringContaining("UI code"),
+			description: "Create stunning UI/UX with mobile-first design",
+			groups: expect.any(Array),
+		})
+	})
+
+	it("should maintain correct order of modes with Frontend Developer added", () => {
+		const modeNames = DEFAULT_MODES.map((mode) => mode.slug)
+		expect(modeNames).toContain("architect")
+		expect(modeNames).toContain("code")
+		expect(modeNames).toContain("ask")
+		expect(modeNames).toContain("debug")
+		expect(modeNames).toContain("orchestrator")
+		expect(modeNames).toContain("front-end-developer")
+
+		// Frontend Developer should be the last mode
+		expect(modeNames[modeNames.length - 1]).toBe("front-end-developer")
+	})
+})

packages/types/src/mode.ts

@@ -192,4 +192,25 @@ export const DEFAULT_MODES: readonly ModeConfig[] = [
 		customInstructions:
 			"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",
+		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.",
+		description: "Create stunning UI/UX with mobile-first design",
+		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",
+				},
+			],
+			"command",
+		],
+	},
 ] as const