@sun-asterisk/sungen 2.4.3 → 2.4.6

package/src/exporters/xlsx-exporter.ts

@@ -0,0 +1,301 @@
+/**
+ * Render the same rows/summary the CSV exporter produces into a styled .xlsx
+ * workbook. Keeps the BM-2-901-13 layout but adds:
+ *   - bold header row with filled background + white font
+ *   - borders on the data region
+ *   - text wrapping in Steps / Expected / Pre-condition / Test Data
+ *   - frozen header so the first data rows stay aligned with the title row
+ *   - sensible column widths
+ *   - category-separator rows rendered as a filled bar spanning the table
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import ExcelJS from 'exceljs';
+import { ScreenSummary, TestCaseRow } from './types';
+import { getPackageVersion } from './package-info';
+
+const COL_COUNT = 16;
+const HEADER_FILL = 'FF1F4E78'; // deep blue band
+const HEADER_FONT = 'FFFFFFFF';
+const META_FILL = 'FFDCE6F1'; // soft blue for meta rows
+const CATEGORY_FILL = 'FFFFF2CC'; // soft yellow for group dividers
+const BORDER_COLOR = 'FFBFBFBF';
+
+type AnyCell = ExcelJS.Cell;
+type AnyRow = ExcelJS.Row;
+
+function applyBorder(cell: AnyCell): void {
+  cell.border = {
+    top: { style: 'thin', color: { argb: BORDER_COLOR } },
+    left: { style: 'thin', color: { argb: BORDER_COLOR } },
+    bottom: { style: 'thin', color: { argb: BORDER_COLOR } },
+    right: { style: 'thin', color: { argb: BORDER_COLOR } },
+  };
+}
+
+export function renderXlsx(
+  summary: ScreenSummary,
+  rows: TestCaseRow[],
+  specLink: string
+): ExcelJS.Workbook {
+  const wb = new ExcelJS.Workbook();
+  wb.creator = 'sungen delivery';
+  wb.created = new Date();
+  const ws = wb.addWorksheet('Testcases', {
+    views: [{ state: 'frozen', ySplit: 0, xSplit: 0 }],
+  });
+
+  const issueDate = (() => {
+    const d = new Date();
+    return `${String(d.getDate()).padStart(2, '0')}/${String(d.getMonth() + 1).padStart(2, '0')}/${d.getFullYear()}`;
+  })();
+
+  const total = summary.total || 1;
+  const pct = (n: number) => `${Math.round((n / total) * 100)}%`;
+
+  // -- Column widths (matches CSV column order) --
+  ws.columns = [
+    { width: 18 }, // TC ID
+    { width: 42 }, // Category 1
+    { width: 14 }, // Category 2
+    { width: 26 }, // Category 3
+    { width: 14 }, // Category 4
+    { width: 36 }, // Pre-condition
+    { width: 30 }, // Test Data
+    { width: 46 }, // Steps
+    { width: 52 }, // Expected results
+    { width: 10 }, // Priority
+    { width: 14 }, // Testcase type
+    { width: 14 }, // Test Result
+    { width: 14 }, // Executed Date
+    { width: 16 }, // Test Executor
+    { width: 38 }, // Test Environment
+    { width: 40 }, // Note
+  ];
+
+  // -- Top metadata band (rows 1-4) --
+  const titleLabel = `${summary.screen.toUpperCase()} TESTCASE`;
+  const titleRow = ws.addRow(['', '', '', titleLabel, '', '', 'No: BM-2-901-13']);
+  titleRow.getCell(4).font = { bold: true, size: 16 };
+  titleRow.getCell(4).alignment = { horizontal: 'center', vertical: 'middle' };
+  ws.mergeCells(titleRow.number, 4, titleRow.number, 6);
+  titleRow.getCell(7).font = { bold: true };
+  titleRow.height = 22;
+
+  const versionRow = ws.addRow(['', '', '', '', '', '', `Version: ${getPackageVersion()}`]);
+  versionRow.getCell(7).font = { bold: true };
+  const dateRow = ws.addRow(['', '', '', '', '', '', `Issue Date: ${issueDate}`]);
+  dateRow.getCell(7).font = { bold: true };
+  const companyRow = ws.addRow([
+    'SUN ASTERISK VIETNAM CO., LTD',
+    '',
+    '',
+    '',
+    '',
+    '',
+    'ISO/IEC 27001:2022 & ISO 9001:2015',
+  ]);
+  companyRow.getCell(1).font = { bold: true };
+  companyRow.getCell(7).font = { bold: true };
+
+  ws.addRow([]); // spacer
+
+  // -- Summary band --
+  const summaryHeader = ws.addRow([
+    '',
+    '',
+    'Total TCs',
+    'Passed',
+    'Failed',
+    'Pending',
+    'N/A',
+    'Remaining',
+  ]);
+  for (let i = 3; i <= 8; i++) {
+    const c = summaryHeader.getCell(i);
+    c.font = { bold: true, color: { argb: HEADER_FONT } };
+    c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: HEADER_FILL } };
+    c.alignment = { horizontal: 'center', vertical: 'middle' };
+    applyBorder(c);
+  }
+
+  const summaryCounts = ws.addRow([
+    '',
+    '',
+    summary.total,
+    summary.passed,
+    summary.failed,
+    summary.pending,
+    summary.na,
+    summary.pending + summary.na,
+  ]);
+  for (let i = 3; i <= 8; i++) {
+    const c = summaryCounts.getCell(i);
+    c.font = { bold: true };
+    c.alignment = { horizontal: 'center' };
+    c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: META_FILL } };
+    applyBorder(c);
+  }
+
+  const summaryPct = ws.addRow([
+    '',
+    '',
+    '',
+    pct(summary.passed),
+    pct(summary.failed),
+    pct(summary.pending),
+    pct(summary.na),
+    pct(summary.pending + summary.na),
+  ]);
+  for (let i = 4; i <= 8; i++) {
+    const c = summaryPct.getCell(i);
+    c.alignment = { horizontal: 'center' };
+    c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: META_FILL } };
+    applyBorder(c);
+  }
+
+  ws.addRow([]); // spacer
+
+  const specRow = ws.addRow(['Spec/Design link:', specLink]);
+  specRow.getCell(1).font = { bold: true };
+  specRow.getCell(2).font = { color: { argb: 'FF1F4E78' }, underline: true };
+
+  ws.addRow([]); // spacer
+
+  const legendRow = ws.addRow(['*: Mandatory']);
+  legendRow.getCell(1).font = { italic: true, color: { argb: 'FF808080' } };
+
+  // -- Column header row (bold, filled, wrapped) --
+  const headerRow = ws.addRow([
+    'TC ID*',
+    '{Category 1}',
+    '{Category 2}',
+    '{Category 3}',
+    '{Category 4}',
+    'Pre-condition',
+    'Test Data',
+    'Steps*',
+    'Expected results*',
+    'Priority',
+    'Testcase type',
+    'Test Result*',
+    'Executed Date*',
+    'Test Executor*',
+    'Test Environment',
+    'Note\n(Test evidence, DefectID, Actual result)',
+  ]);
+  headerRow.height = 38;
+  headerRow.eachCell((cell) => {
+    cell.font = { bold: true, color: { argb: HEADER_FONT } };
+    cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: HEADER_FILL } };
+    cell.alignment = { horizontal: 'center', vertical: 'middle', wrapText: true };
+    applyBorder(cell);
+  });
+
+  // Freeze everything above and below the header row — reveal header when scrolling.
+  ws.views = [{ state: 'frozen', ySplit: headerRow.number }];
+
+  // -- Data rows grouped by category --
+  const order = ['Accessing', 'GUI', 'Function'];
+  const grouped = new Map<string, TestCaseRow[]>();
+  for (const r of rows) {
+    const g = grouped.get(r.category2) || [];
+    g.push(r);
+    grouped.set(r.category2, g);
+  }
+  const emittedGroups = new Set<string>();
+
+  function emitGroup(groupName: string, groupRows: TestCaseRow[]): void {
+    const divider = ws.addRow(['', groupName]);
+    divider.getCell(2).font = { bold: true };
+    divider.eachCell({ includeEmpty: false }, (cell) => {
+      cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: CATEGORY_FILL } };
+    });
+    // Fill the full width so the band spans the whole table
+    for (let i = 1; i <= COL_COUNT; i++) {
+      const c = divider.getCell(i);
+      c.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: CATEGORY_FILL } };
+      applyBorder(c);
+    }
+
+    for (const r of groupRows) {
+      const row = ws.addRow([
+        r.tcId,
+        r.category1,
+        '',
+        '',
+        '',
+        r.precondition,
+        r.testData,
+        r.steps,
+        r.expectedResults,
+        r.priority,
+        r.testcaseType,
+        r.testResult,
+        r.executedDate,
+        r.testExecutor,
+        r.testEnvironment,
+        r.note,
+      ]);
+      row.alignment = { vertical: 'top', wrapText: true };
+      row.eachCell({ includeEmpty: true }, (cell, colNumber) => {
+        applyBorder(cell);
+        if (colNumber === 1) {
+          cell.font = { bold: true };
+        }
+        if (colNumber === 12) {
+          // Test Result — colour-code
+          const val = String(cell.value || '');
+          if (val === 'Passed') {
+            cell.font = { color: { argb: 'FF107C41' }, bold: true };
+          } else if (val === 'Failed') {
+            cell.font = { color: { argb: 'FFC00000' }, bold: true };
+          } else if (val === 'Pending') {
+            cell.font = { color: { argb: 'FF996D00' }, bold: true };
+          } else if (val === 'N/A') {
+            cell.font = { color: { argb: 'FF808080' } };
+          }
+        }
+      });
+    }
+  }
+
+  for (const groupName of order) {
+    const groupRows = grouped.get(groupName);
+    if (!groupRows || groupRows.length === 0) continue;
+    emittedGroups.add(groupName);
+    emitGroup(groupName, groupRows);
+  }
+  for (const [groupName, groupRows] of grouped.entries()) {
+    if (emittedGroups.has(groupName)) continue;
+    emitGroup(groupName, groupRows);
+  }
+
+  // Auto-filter on the header row so QA can filter by result / priority / category
+  ws.autoFilter = {
+    from: { row: headerRow.number, column: 1 },
+    to: { row: ws.rowCount, column: COL_COUNT },
+  };
+
+  return wb;
+}
+
+/**
+ * Write the workbook to `qa/deliverables/<screen>-testcases.xlsx`.
+ * Directory is created on demand. Returns the absolute output path.
+ */
+export async function writeXlsx(
+  cwd: string,
+  screen: string,
+  wb: ExcelJS.Workbook
+): Promise<string> {
+  const outDir = path.join(cwd, 'qa', 'deliverables');
+  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir, { recursive: true });
+  const outPath = path.join(outDir, `${screen}-testcases.xlsx`);
+  await wb.xlsx.writeFile(outPath);
+  return outPath;
+}
+
+void applyBorder;
+void ({} as AnyRow);

package/src/generators/test-generator/utils/selector-resolver.ts

@@ -218,6 +218,14 @@ export class SelectorResolver {
       'tab': () => ({ strategy: 'role', role: 'tab', name: label, value: 'tab' }),
       'dialog': () => ({ strategy: 'role', role: 'dialog', name: label, value: 'dialog' }),
       'alertdialog': () => ({ strategy: 'role', role: 'alertdialog', name: label, value: 'alertdialog' }),
+      'combobox': () => ({ strategy: 'role', role: 'combobox', name: label, value: 'combobox' }),
+      'menuitem': () => ({ strategy: 'role', role: 'menuitem', name: label, value: 'menuitem' }),
+      'progressbar': () => ({ strategy: 'role', role: 'progressbar', name: label, value: 'progressbar' }),
+      'region': () => ({ strategy: 'role', role: 'region', name: label, value: 'region' }),
+      'article': () => ({ strategy: 'role', role: 'article', name: label, value: 'article' }),
+      'cell': () => ({ strategy: 'role', role: 'cell', name: label, value: 'cell' }),
+      'status': () => ({ strategy: 'role', role: 'status', name: label, value: 'status' }),
+      'navigation': () => ({ strategy: 'role', role: 'navigation', name: label, value: 'navigation' }),
     };
 
     const factory = strategyMap[normalized];
@@ -263,6 +271,24 @@ export class SelectorResolver {
       // Modal/drawer alias → dialog role
       'modal': 'dialog',
       'drawer': 'dialog',
+      // Dropdown/select alias -> combobox role
+      'dropdown': 'combobox',
+      'select': 'combobox',
+      // Data aliases
+      'item': 'listitem',
+      'card': 'article',
+      'cell': 'cell',
+      'section': 'region',
+      // Feedback aliases
+      'badge': 'text',
+      'tooltip': 'text',
+      'tag': 'text',
+      // Trigger aliases
+      'menuitem': 'menuitem',
+      // System aliases
+      'progressbar': 'progressbar',
+      'spinner': 'status',
+      'breadcrumb': 'navigation',
     };
     return aliasMap[elementType] || elementType;
   }

package/src/orchestrator/ai-rules-updater.ts

@@ -18,11 +18,15 @@ export const AI_RULES_FILE_MAPPING: [string, string][] = [
   ['claude-cmd-add-screen.md', '.claude/commands/sungen/add-screen.md'],
   ['claude-cmd-create-test.md', '.claude/commands/sungen/create-test.md'],
   ['claude-cmd-run-test.md', '.claude/commands/sungen/run-test.md'],
+  ['claude-cmd-review.md', '.claude/commands/sungen/review.md'],
+  ['claude-cmd-delivery.md', '.claude/commands/sungen/delivery.md'],
 
   // Commands — GitHub Copilot
   ['copilot-cmd-add-screen.md', '.github/prompts/sungen-add-screen.prompt.md'],
   ['copilot-cmd-create-test.md', '.github/prompts/sungen-create-test.prompt.md'],
   ['copilot-cmd-run-test.md', '.github/prompts/sungen-run-test.prompt.md'],
+  ['copilot-cmd-review.md', '.github/prompts/sungen-review.prompt.md'],
+  ['copilot-cmd-delivery.md', '.github/prompts/sungen-delivery.prompt.md'],
 
   // Skills — Claude Code
   ['claude-skill-gherkin-syntax.md', '.claude/skills/sungen-gherkin-syntax/SKILL.md'],
@@ -33,6 +37,10 @@ export const AI_RULES_FILE_MAPPING: [string, string][] = [
   ['claude-skill-selector-fix.md', '.claude/skills/sungen-selector-fix/SKILL.md'],
   ['claude-skill-tc-review.md', '.claude/skills/sungen-tc-review/SKILL.md'],
   ['claude-skill-viewpoint.md', '.claude/skills/sungen-viewpoint/SKILL.md'],
+  ['claude-skill-delivery.md', '.claude/skills/sungen-delivery/SKILL.md'],
+  ['claude-skill-capture-figma.md', '.claude/skills/sungen-capture-figma/SKILL.md'],
+  ['claude-skill-capture-local.md', '.claude/skills/sungen-capture-local/SKILL.md'],
+  ['claude-skill-capture-live.md', '.claude/skills/sungen-capture-live/SKILL.md'],
 
   // Skills — GitHub Copilot
   ['github-skill-sungen-gherkin-syntax.md', '.github/skills/sungen-gherkin-syntax/SKILL.md'],
@@ -43,6 +51,10 @@ export const AI_RULES_FILE_MAPPING: [string, string][] = [
   ['github-skill-sungen-selector-fix.md', '.github/skills/sungen-selector-fix/SKILL.md'],
   ['github-skill-sungen-tc-review.md', '.github/skills/sungen-tc-review/SKILL.md'],
   ['github-skill-sungen-viewpoint.md', '.github/skills/sungen-viewpoint/SKILL.md'],
+  ['github-skill-sungen-delivery.md', '.github/skills/sungen-delivery/SKILL.md'],
+  ['github-skill-sungen-capture-figma.md', '.github/skills/sungen-capture-figma/SKILL.md'],
+  ['github-skill-sungen-capture-local.md', '.github/skills/sungen-capture-local/SKILL.md'],
+  ['github-skill-sungen-capture-live.md', '.github/skills/sungen-capture-live/SKILL.md'],
 ];
 
 export class AIRulesUpdater {

package/src/orchestrator/project-initializer.ts

@@ -6,6 +6,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { execSync } from 'child_process';
+import { AI_RULES_FILE_MAPPING } from './ai-rules-updater';
 
 export class ProjectInitializer {
   private baseCwd: string;
@@ -62,6 +63,9 @@ export class ProjectInitializer {
     // Create VS Code settings for Copilot auto-attach
     this.createVSCodeSettings();
 
+    // Create root .mcp.json for Claude Code
+    this.createClaudeMCPConfig();
+
     // Display summary
     this.displaySummary(normalizedProjectName);
   }
@@ -190,46 +194,112 @@ export class ProjectInitializer {
   private createVSCodeSettings(): void {
     const settingsPath = path.join(this.cwd, '.vscode', 'settings.json');
 
-    if (fs.existsSync(settingsPath)) {
-      this.skippedItems.push('.vscode/settings.json');
-      return;
-    }
+    if (!fs.existsSync(settingsPath)) {
+      const settingsDir = path.dirname(settingsPath);
+      if (!fs.existsSync(settingsDir)) {
+        fs.mkdirSync(settingsDir, { recursive: true });
+      }
 
-    const settingsDir = path.dirname(settingsPath);
-    if (!fs.existsSync(settingsDir)) {
-      fs.mkdirSync(settingsDir, { recursive: true });
+      const settings = {
+        'github.copilot.chat.agent.runTasks': true,
+        'chat.tools.terminal.autoApprove': {
+          sungen: true,
+          'npx playwright': true,
+        },
+      };
+
+      fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + '\n', 'utf-8');
+      this.createdItems.push('.vscode/settings.json');
+    } else {
+      this.skippedItems.push('.vscode/settings.json');
     }
 
-    const settings = {
-      'github.copilot.chat.agent.runTasks': true,
-      'chat.tools.terminal.autoApprove': {
-        sungen: true,
-        'npx playwright': true,
+    // .vscode/mcp.json (Copilot format) — safe-merge Playwright + Figma entries
+    this.mergeMCPConfig(
+      path.join(this.cwd, '.vscode', 'mcp.json'),
+      'servers',
+      {
+        playwright: {
+          command: 'npx',
+          args: ['@playwright/mcp@latest'],
+        },
+        figma: {
+          type: 'http',
+          url: 'https://mcp.figma.com/mcp',
+        },
       },
-    };
-
-    fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + '\n', 'utf-8');
-    this.createdItems.push('.vscode/settings.json');
-
-    // Create MCP config for Playwright browser tools
-    const mcpPath = path.join(this.cwd, '.vscode', 'mcp.json');
-
-    if (fs.existsSync(mcpPath)) {
-      this.skippedItems.push('.vscode/mcp.json');
-      return;
-    }
+      '.vscode/mcp.json',
+    );
+  }
 
-    const mcpConfig = {
-      servers: {
+  /**
+   * Create root .mcp.json for Claude Code — safe-merge Playwright + Figma entries
+   */
+  private createClaudeMCPConfig(): void {
+    this.mergeMCPConfig(
+      path.join(this.cwd, '.mcp.json'),
+      'mcpServers',
+      {
         playwright: {
+          type: 'stdio',
           command: 'npx',
           args: ['@playwright/mcp@latest'],
         },
+        figma: {
+          type: 'http',
+          url: 'https://mcp.figma.com/mcp',
+        },
       },
-    };
+      '.mcp.json',
+    );
+  }
+
+  /**
+   * Add MCP server entries without overwriting user config.
+   * Preserves existing entries with the same key — user edits always win.
+   */
+  private mergeMCPConfig(
+    filePath: string,
+    rootKey: string,
+    newServers: Record<string, unknown>,
+    displayName: string,
+  ): void {
+    const dir = path.dirname(filePath);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+
+    let config: Record<string, Record<string, unknown>> = {};
+    const existed = fs.existsSync(filePath);
+
+    if (existed) {
+      try {
+        config = JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+      } catch {
+        this.skippedItems.push(`${displayName} (invalid JSON, skipped)`);
+        return;
+      }
+    }
 
-    fs.writeFileSync(mcpPath, JSON.stringify(mcpConfig, null, 2) + '\n', 'utf-8');
-    this.createdItems.push('.vscode/mcp.json');
+    if (!config[rootKey] || typeof config[rootKey] !== 'object') {
+      config[rootKey] = {};
+    }
+
+    let added = 0;
+    for (const [name, entry] of Object.entries(newServers)) {
+      if (!config[rootKey][name]) {
+        config[rootKey][name] = entry;
+        added++;
+      }
+    }
+
+    if (added === 0) {
+      this.skippedItems.push(displayName);
+      return;
+    }
+
+    fs.writeFileSync(filePath, JSON.stringify(config, null, 2) + '\n', 'utf-8');
+    this.createdItems.push(existed ? `${displayName} (updated)` : displayName);
   }
 
   /**
@@ -264,51 +334,14 @@ export class ProjectInitializer {
   }
 
   /**
-   * Create AI rules files for GitHub Copilot and Claude Code
+   * Create AI rules files for GitHub Copilot and Claude Code.
+   * Shares `AI_RULES_FILE_MAPPING` with `sungen update` so a newly added
+   * skill / command template only needs to be registered once.
    */
   private createAIRules(): void {
     const aiTemplateDir = path.join(__dirname, 'templates', 'ai-instructions');
 
-    // File mapping: [templateFile, outputPath]
-    const fileMapping: [string, string][] = [
-      // Config
-      ['claude-config.md', 'CLAUDE.md'],
-      ['copilot-config.md', '.github/copilot-instructions.md'],
-
-      // Commands — Claude Code
-      ['claude-cmd-add-screen.md', '.claude/commands/sungen/add-screen.md'],
-      ['claude-cmd-create-test.md', '.claude/commands/sungen/create-test.md'],
-      ['claude-cmd-run-test.md', '.claude/commands/sungen/run-test.md'],
-      ['claude-cmd-review.md', '.claude/commands/sungen/review.md'],
-
-      // Commands — GitHub Copilot
-      ['copilot-cmd-add-screen.md', '.github/prompts/sungen-add-screen.prompt.md'],
-      ['copilot-cmd-create-test.md', '.github/prompts/sungen-create-test.prompt.md'],
-      ['copilot-cmd-run-test.md', '.github/prompts/sungen-run-test.prompt.md'],
-      ['copilot-cmd-review.md', '.github/prompts/sungen-review.prompt.md'],
-
-      // Skills — Claude Code
-      ['claude-skill-gherkin-syntax.md', '.claude/skills/sungen-gherkin-syntax/SKILL.md'],
-      ['claude-skill-selector-keys.md', '.claude/skills/sungen-selector-keys/SKILL.md'],
-      ['claude-skill-error-mapping.md', '.claude/skills/sungen-error-mapping/SKILL.md'],
-      ['claude-skill-tc-generation.md', '.claude/skills/sungen-tc-generation/SKILL.md'],
-      ['claude-skill-test-design-techniques.md', '.claude/skills/sungen-test-design-techniques/SKILL.md'],
-      ['claude-skill-selector-fix.md', '.claude/skills/sungen-selector-fix/SKILL.md'],
-      ['claude-skill-tc-review.md', '.claude/skills/sungen-tc-review/SKILL.md'],
-      ['claude-skill-viewpoint.md', '.claude/skills/sungen-viewpoint/SKILL.md'],
-
-      // Skills — GitHub Copilot (separate copies with Copilot-friendly descriptions)
-      ['github-skill-sungen-gherkin-syntax.md', '.github/skills/sungen-gherkin-syntax/SKILL.md'],
-      ['github-skill-sungen-selector-keys.md', '.github/skills/sungen-selector-keys/SKILL.md'],
-      ['github-skill-sungen-error-mapping.md', '.github/skills/sungen-error-mapping/SKILL.md'],
-      ['github-skill-sungen-tc-generation.md', '.github/skills/sungen-tc-generation/SKILL.md'],
-      ['github-skill-sungen-test-design-techniques.md', '.github/skills/sungen-test-design-techniques/SKILL.md'],
-      ['github-skill-sungen-selector-fix.md', '.github/skills/sungen-selector-fix/SKILL.md'],
-      ['github-skill-sungen-tc-review.md', '.github/skills/sungen-tc-review/SKILL.md'],
-      ['github-skill-sungen-viewpoint.md', '.github/skills/sungen-viewpoint/SKILL.md'],
-    ];
-
-    for (const [templateFile, outputRelPath] of fileMapping) {
+    for (const [templateFile, outputRelPath] of AI_RULES_FILE_MAPPING) {
       const outputPath = path.join(this.cwd, outputRelPath);
 
       if (fs.existsSync(outputPath)) {

package/src/orchestrator/screen-manager.ts

@@ -10,6 +10,7 @@ import { chromium } from '@playwright/test';
 export interface ScreenOptions {
   name: string;
   path?: string;
+  capture?: boolean;
   feature?: string;
   description?: string;
 }
@@ -185,9 +186,9 @@ export class ScreenManager {
       ].join('\n'), 'utf-8');
     }
 
-    // Auto-screenshot: capture page if --path is provided
+    // Auto-screenshot: capture page only when --capture is set (requires --path)
     // Use filename (not screenName) so each feature gets its own screenshots
-    if (options.path) {
+    if (options.capture && options.path) {
       await this.captureScreenshot(options.path, requirementsUiDir, filename);
     }
 
@@ -295,6 +296,8 @@ export class ScreenManager {
 
 ## Overview
 - **URL Path:** ${pagePath}
+- **Live URL:** <!-- optional, full URL for live page capture (falls back to baseURL + URL Path) -->
+- **Figma URL:** <!-- optional, Figma frame URL for design-driven capture (requires Figma MCP) -->
 - **Auth Required:** no
 - **Platform:** web
 

package/src/orchestrator/templates/ai-instructions/claude-cmd-add-screen.md

@@ -1,8 +1,8 @@
 ---
 name: add-screen
-description: 'Add a new Sungen screen — scaffolds directories and delegates to create-test for test case creation'
+description: 'Add a new Sungen screen — scaffolds directories, helps fill spec.md, and can capture visuals from Figma (pre-launch) or live page via the capture skills'
 argument-hint: [screen-name] [url-path]
-allowed-tools: Read, Grep, Bash, Glob, AskUserQuestion
+allowed-tools: Read, Grep, Bash, Glob, Edit, Write, AskUserQuestion, mcp__playwright__browser_navigate, mcp__playwright__browser_take_screenshot, mcp__playwright__browser_snapshot, mcp__figma__get_design_context, mcp__figma__get_variable_defs, mcp__figma__get_screenshot
 ---
 
 You are adding a new Sungen screen for test generation.
@@ -25,20 +25,29 @@ Run:
 sungen add --screen <screen> --path <path>
 ```
 
-### 2. Fill requirements (recommended)
+### 2. Fill spec.md
 
-Ask the user: "Would you like to fill in `requirements/spec.md` now? This helps generate higher quality test cases."
+Use `AskUserQuestion`: *"Fill `spec.md` now?"* — offer **Yes, fill now (Recommended)** / **Skip, fill later**.
 
-- If yes → open `qa/screens/<screen>/requirements/spec.md` and help the user fill sections, fields, validation rules, business rules, and states.
-- If they have UI designs (screenshots, Figma exports, mockups) → suggest copying them to `requirements/ui/`.
-- If no → proceed to step 3.
+If yes → open `qa/screens/<screen>/requirements/spec.md` and help the user fill sections, fields, validation rules, business rules, and states. Especially prompt for the optional **Figma URL** and **Live URL** fields in Overview — those unlock auto-capture without re-asking next run.
 
-### 3. Next steps
+### 3. Capture visual source
+
+Use `AskUserQuestion`: *"Capture a visual reference for this screen?"* — always offer all three so pre-launch projects work:
+
+- **Figma design** (Recommended for pre-launch) — invoke `sungen-capture-figma` skill
+- **Live page scan** (dev/staging is up) — invoke `sungen-capture-live` skill
+- **Skip** — user will drop images manually into `requirements/ui/` later, or rely on `/sungen:create-test` to prompt again
+
+Each capture skill writes outputs into `qa/screens/<screen>/requirements/ui/` and reports back a summary. Do not inline capture logic here — always delegate to the skill so behavior stays consistent with `/sungen:create-test`.
+
+If the user has additional UI designs (mockups, hand-drawn sketches), suggest copying them to `requirements/ui/` — `sungen-capture-local` will pick them up during `/sungen:create-test`.
+
+### 4. Next steps
 
 Tell the user what was created, then use `AskUserQuestion` to offer next steps:
 
 - **`/sungen:create-test <screen>`** — Create test cases from requirements/designs (Recommended)
-- **Fill `requirements/spec.md`** — Write screen specs first for better test quality
 - **Done for now** — I'll come back later
 
 If user picks `/sungen:create-test`, **you MUST use the Skill tool** to invoke it. Do NOT generate test cases yourself — the skill auto-loads `sungen-gherkin-syntax` and `sungen-tc-generation`.