Update instructions to use YAML

Author: mrubens

src/core/prompts/instructions/create-mode.ts

@@ -31,25 +31,30 @@ If asked to create a project mode, create it in .roomodes in the workspace root.
 
 - For multi-line text, include newline characters in the string like "This is the first line.\\nThis is the next line.\\n\\nThis is a double line break."
 
-Both files should follow this structure:
-{
- "customModes": [
-   {
-     "slug": "designer", // Required: unique slug with lowercase letters, numbers, and hyphens
-     "name": "Designer", // Required: mode display name
-     "roleDefinition": "You are Roo, a UI/UX expert specializing in design systems and frontend development. Your expertise includes:\\n- Creating and maintaining design systems\\n- Implementing responsive and accessible web interfaces\\n- Working with CSS, HTML, and modern frontend frameworks\\n- Ensuring consistent user experiences across platforms", // Required: non-empty
-     "whenToUse": "Use this mode when creating or modifying UI components, implementing design systems, or ensuring responsive web interfaces. This mode is especially effective with CSS, HTML, and modern frontend frameworks.", // Optional but recommended
-     "groups": [ // Required: array of tool groups (can be empty)
-       "read",    // Read files group (read_file, fetch_instructions, search_files, list_files, list_code_definition_names)
-       "edit",    // Edit files group (apply_diff, write_to_file) - allows editing any file
-       // Or with file restrictions:
-       // ["edit", { fileRegex: "\\.md$", description: "Markdown files only" }],  // Edit group that only allows editing markdown files
-       "browser", // Browser group (browser_action)
-       "command", // Command group (execute_command)
-       "mcp"     // MCP group (use_mcp_tool, access_mcp_resource)
-     ],
-     "customInstructions": "Additional instructions for the Designer mode" // Optional
-    }
-  ]
-}`
+Both files should follow this structure (in YAML format):
+
+customModes:
+  - slug: designer  # Required: unique slug with lowercase letters, numbers, and hyphens
+    name: Designer  # Required: mode display name
+    roleDefinition: >-
+      You are Roo, a UI/UX expert specializing in design systems and frontend development. Your expertise includes:
+      - Creating and maintaining design systems
+      - Implementing responsive and accessible web interfaces
+      - Working with CSS, HTML, and modern frontend frameworks
+      - Ensuring consistent user experiences across platforms  # Required: non-empty
+    whenToUse: >-
+      Use this mode when creating or modifying UI components, implementing design systems, 
+      or ensuring responsive web interfaces. This mode is especially effective with CSS, 
+      HTML, and modern frontend frameworks.  # Optional but recommended
+    groups:  # Required: array of tool groups (can be empty)
+      - read     # Read files group (read_file, fetch_instructions, search_files, list_files, list_code_definition_names)
+      - edit     # Edit files group (apply_diff, write_to_file) - allows editing any file
+      # Or with file restrictions:
+      # - - edit
+      #   - fileRegex: \\.md$
+      #     description: Markdown files only  # Edit group that only allows editing markdown files
+      - browser  # Browser group (browser_action)
+      - command  # Command group (execute_command)
+      - mcp      # MCP group (use_mcp_tool, access_mcp_resource)
+    customInstructions: Additional instructions for the Designer mode  # Optional`
 }