[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M79N4GPAMZ2VCHQW8SWDP8GW":3,"skill-same:01M79N4GPAMZ2VCHQW8SWDP8GW":47},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":26,"commitSha":27,"skillDirectory":28,"forksCount":14,"repositoryHtmlUrl":29,"repositoryHomepageUrl":6,"ownerHtmlUrl":30,"ownerBlogUrl":6,"ownerDescription":31,"updatedAt":32,"install":33,"resources":46},"01M79N4GPAMZ2VCHQW8SWDP8GW","browser-qa",null,"Run automated post-deploy UI verification with a browser automation MCP (claude-in-chrome, Playwright, or Puppeteer): console-error and Core Web Vitals smoke checks, form and auth-flow interaction tests, screenshot visual regression across three breakpoints, and axe-core accessibility audits ending in a SHIP \u002F DO-NOT-SHIP verdict. Use when testing a deployed feature on staging or preview, before shipping frontend changes, reviewing a frontend PR, or checking responsive layout and accessibility.","JunMystery\u002FAgent-Guidance","JunMystery","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F161468934?v=4","01M79MTMV8F0BY8NK1A92RA8A0","Jun","01M79MTMWCFBKPHN5B25E6V20B",0,"MIT","https:\u002F\u002Fgithub.com\u002FJunMystery\u002FAgent-Guidance\u002Fblob\u002Fmain\u002Fskills\u002Fbrowser-qa\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: browser-qa\ndescription: \"Run automated post-deploy UI verification with a browser automation MCP (claude-in-chrome, Playwright, or Puppeteer): console-error and Core Web Vitals smoke checks, form and auth-flow interaction tests, screenshot visual regression across three breakpoints, and axe-core accessibility audits ending in a SHIP \u002F DO-NOT-SHIP verdict. Use when testing a deployed feature on staging or preview, before shipping frontend changes, reviewing a frontend PR, or checking responsive layout and accessibility.\"\nmetadata:\n  origin: ECC\n---\n\n# Browser QA — Automated Visual Testing & Interaction\n\n## When to Use\n\n- After deploying a feature to staging\u002Fpreview\n- When you need to verify UI behavior across pages\n- Before shipping — confirm layouts, forms, interactions actually work\n- When reviewing PRs that touch frontend code\n- Accessibility audits and responsive testing\n\n## How It Works\n\nUses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user.\n\n### Safety first — blast radius (run read-only by default)\n\nBrowser QA drives real auth and real user journeys, so treat the blast radius explicitly.\nDefault to **read-only**: never run a **mutating** journey (checkout, payment, delete,\nmass-update) against a production URL — require an explicit opt-in **and** a staging\u002Fpreview\nURL. Use seeded **test credentials**, never real production logins, and **redact**\ncredentials\u002Ftokens\u002FPII before saving any screenshot.\n\n### Phase 1: Smoke Test\n```\n1. Navigate to target URL\n2. Check for console errors (filter noise: analytics, third-party)\n3. Verify no 4xx\u002F5xx in network requests\n4. Screenshot above-the-fold on desktop + mobile viewport\n5. Check Core Web Vitals: LCP \u003C 2.5s, CLS \u003C 0.1, INP \u003C 200ms\n   (INP replaced FID in March 2024; thresholds per web.dev)\n```\n\n### Phase 2: Interaction Test\n```\n1. Click every nav link — verify no dead links\n2. Submit forms with valid data — verify success state\n3. Submit forms with invalid data — verify error state\n4. Test auth flow: login → protected page → logout (test creds only, never prod)\n5. Test critical user journeys (checkout, onboarding, search)\n   — read-only by default; only exercise mutating journeys against staging\n     with explicit opt-in (see \"Safety first\" above)\n```\n\n### Phase 3: Visual Regression\n```\n1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)\n2. Compare against committed baseline screenshots\n   — no baseline ⇒ report INCONCLUSIVE, never a silent PASS\n3. Flag layout shifts > 5px, missing elements, overflow\n4. Check dark mode if applicable\n```\n\n### Phase 4: Accessibility\n```\n1. Run axe-core or equivalent on each page\n2. Flag WCAG 2.2 AA violations (contrast, labels, focus order)\n3. Verify keyboard navigation works end-to-end\n4. Check screen reader landmarks\n```\n\n> Note: axe-core automatically covers roughly 30–40% of WCAG. A clean run is **necessary,\n> not sufficient** — keyboard nav, focus order, and a screen-reader pass still need a manual\n> check. Don't report \"accessible\" from an automated pass alone.\n\n## Output Format\n\n```markdown\n## QA Report — [URL] — [timestamp]\n\n### Smoke Test\n- Console errors: 0 critical, 2 warnings (analytics noise)\n- Network: all 200\u002F304, no failures\n- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓\n\n### Interactions\n- [✓] Nav links: 12\u002F12 working\n- [✗] Contact form: missing error state for invalid email\n- [✓] Auth flow: login\u002Flogout working\n\n### Visual\n- [✗] Hero section overflows on 375px viewport\n- [✓] Dark mode: all pages consistent\n\n### Accessibility\n- 2 AA violations: missing alt text on hero image, low contrast on footer links\n\n### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)\n# verdict ∈ SHIP \u002F SHIP WITH FIXES \u002F DO NOT SHIP; use INCONCLUSIVE if no visual baseline\n```\n\n## Integration\n\nWorks with any browser MCP:\n- `mChild__claude-in-chrome__*` tools (preferred — uses your actual Chrome)\n- Playwright via `mcp__browserbase__*`\n- Direct Puppeteer scripts\n\nPair with `\u002Fcanary-watch` for post-deploy monitoring.\n","# Browser QA — Automated Visual Testing & Interaction\n\n## When to Use\n\n- After deploying a feature to staging\u002Fpreview\n- When you need to verify UI behavior across pages\n- Before shipping — confirm layouts, forms, interactions actually work\n- When reviewing PRs that touch frontend code\n- Accessibility audits and responsive testing\n\n## How It Works\n\nUses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user.\n\n### Safety first — blast radius (run read-only by default)\n\nBrowser QA drives real auth and real user journeys, so treat the blast radius explicitly.\nDefault to **read-only**: never run a **mutating** journey (checkout, payment, delete,\nmass-update) against a production URL — require an explicit opt-in **and** a staging\u002Fpreview\nURL. Use seeded **test credentials**, never real production logins, and **redact**\ncredentials\u002Ftokens\u002FPII before saving any screenshot.\n\n### Phase 1: Smoke Test\n```\n1. Navigate to target URL\n2. Check for console errors (filter noise: analytics, third-party)\n3. Verify no 4xx\u002F5xx in network requests\n4. Screenshot above-the-fold on desktop + mobile viewport\n5. Check Core Web Vitals: LCP \u003C 2.5s, CLS \u003C 0.1, INP \u003C 200ms\n   (INP replaced FID in March 2024; thresholds per web.dev)\n```\n\n### Phase 2: Interaction Test\n```\n1. Click every nav link — verify no dead links\n2. Submit forms with valid data — verify success state\n3. Submit forms with invalid data — verify error state\n4. Test auth flow: login → protected page → logout (test creds only, never prod)\n5. Test critical user journeys (checkout, onboarding, search)\n   — read-only by default; only exercise mutating journeys against staging\n     with explicit opt-in (see \"Safety first\" above)\n```\n\n### Phase 3: Visual Regression\n```\n1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)\n2. Compare against committed baseline screenshots\n   — no baseline ⇒ report INCONCLUSIVE, never a silent PASS\n3. Flag layout shifts > 5px, missing elements, overflow\n4. Check dark mode if applicable\n```\n\n### Phase 4: Accessibility\n```\n1. Run axe-core or equivalent on each page\n2. Flag WCAG 2.2 AA violations (contrast, labels, focus order)\n3. Verify keyboard navigation works end-to-end\n4. Check screen reader landmarks\n```\n\n> Note: axe-core automatically covers roughly 30–40% of WCAG. A clean run is **necessary,\n> not sufficient** — keyboard nav, focus order, and a screen-reader pass still need a manual\n> check. Don't report \"accessible\" from an automated pass alone.\n\n## Output Format\n\n```markdown\n## QA Report — [URL] — [timestamp]\n\n### Smoke Test\n- Console errors: 0 critical, 2 warnings (analytics noise)\n- Network: all 200\u002F304, no failures\n- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓\n\n### Interactions\n- [✓] Nav links: 12\u002F12 working\n- [✗] Contact form: missing error state for invalid email\n- [✓] Auth flow: login\u002Flogout working\n\n### Visual\n- [✗] Hero section overflows on 375px viewport\n- [✓] Dark mode: all pages consistent\n\n### Accessibility\n- 2 AA violations: missing alt text on hero image, low contrast on footer links\n\n### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)\n# verdict ∈ SHIP \u002F SHIP WITH FIXES \u002F DO NOT SHIP; use INCONCLUSIVE if no visual baseline\n```\n\n## Integration\n\nWorks with any browser MCP:\n- `mChild__claude-in-chrome__*` tools (preferred — uses your actual Chrome)\n- Playwright via `mcp__browserbase__*`\n- Direct Puppeteer scripts\n\nPair with `\u002Fcanary-watch` for post-deploy monitoring.\n",{"name":5,"metadata":24,"description":7},{"origin":25},"ECC","main","5d0a87185c0e172c3901e2a6e5916b6d544b8b94","skills\u002Fbrowser-qa","https:\u002F\u002Fgithub.com\u002FJunMystery\u002FAgent-Guidance","https:\u002F\u002Fgithub.com\u002FJunMystery","AI is the typist, I am the architect. Building efficient, secure, and user-centric products through disciplined AI prompt engineering.","2026-11-13 17:41:25",{"source":8,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add JunMystery\u002FAgent-Guidance --skill browser-qa",{"tool":39,"command":40},"bunx","bunx skills add JunMystery\u002FAgent-Guidance --skill browser-qa",{"tool":42,"command":43},"pnpm","pnpm dlx skills add JunMystery\u002FAgent-Guidance --skill browser-qa","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FJunMystery\u002FAgent-Guidance\u002Fblob\u002Fmain\u002Fskills\u002Fbrowser-qa\u002FSKILL.md",true,[],[48,54,60,66,72,78],{"skillNo":49,"name":50,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":51,"categories":52,"keywords":53,"publishedAt":19},"01M79QR1E309VJ6CTQKB32AWWA","zero-trust-architecture-cheat-sheet","https:\u002F\u002Fgithub.com\u002FJunMystery\u002FAgent-Guidance\u002Fblob\u002Fmain\u002Fskills\u002Fzero-trust-architecture-cheat-sheet\u002FSKILL.md",[],[],{"skillNo":55,"name":56,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":57,"categories":58,"keywords":59,"publishedAt":19},"01M79QQV7GHYR02DYGN41S23WN","xss-filter-evasion-cheat-sheet","https:\u002F\u002Fgithub.com\u002FJunMystery\u002FAgent-Guidance\u002Fblob\u002Fmain\u002Fskills\u002Fxss-filter-evasion-cheat-sheet\u002FSKILL.md",[],[],{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":65,"publishedAt":19},"01M79QQNSN7YB8XB61FFSCS3WH","xs-leaks-cheat-sheet","https:\u002F\u002Fgithub.com\u002FJunMystery\u002FAgent-Guidance\u002Fblob\u002Fmain\u002Fskills\u002Fxs-leaks-cheat-sheet\u002FSKILL.md",[],[],{"skillNo":67,"name":68,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":19},"01M79QQHZZJKFDY9132G5A65C2","xpath-injection-prevention-cheat-sheet","https:\u002F\u002Fgithub.com\u002FJunMystery\u002FAgent-Guidance\u002Fblob\u002Fmain\u002Fskills\u002Fxpath-injection-prevention-cheat-sheet\u002FSKILL.md",[],[],{"skillNo":73,"name":74,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":77,"publishedAt":19},"01M79QQB9ZSD3DJG8658EHQXR1","xml-security-cheat-sheet","https:\u002F\u002Fgithub.com\u002FJunMystery\u002FAgent-Guidance\u002Fblob\u002Fmain\u002Fskills\u002Fxml-security-cheat-sheet\u002FSKILL.md",[],[],{"skillNo":79,"name":80,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":83,"publishedAt":19},"01M79QQ60WKV7PFMXWT9CW8PM6","xml-external-entity-prevention-cheat-sheet","https:\u002F\u002Fgithub.com\u002FJunMystery\u002FAgent-Guidance\u002Fblob\u002Fmain\u002Fskills\u002Fxml-external-entity-prevention-cheat-sheet\u002FSKILL.md",[],[]]