@bovinphang/frontend-craft 2.6.0 → 2.8.0

package/skills/fec-drawio-studio/scripts/shape-query.mjs

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { formatResult, parseArgs, skillDir } from "./studio-core.mjs";
+
+const INDEX = path.join(skillDir, "data", "shape-index.json");
+const ALIASES = new Map([
+  ["亚马逊", "aws"],
+  ["阿里云", "alibaba cloud"],
+  ["微软云", "azure"],
+  ["谷歌云", "gcp"],
+  ["云", "cloud"],
+  ["数据库", "database"],
+  ["队列", "queue"],
+  ["网关", "gateway"],
+  ["服务", "service"],
+  ["用户", "user"],
+  ["角色", "actor"],
+  ["流程", "flowchart"],
+  ["容器", "container"],
+  ["网络", "network"],
+  ["交换机", "switch"],
+  ["路由器", "router"],
+  ["函数", "lambda"],
+  ["对象存储", "storage"],
+  ["消息", "message"],
+]);
+
+export function loadShapes() {
+  return JSON.parse(fs.readFileSync(INDEX).toString("utf8"));
+}
+
+export function queryShapes(shapes, query, options = {}) {
+  const terms = expandTerms(query);
+  const category = options.category
+    ? String(options.category).toLowerCase()
+    : "";
+  const scored = [];
+  for (const [index, shape] of shapes.entries()) {
+    const haystack =
+      `${shape.title ?? ""} ${shape.tags ?? ""} ${shape.style ?? ""}`.toLowerCase();
+    if (category && !haystack.includes(category)) continue;
+    let score = 0;
+    const title = String(shape.title ?? "").toLowerCase();
+    const tags = String(shape.tags ?? "").toLowerCase();
+    for (const term of terms) {
+      if (title === term) score += 80;
+      else if (title.includes(term)) score += 45;
+      if (tags.split(/\s+/).includes(term)) score += 30;
+      else if (tags.includes(term)) score += 12;
+      if (fuzzyContains(haystack, term)) score += 4;
+    }
+    if (score > 0)
+      scored.push({
+        index,
+        score,
+        titleHits: terms.filter((term) => title.includes(term)).length,
+        shape,
+      });
+  }
+  return scored
+    .sort(
+      (a, b) =>
+        b.score - a.score ||
+        b.titleHits - a.titleHits ||
+        String(a.shape.title).localeCompare(String(b.shape.title)) ||
+        a.index - b.index,
+    )
+    .slice(0, Number(options.limit ?? 10))
+    .map(({ shape, score }) => ({
+      title: shape.title,
+      w: shape.w,
+      h: shape.h,
+      style: shape.style,
+      score,
+    }));
+}
+
+function expandTerms(query) {
+  const normalized = String(query ?? "").toLowerCase();
+  const raw = normalized.match(/[\p{L}\p{N}._-]+/gu) ?? [];
+  const expanded = [];
+  for (const term of raw) {
+    expanded.push(ALIASES.get(term) ?? term);
+    if (term.includes("-")) expanded.push(...term.split("-"));
+  }
+  return [
+    ...new Set(
+      expanded.join(" ").match(/[a-z0-9._-]+|[\u4e00-\u9fff]+/g) ?? [],
+    ),
+  ].filter((term) => term.length >= 2);
+}
+
+function fuzzyContains(text, term) {
+  if (term.length < 4) return false;
+  let cursor = 0;
+  for (const ch of text) {
+    if (ch === term[cursor]) cursor += 1;
+    if (cursor === term.length) return true;
+  }
+  return false;
+}
+
+const args = parseArgs(process.argv.slice(2));
+const query = args._.join(" ");
+if (!query) {
+  console.error(
+    "usage: node shape-query.mjs <keywords> [--limit 10] [--category aws] [--format markdown|json]",
+  );
+  process.exit(2);
+}
+const results = queryShapes(loadShapes(), query, args);
+if (results.length === 0) {
+  console.error(`no shapes matched ${JSON.stringify(query)}`);
+  process.exit(1);
+}
+if ((args.format ?? (args.json ? "json" : "markdown")) === "json") {
+  process.stdout.write(`${JSON.stringify(results, null, 2)}\n`);
+} else {
+  process.stdout.write(formatResult({ title: "Shape Query", query, results }));
+}

package/skills/fec-drawio-studio/scripts/studio-core.mjs

@@ -0,0 +1,139 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+export const skillDir = path.resolve(scriptDir, "..");
+
+export function readText(filePath) {
+  return fs.readFileSync(filePath, "utf8");
+}
+
+export function writeText(filePath, body) {
+  fs.mkdirSync(path.dirname(path.resolve(filePath)), { recursive: true });
+  fs.writeFileSync(filePath, body, "utf8");
+}
+
+export function parseArgs(argv) {
+  const args = { _: [] };
+  for (let i = 0; i < argv.length; i += 1) {
+    const token = argv[i];
+    if (!token.startsWith("--")) {
+      args._.push(token);
+      continue;
+    }
+    const [rawKey, inline] = token.slice(2).split("=", 2);
+    const key = rawKey.replace(/-([a-z])/g, (_, ch) => ch.toUpperCase());
+    if (inline !== undefined) {
+      args[key] = inline;
+    } else if (argv[i + 1] && !argv[i + 1].startsWith("--")) {
+      args[key] = argv[i + 1];
+      i += 1;
+    } else {
+      args[key] = true;
+    }
+  }
+  return args;
+}
+
+export function formatResult(result, format = "markdown") {
+  if (format === "json") return `${JSON.stringify(result, null, 2)}\n`;
+  const lines = [`# ${result.title ?? "Drawio Studio Result"}`, ""];
+  for (const [key, value] of Object.entries(result)) {
+    if (key === "title") continue;
+    if (Array.isArray(value)) {
+      lines.push(`## ${label(key)}`, "");
+      if (value.length === 0) lines.push("- None");
+      else for (const item of value) lines.push(`- ${typeof item === "string" ? item : JSON.stringify(item)}`);
+      lines.push("");
+    } else if (value && typeof value === "object") {
+      lines.push(`## ${label(key)}`, "", "```json", JSON.stringify(value, null, 2), "```", "");
+    } else {
+      lines.push(`- ${label(key)}: ${String(value)}`);
+    }
+  }
+  return `${lines.join("\n").trimEnd()}\n`;
+}
+
+export function label(value) {
+  return value.replace(/([A-Z])/g, " $1").replace(/^./, (ch) => ch.toUpperCase());
+}
+
+export function xmlEscape(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+export function snap(value, grid = 10) {
+  return Math.round(value / grid) * grid;
+}
+
+export function walkFiles(root, predicate) {
+  const out = [];
+  const skip = new Set([".git", "node_modules", "dist", "target", "vendor", ".next", ".nuxt", "coverage"]);
+  function visit(dir) {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      if (skip.has(entry.name)) continue;
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) visit(full);
+      else if (!predicate || predicate(full)) out.push(full);
+    }
+  }
+  visit(path.resolve(root));
+  return out.sort();
+}
+
+export function toPosix(value) {
+  return value.split(path.sep).join("/");
+}
+
+export function commonPrefix(values) {
+  if (values.length === 0) return "";
+  let prefix = values[0];
+  for (const value of values.slice(1)) {
+    while (prefix && !value.startsWith(prefix)) prefix = prefix.slice(0, -1);
+  }
+  return prefix.replace(/[^/]*$/, "");
+}
+
+export function reduceTransitive(nodes, edges) {
+  const ids = new Set(nodes.map((node) => node.id));
+  const unique = [];
+  const seen = new Set();
+  for (const edge of edges) {
+    if (!ids.has(edge.source) || !ids.has(edge.target) || edge.source === edge.target) continue;
+    const key = `${edge.source}\0${edge.target}`;
+    if (!seen.has(key)) {
+      seen.add(key);
+      unique.push({ source: edge.source, target: edge.target });
+    }
+  }
+  const adjacency = new Map();
+  for (const edge of unique) {
+    if (!adjacency.has(edge.source)) adjacency.set(edge.source, new Set());
+    adjacency.get(edge.source).add(edge.target);
+  }
+  return unique.filter((edge) => !hasAlternatePath(edge.source, edge.target, adjacency, edge));
+}
+
+function hasAlternatePath(source, target, adjacency, skipped) {
+  const stack = [...(adjacency.get(source) ?? [])].filter((next) => !(source === skipped.source && next === skipped.target));
+  const seen = new Set();
+  while (stack.length) {
+    const next = stack.pop();
+    if (next === target) return true;
+    if (!next || seen.has(next)) continue;
+    seen.add(next);
+    for (const child of adjacency.get(next) ?? []) stack.push(child);
+  }
+  return false;
+}
+
+export function printOrWrite(body, output) {
+  if (output) writeText(output, body);
+  else process.stdout.write(body);
+}

package/skills/fec-drawio-studio/styles/built-in/corporate.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "../schema.json",
+  "name": "corporate",
+  "version": 1,
+  "default": false,
+  "source": { "type": "built-in" },
+  "confidence": "high",
+  "palette": {
+    "primary":   { "fillColor": "#e3f2fd", "strokeColor": "#1565c0" },
+    "success":   { "fillColor": "#e8f5e9", "strokeColor": "#2e7d32" },
+    "warning":   { "fillColor": "#fff9c4", "strokeColor": "#f57c00" },
+    "accent":    { "fillColor": "#fff3e0", "strokeColor": "#e65100" },
+    "danger":    { "fillColor": "#ffebee", "strokeColor": "#c62828" },
+    "neutral":   { "fillColor": "#eceff1", "strokeColor": "#455a64" },
+    "secondary": { "fillColor": "#f3e5f5", "strokeColor": "#6a1b9a" }
+  },
+  "roles": {
+    "service":  "primary",
+    "database": "success",
+    "queue":    "warning",
+    "gateway":  "accent",
+    "error":    "danger",
+    "external": "neutral",
+    "security": "secondary"
+  },
+  "shapes": {
+    "service":   "rounded=0",
+    "database":  "shape=cylinder3",
+    "queue":     "rounded=0",
+    "decision":  "rhombus",
+    "external":  "rounded=0;dashed=1",
+    "container": "swimlane;startSize=30"
+  },
+  "font": {
+    "fontFamily": "Arial",
+    "fontSize": 11,
+    "titleFontSize": 13,
+    "titleBold": true
+  },
+  "edges": {
+    "style": "edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1",
+    "arrow": "endArrow=classic;endFill=1",
+    "dashedFor": ["optional", "async"]
+  },
+  "extras": {
+    "sketch": false,
+    "globalStrokeWidth": 1
+  }
+}

package/skills/fec-drawio-studio/styles/built-in/default.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "../schema.json",
+  "name": "default",
+  "version": 1,
+  "default": false,
+  "source": { "type": "built-in" },
+  "confidence": "high",
+  "palette": {
+    "primary":   { "fillColor": "#dae8fc", "strokeColor": "#6c8ebf" },
+    "success":   { "fillColor": "#d5e8d4", "strokeColor": "#82b366" },
+    "warning":   { "fillColor": "#fff2cc", "strokeColor": "#d6b656" },
+    "accent":    { "fillColor": "#ffe6cc", "strokeColor": "#d79b00" },
+    "danger":    { "fillColor": "#f8cecc", "strokeColor": "#b85450" },
+    "neutral":   { "fillColor": "#f5f5f5", "strokeColor": "#666666" },
+    "secondary": { "fillColor": "#e1d5e7", "strokeColor": "#9673a6" }
+  },
+  "roles": {
+    "service":  "primary",
+    "database": "success",
+    "queue":    "warning",
+    "gateway":  "accent",
+    "error":    "danger",
+    "external": "neutral",
+    "security": "secondary"
+  },
+  "shapes": {
+    "service":   "rounded=1",
+    "database":  "shape=cylinder3",
+    "queue":     "rounded=1",
+    "decision":  "rhombus",
+    "external":  "rounded=1;dashed=1",
+    "container": "swimlane;startSize=30"
+  },
+  "font": {
+    "fontFamily": "Helvetica",
+    "fontSize": 12,
+    "titleFontSize": 14,
+    "titleBold": true
+  },
+  "edges": {
+    "style": "edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1",
+    "arrow": "endArrow=classic;endFill=1",
+    "dashedFor": []
+  },
+  "extras": {
+    "sketch": false,
+    "globalStrokeWidth": 1
+  }
+}

package/skills/fec-drawio-studio/styles/built-in/handdrawn.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "../schema.json",
+  "name": "handdrawn",
+  "version": 1,
+  "default": false,
+  "source": { "type": "built-in" },
+  "confidence": "high",
+  "palette": {
+    "primary":   { "fillColor": "#ffe4b5", "strokeColor": "#b8651e" },
+    "success":   { "fillColor": "#def0dc", "strokeColor": "#5c8a49" },
+    "warning":   { "fillColor": "#fff4cc", "strokeColor": "#b8901a" },
+    "accent":    { "fillColor": "#ffd9b3", "strokeColor": "#c25100" },
+    "danger":    { "fillColor": "#ffcdbf", "strokeColor": "#a53d3d" },
+    "neutral":   { "fillColor": "#f5e6d3", "strokeColor": "#8b7355" },
+    "secondary": { "fillColor": "#e6d7e8", "strokeColor": "#7b4397" }
+  },
+  "roles": {
+    "service":  "primary",
+    "database": "success",
+    "queue":    "warning",
+    "gateway":  "accent",
+    "error":    "danger",
+    "external": "neutral",
+    "security": "secondary"
+  },
+  "shapes": {
+    "service":   "rounded=1",
+    "database":  "shape=cylinder3",
+    "queue":     "rounded=1",
+    "decision":  "rhombus",
+    "external":  "rounded=1;dashed=1",
+    "container": "swimlane;startSize=30"
+  },
+  "font": {
+    "fontFamily": "Helvetica",
+    "fontSize": 12,
+    "titleFontSize": 14,
+    "titleBold": true
+  },
+  "edges": {
+    "style": "edgeStyle=orthogonalEdgeStyle;curved=1;rounded=1;orthogonalLoop=1;jettySize=auto;html=1",
+    "arrow": "endArrow=classic;endFill=1",
+    "dashedFor": ["optional"]
+  },
+  "extras": {
+    "sketch": true,
+    "globalStrokeWidth": 2
+  }
+}

package/skills/fec-drawio-studio/styles/schema.json

@@ -0,0 +1,112 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://github.com/Agents365-ai/drawio-skill/styles/schema.json",
+  "title": "drawio-skill preset",
+  "type": "object",
+  "required": ["name", "version", "palette", "roles", "shapes", "font", "edges"],
+  "additionalProperties": false,
+  "properties": {
+    "$schema":    { "type": "string" },
+    "name":       { "type": "string", "pattern": "^[a-z0-9][a-z0-9_-]*$" },
+    "version":    { "type": "integer", "const": 1 },
+    "default":    { "type": "boolean" },
+    "confidence": { "type": "string", "enum": ["low", "medium", "high"] },
+    "source": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "type":          { "type": "string", "enum": ["xml", "image", "built-in", "hand-authored"] },
+        "path":          { "type": "string" },
+        "extracted_at":  { "type": "string", "pattern": "^\\d{4}-\\d{2}-\\d{2}$" }
+      }
+    },
+    "palette": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["primary", "success", "warning", "accent", "danger", "neutral", "secondary"],
+      "properties": {
+        "primary":   { "$ref": "#/$defs/colorPair" },
+        "success":   { "$ref": "#/$defs/colorPair" },
+        "warning":   { "$ref": "#/$defs/colorPair" },
+        "accent":    { "$ref": "#/$defs/colorPair" },
+        "danger":    { "$ref": "#/$defs/colorPair" },
+        "neutral":   { "$ref": "#/$defs/colorPair" },
+        "secondary": { "$ref": "#/$defs/colorPair" }
+      }
+    },
+    "roles": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "service":  { "$ref": "#/$defs/slotName" },
+        "database": { "$ref": "#/$defs/slotName" },
+        "queue":    { "$ref": "#/$defs/slotName" },
+        "gateway":  { "$ref": "#/$defs/slotName" },
+        "error":    { "$ref": "#/$defs/slotName" },
+        "external": { "$ref": "#/$defs/slotName" },
+        "security": { "$ref": "#/$defs/slotName" }
+      }
+    },
+    "shapes": {
+      "type": "object",
+      "additionalProperties": { "type": "string" },
+      "properties": {
+        "service":   { "type": "string" },
+        "database":  { "type": "string" },
+        "queue":     { "type": "string" },
+        "decision":  { "type": "string" },
+        "external":  { "type": "string" },
+        "container": { "type": "string" }
+      }
+    },
+    "font": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["fontFamily", "fontSize"],
+      "properties": {
+        "fontFamily":    { "type": "string" },
+        "fontSize":      { "type": "integer", "minimum": 8, "maximum": 36 },
+        "titleFontSize": { "type": "integer", "minimum": 8, "maximum": 48 },
+        "titleBold":     { "type": "boolean" }
+      }
+    },
+    "edges": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["style", "arrow"],
+      "properties": {
+        "style":      { "type": "string" },
+        "arrow":      { "type": "string" },
+        "dashedFor":  { "type": "array", "items": { "type": "string" } }
+      }
+    },
+    "extras": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "sketch":            { "type": "boolean" },
+        "globalStrokeWidth": { "type": "number", "minimum": 0.5, "maximum": 6 }
+      }
+    }
+  },
+  "$defs": {
+    "colorPair": {
+      "oneOf": [
+        { "type": "null" },
+        {
+          "type": "object",
+          "additionalProperties": false,
+          "required": ["fillColor", "strokeColor"],
+          "properties": {
+            "fillColor":   { "type": "string", "pattern": "^#[0-9A-Fa-f]{6}$" },
+            "strokeColor": { "type": "string", "pattern": "^#[0-9A-Fa-f]{6}$" }
+          }
+        }
+      ]
+    },
+    "slotName": {
+      "type": "string",
+      "enum": ["primary", "success", "warning", "accent", "danger", "neutral", "secondary"]
+    }
+  }
+}

package/skills/fec-e2e-testing/SKILL.md

@@ -1,40 +1,42 @@
 ---
 name: fec-e2e-testing
-description: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, 端到端测试, Playwright, Cypress.
+description: Use when creating, maintaining, debugging, or reviewing real-browser end-to-end tests with Playwright or Cypress, including Page Object models, CI artifacts, traces, flaky tests, cross-page visual regression, and critical user journeys such as login, payment, permissions, or CRUD. For layer planning or tests close to UI components, choose the matching testing workflow first; Chinese triggers include E2E, end-to-end testing, Playwright, Cypress.
 ---
 
-# E2E 测试规范
+# E2E Test Specification
 
 ## Purpose
 
-用真实浏览器验证关键用户旅程，发现单元测试无法覆盖的集成风险。
+Validate key user journeys with real browsers and uncover integration risks not covered by unit tests.
 
 ## Procedure
 
-1. 明确关键旅程：登录、购买、创建、搜索、权限、支付等跨页面流程优先；若只是选择测试层级，先做测试分层规划。
-2. 新项目优先 Playwright；已有 Cypress 项目沿用 Cypress，不为迁移而迁移。
-3. 用 Page Object 或 fixtures 封装登录、页面定位器和共享数据，spec 中避免裸选择器。
-4. 断言用户可见结果，依赖 Locator 自动等待、网络响应或可见状态，不使用固定 sleep。
-5. CI 必须上传 HTML report、截图、trace 或视频；flaky 用例要隔离、复现、标注来源并关联 issue。
-6. 调试失败时先读 trace、console、network 和截图，再改测试；不要把真实产品缺陷误判成 flaky。
-7. 对关键浏览器能力、支付、权限、上传和实时通信流程，记录测试环境、种子数据和清理策略。
-8. 测试数据必须可重复：优先使用 API seed、数据库 fixture、测试账号或 mock 服务；随机数据需带唯一前缀并在 teardown 清理。
+1. Clarify the key journeys: cross-page processes such as login, purchase, creation, search, permissions, payment, etc. are given priority; if you only choose the test level, do the test hierarchical planning first.
+2. New projects will be given priority by Playwright; existing Cypress projects will continue to use Cypress and will not be migrated for the sake of migration.
+3. Use Page Object or fixtures to encapsulate login, page locator and shared data, and avoid naked selectors in the spec.
+4. Assert that the user can see the results, relying on Locator automatic waiting, network response or visible status, without using fixed sleep.
+5. CI must upload HTML report, screenshots, trace or video; Flaky use cases must be isolated, reproduced, marked with sources and associated with issues.
+6. When debugging fails, read the trace, console, network and screenshots first, and then change the test; do not misjudge real product defects as flaky.
+7. Record the test environment, seed data and cleanup strategies for key browser capabilities, payment, permissions, uploads and real-time communication processes.
+8. Test data must be repeatable: API seeds, database fixtures, test accounts or mock services are preferred; random data must have a unique prefix and be cleaned in teardown.
 
-## 详细参考
+## Detailed reference
 
-- 需要目录结构、Page Object、spec 组织、配置、flaky 调试和产物示例时，加载 [references/playwright-patterns.md](references/playwright-patterns.md)。
-- 需要 CI 示例、Markdown 报告模板、Web3/钱包流程、高风险金融流程或视觉回归配置时，加载 [references/e2e-advanced.md](references/e2e-advanced.md)。
+- Load [references/playwright-patterns.md](references/playwright-patterns.md) when you need directory structure, Page Object, spec organization, configuration, flaky debugging and production examples.
+- Load [references/e2e-ci-reporting.md](references/e2e-ci-reporting.md) when you need CI examples and Markdown report templates.
+- Load [references/e2e-special-scenarios.md](references/e2e-special-scenarios.md) when Web3/wallet flows or high-risk financial flows are required.
+- When cross-page screenshots or visual regression configuration are required, load [references/e2e-visual-regression.md](references/e2e-visual-regression.md).
 
 ## Constraints
 
-- 禁止依赖 `sleep` / 固定 `setTimeout` 作为主要同步手段。
-- 不在生产环境跑真实 E2E。
-- 避免在 E2E 中断言组件内部像素级样式；跨页面截图/视觉回归仅覆盖用户旅程中的关键页面状态。
-- 失败必须能靠截图、trace 或视频定位。
-- 组件内部契约测试分流到组件测试 workflow。
-- 不把不稳定等待、随机数据或依赖测试顺序带入 CI。
-- 不把重试次数当作 flaky 治理；重试只能保留证据，根因仍需定位。
+- Disable reliance on `sleep` / fixed `setTimeout` as primary synchronization means.
+- Do not run real E2E in production environment.
+- Avoid asserting component internal pixel-level styles in E2E; cross-page screenshots/visual regressions only cover key page states in the user journey.
+- Failure must be able to be located by taking screenshots, traces or videos.
+- Component internal contract testing is offloaded to component testing workflow.
+- Do not bring unstable waits, random data, or dependent test order into CI.
+- Do not treat the number of retries as flaky management; retries can only retain evidence, and the root cause still needs to be located.
 
 ## Expected Output
 
-关键用户旅程有稳定 E2E 覆盖，失败产物可定位问题，CI 中报告和 trace 可下载；flaky 用例有复现命令、隔离策略和后续 issue。
+Key user journeys have stable E2E coverage, failed products can locate problems, and reports and traces in CI can be downloaded; flaky use cases include recurrence commands, isolation strategies, and follow-up issues.

package/skills/fec-e2e-testing/references/e2e-ci-reporting.md

@@ -0,0 +1,62 @@
+#E2E CI & Reporting
+
+## CI integration (example)
+
+```yaml
+# .github/workflows/e2e.yml
+name: E2E Tests
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - run: npx playwright test
+        env:
+          CI: true
+          BASE_URL: ${{ vars.STAGING_URL }}
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+```
+
+Cypress: Fixed `CYPRESS_baseUrl` or `baseUrl` in the configuration file. Failure screenshots/videos are also recommended to upload artifacts.
+
+## E2E report template (Markdown)
+
+The following structure can be used when outputting or archiving test reports to facilitate review:
+
+```markdown
+# E2E test report
+
+**Date:** YYYY-MM-DD HH:mm
+**Time taken:** X minutes Y seconds
+**Result:** Pass/Fail
+
+## Summary
+
+- Total X | Pass Y | Fail Z | Unstable/Skip Description
+
+## Failed use case
+
+### Use case name
+
+- **File:** `tests/e2e/xxx.spec.ts:line number`
+- **ERROR:** Brief assertion or timeout information
+- **Screenshot/Trace:** path or artifact name
+- **Suggested fix:** Executable conclusion
+
+## Product
+
+- HTML report: `playwright-report/index.html`
+- Trace / Video / Screenshot: CI artifact or local `test-results/`
+```