{
  "markdown": "<p align=\"center\"><img src=\"logo.png\" width=\"120\" alt=\"logo\" /></p>\n\n# web-legacy-compass\n\n> **Observe the real user flow before modifying code.**\n\nA coding-agent skill for tracing real legacy-web user flows — browser, API, business rule, database — into one evidence chain **before** you change frontend or API code.\n\nUse it for feature work or debugging where request order, important payload fields, browser state, frontend console output, backend business exceptions, and database reads or writes must be correlated and recorded.\n\n📦 **Promptbox listing:** <https://cskwork.github.io/promptbox/skills/web-legacy-compass/>\n\n## Why\n\nUnit tests pass but the real screen still breaks. HTTP 200 hides a business error. An endpoint name suggests one DB write but the code does three. Legacy flows entangle redirects, retries, polling, and background calls that a single API log can't capture.\n\nThis skill forces a **browser-to-database evidence chain** into a Markdown record *before* any code changes. You find the **earliest divergence** (root cause), not the loudest symptom.\n\n## What it does\n\n1. Creates a flow record at `docs/web-flows/YYYY-MM-DD-<slug>.md`.\n2. Captures baseline + network/console trace **before** the first action.\n3. Reproduces the exact user journey, one action at a time.\n4. Builds the chain: `user action → DOM event → store → API client → controller → domain rule → transaction → query → DB write → side effect → response → render`.\n5. Finds the earliest meaningful divergence.\n6. Forms a testable, disproofable explanation.\n7. Implements the minimal change.\n8. Replays the **same** flow and compares before/after evidence.\n\nEvery claim is labeled: `runtime verified` · `test verified` · `code inferred` · `assumed` · `unavailable`.\n\n## Install\n\n```bash\ngit clone https://github.com/cskwork/web-legacy-compass.git\ncd web-legacy-compass\n./install.sh /path/to/your/project\n```\n\nThis copies `SKILL.md`, `references/`, and `templates/` into `<project>/.agents/skills/web-legacy-compass/` and creates `<project>/docs/web-flows/` for records.\n\n## Structure\n\n```\n.\n├── SKILL.md                          # the skill definition (frontmatter + workflow)\n├── references/\n│   ├── BROWSER-TOOL-ROUTING.md       # Playwright CLI vs Chrome DevTools MCP vs Ego Lite vs agent-browser\n│   ├── EVIDENCE-MODEL.md             # evidence levels, important-payload rule, DB/data mapping, logging\n│   └── SUBAGENT-PATTERN.md           # one browser owner, parallel analysis roles, merge procedure\n├── templates/\n│   └── FLOW-RECORD.md                # 13-section Markdown template for the investigation record\n├── install.sh                        # copies the skill into a target project\n├── docs/                             # GitHub Pages source (onboarding site)\n│   └── index.html\n└── .github/workflows/deploy.yml      # deploys docs/ to GitHub Pages\n```\n\n## Browser tool routing (summary)\n\n| Priority | Tool | Role |\n|---|---|---|\n| 1st | Playwright CLI | compact reproduction, trace, ordered request capture (default) |\n| 2nd | Chrome DevTools MCP | exact inspection, escalation (precise body, sourcemaps, perf) |\n| opt | Ego Lite | only when shared inherited login is a hard constraint |\n| opt | agent-browser | only if already standardized; validate nav-capture limits first |\n\nSee [`references/BROWSER-TOOL-ROUTING.md`](references/BROWSER-TOOL-ROUTING.md) for the full decision table.\n\n## License\n\nMIT\n",
  "bytes": 3414,
  "sha": "3f9e12daab5043fe9e77508d720388a95c378eb839598a64074e7fa6fc234e24",
  "repo_slug": "cskwork/web-legacy-compass",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_cskwork_web_legacy_compass_fbd74518/readme"
}