chore: escape markdown front matter (#38025)

pavelfeldman · web-flow · commit 666414088f1f · 2025-10-28T10:29:14.000-07:00
diff --git a/examples/todomvc/.claude/agents/pwt-generator.md b/examples/todomvc/.claude/agents/pwt-generator.md
@@ -1,7 +1,7 @@
 ---
 name: pwt-generator
-description: Use this agent when you need to create automated browser tests using Playwright. Examples: <example>Context: User wants to generate a test for the test plan item. <test-suite><!-- Verbatim name of the test spec group w/o ordinal like "Multiplication tests" --></test-suite> <test-name><!-- Name of the test case without the ordinal like "should add two numbers" --></test-name> <test-file><!-- Name of the file to save the test into, like tests/multiplication/should-add-two-numbers.spec.ts --></test-file> <seed-file><!-- Seed file path from test plan --></seed-file> <body><!-- Test case content including steps and expectations --></body></example>
-tools: Glob, Grep, Read, mcp__playwright-test__browser_click, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_verify_element_visible, mcp__playwright-test__browser_verify_list_visible, mcp__playwright-test__browser_verify_text_visible, mcp__playwright-test__browser_verify_value, mcp__playwright-test__browser_wait_for, mcp__playwright-test__generator_read_log, mcp__playwright-test__generator_setup_page, mcp__playwright-test__generator_write_test
+description: 'Use this agent when you need to create automated browser tests using Playwright Examples: <example>Context: User wants to generate a test for the test plan item. <test-suite><!-- Verbatim name of the test spec group w/o ordinal like "Multiplication tests" --></test-suite> <test-name><!-- Name of the test case without the ordinal like "should add two numbers" --></test-name> <test-file><!-- Name of the file to save the test into, like tests/multiplication/should-add-two-numbers.spec.ts --></test-file> <seed-file><!-- Seed file path from test plan --></seed-file> <body><!-- Test case content including steps and expectations --></body></example>'
+tools: Glob, Grep, Read, LS, mcp__playwright-test__browser_click, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_verify_element_visible, mcp__playwright-test__browser_verify_list_visible, mcp__playwright-test__browser_verify_text_visible, mcp__playwright-test__browser_verify_value, mcp__playwright-test__browser_wait_for, mcp__playwright-test__generator_read_log, mcp__playwright-test__generator_setup_page, mcp__playwright-test__generator_write_test
 model: sonnet
 color: blue
 ---
diff --git a/examples/todomvc/.claude/agents/pwt-healer.md b/examples/todomvc/.claude/agents/pwt-healer.md
@@ -1,7 +1,7 @@
 ---
 name: pwt-healer
-description: Use this agent when you need to debug and fix failing Playwright tests.
-tools: Glob, Grep, Read, Edit, MultiEdit, Write, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_generate_locator, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_snapshot, mcp__playwright-test__test_debug, mcp__playwright-test__test_list, mcp__playwright-test__test_run
+description: Use this agent when you need to debug and fix failing Playwright tests
+tools: Glob, Grep, Read, LS, Edit, MultiEdit, Write, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_generate_locator, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_snapshot, mcp__playwright-test__test_debug, mcp__playwright-test__test_list, mcp__playwright-test__test_run
 model: sonnet
 color: red
 ---
diff --git a/examples/todomvc/.claude/agents/pwt-planner.md b/examples/todomvc/.claude/agents/pwt-planner.md
@@ -1,7 +1,7 @@
 ---
 name: pwt-planner
-description: Use this agent when you need to create comprehensive test plan for a web application or website.
-tools: Glob, Grep, Read, Edit, MultiEdit, Write, mcp__playwright-test__browser_click, mcp__playwright-test__browser_close, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_navigate_back, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_take_screenshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_wait_for, mcp__playwright-test__planner_setup_page
+description: Use this agent when you need to create comprehensive test plan for a web application or website
+tools: Glob, Grep, Read, LS, Edit, MultiEdit, Write, mcp__playwright-test__browser_click, mcp__playwright-test__browser_close, mcp__playwright-test__browser_console_messages, mcp__playwright-test__browser_drag, mcp__playwright-test__browser_evaluate, mcp__playwright-test__browser_file_upload, mcp__playwright-test__browser_handle_dialog, mcp__playwright-test__browser_hover, mcp__playwright-test__browser_navigate, mcp__playwright-test__browser_navigate_back, mcp__playwright-test__browser_network_requests, mcp__playwright-test__browser_press_key, mcp__playwright-test__browser_select_option, mcp__playwright-test__browser_snapshot, mcp__playwright-test__browser_take_screenshot, mcp__playwright-test__browser_type, mcp__playwright-test__browser_wait_for, mcp__playwright-test__planner_setup_page
 model: sonnet
 color: green
 ---
diff --git a/examples/todomvc/.github/agents/pwt-generator.agent.md b/examples/todomvc/.github/agents/pwt-generator.agent.md
@@ -1,6 +1,14 @@
 ---
 name: pwt-generator
-description: Use this agent when you need to create automated browser tests using Playwright. Examples: <example>Context: User wants to generate a test for the test plan item. <test-suite><!-- Verbatim name of the test spec group w/o ordinal like "Multiplication tests" --></test-suite> <test-name><!-- Name of the test case without the ordinal like "should add two numbers" --></test-name> <test-file><!-- Name of the file to save the test into, like tests/multiplication/should-add-two-numbers.spec.ts --></test-file> <seed-file><!-- Seed file path from test plan --></seed-file> <body><!-- Test case content including steps and expectations --></body></example>
+description: 'Use this agent when you need to create automated browser tests
+  using Playwright Examples: <example>Context: User wants to generate a test for
+  the test plan item. <test-suite><!-- Verbatim name of the test spec group w/o
+  ordinal like "Multiplication tests" --></test-suite> <test-name><!-- Name of
+  the test case without the ordinal like "should add two numbers"
+  --></test-name> <test-file><!-- Name of the file to save the test into, like
+  tests/multiplication/should-add-two-numbers.spec.ts --></test-file>
+  <seed-file><!-- Seed file path from test plan --></seed-file> <body><!-- Test
+  case content including steps and expectations --></body></example>'
 tools:
   - search
   - playwright-test/browser_click
diff --git a/examples/todomvc/.github/agents/pwt-healer.agent.md b/examples/todomvc/.github/agents/pwt-healer.agent.md
@@ -1,6 +1,6 @@
 ---
 name: pwt-healer
-description: Use this agent when you need to debug and fix failing Playwright tests.
+description: Use this agent when you need to debug and fix failing Playwright tests
 tools:
   - search
   - edit
diff --git a/examples/todomvc/.github/agents/pwt-planner.agent.md b/examples/todomvc/.github/agents/pwt-planner.agent.md
@@ -1,6 +1,7 @@
 ---
 name: pwt-planner
-description: Use this agent when you need to create comprehensive test plan for a web application or website.
+description: Use this agent when you need to create comprehensive test plan for
+  a web application or website
 tools:
   - search
   - edit
diff --git a/packages/playwright/src/agents/generateAgents.ts b/packages/playwright/src/agents/generateAgents.ts
@@ -136,7 +136,7 @@ export class ClaudeGenerator {
 
   static agentSpec(agent: Agent): string {
     const claudeToolMap = new Map<string, string[]>([
-      ['search', ['Glob', 'Grep', 'Read']],
+      ['search', ['Glob', 'Grep', 'Read', 'LS']],
       ['edit', ['Edit', 'MultiEdit', 'Write']],
     ]);
 
@@ -149,13 +149,15 @@ export class ClaudeGenerator {
 
     const examples = agent.examples.length ? ` Examples: ${agent.examples.map(example => `<example>${example}</example>`).join('')}` : '';
     const lines: string[] = [];
+    const header = {
+      name: agent.header.name,
+      description: agent.header.description + examples,
+      tools: agent.header.tools.map(tool => asClaudeTool(tool)).join(', '),
+      model: agent.header.model,
+      color: agent.header.color,
+    };
     lines.push(`---`);
-    lines.push(`name: ${agent.header.name}`);
-    lines.push(`description: ${agent.header.description}.${examples}`);
-    lines.push(`tools: ${agent.header.tools.map(tool => asClaudeTool(tool)).join(', ')}`);
-    lines.push(`model: ${agent.header.model}`);
-    lines.push(`color: ${agent.header.color}`);
-    lines.push(`---`);
+    lines.push(yaml.stringify(header, { lineWidth: 100000 }) + `---`);
     lines.push('');
     lines.push(agent.instructions);
     return lines.join('\n');
@@ -258,12 +260,14 @@ export class CopilotGenerator {
   static agentSpec(agent: Agent): string {
     const examples = agent.examples.length ? ` Examples: ${agent.examples.map(example => `<example>${example}</example>`).join('')}` : '';
     const lines: string[] = [];
+    const header = {
+      name: agent.header.name,
+      description: agent.header.description + examples,
+      tools: agent.header.tools,
+      model: 'Claude Sonnet 4',
+    };
     lines.push(`---`);
-    lines.push(`name: ${agent.header.name}`);
-    lines.push(`description: ${agent.header.description}.${examples}`);
-    lines.push(`tools:\n${agent.header.tools.map(tool => `  - ${tool}`).join('\n')}`);
-    lines.push(`model: Claude Sonnet 4`);
-    lines.push(`---`);
+    lines.push(yaml.stringify(header) + `---`);
     lines.push('');
     lines.push(agent.instructions);
     lines.push('');
@@ -362,7 +366,7 @@ export class VSCodeGenerator {
 }
 
 async function writeFile(filePath: string, content: string, icon: string, description: string) {
-  console.log(`- ${icon} ${path.relative(process.cwd(), filePath)} ${colors.dim('- ' + description)}`);
+  console.log(` ${icon} ${path.relative(process.cwd(), filePath)} ${colors.dim('- ' + description)}`);
   await mkdirIfNeeded(filePath);
   await fs.promises.writeFile(filePath, content, 'utf-8');
 }
@@ -375,7 +379,7 @@ async function deleteFile(filePath: string, description: string) {
     return;
   }
 
-  console.log(`- ✂️  ${path.relative(process.cwd(), filePath)} ${colors.dim('- ' + description)}`);
+  console.log(` ✂️  ${path.relative(process.cwd(), filePath)} ${colors.dim('- ' + description)}`);
   await fs.promises.unlink(filePath);
 }
 
@@ -387,7 +391,7 @@ type RepoParams = {
 
 async function initRepo(config: FullConfigInternal, projectName: string, options: RepoParams) {
   const project = seedProject(config, projectName);
-  console.log(`- 🎭 Using project "${project.project.name}" as a primary project`);
+  console.log(` 🎭 Using project "${project.project.name}" as a primary project`);
 
   if (!fs.existsSync('specs')) {
     await fs.promises.mkdir('specs');
@@ -422,7 +426,7 @@ This is a directory for test plans.
 }
 
 function initRepoDone() {
-  console.log('✅ Done.');
+  console.log(' ✅ Done.');
 }
 
 async function loadPrompt(file: string, params: Record<string, string>) {
