[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M72YCFHDDM4RJS2MAAPH6P1D":3,"skill-same:01M72YCFHDDM4RJS2MAAPH6P1D":48},{"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":25,"commitSha":26,"skillDirectory":27,"forksCount":28,"repositoryHtmlUrl":29,"repositoryHomepageUrl":6,"ownerHtmlUrl":30,"ownerBlogUrl":31,"ownerDescription":32,"updatedAt":33,"install":34,"resources":47},"01M72YCFHDDM4RJS2MAAPH6P1D","browser-qa",null,"Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.","SriramGandhiS\u002FSkills","SriramGandhiS","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F211849986?v=4","01M72WQCW12BYX71C6WN584TTA","Sriram S","01M72WQCWTJ2RD0ET1X31AF1RC",1,"MIT","https:\u002F\u002Fgithub.com\u002FSriramGandhiS\u002FSkills\u002Fblob\u002Fmaster\u002Feverything-claude-code\u002Fskills\u002Fbrowser-qa\u002FSKILL.md",[],[],"2026-11-10 22:39:42",false,"---\nname: browser-qa\ndescription: Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.\norigin: 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### 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```\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\n5. Test critical user journeys (checkout, onboarding, search)\n```\n\n### Phase 3: Visual Regression\n```\n1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)\n2. Compare against baseline screenshots (if stored)\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 AA violations (contrast, labels, focus order)\n3. Verify keyboard navigation works end-to-end\n4. Check screen reader landmarks\n```\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```\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### 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```\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\n5. Test critical user journeys (checkout, onboarding, search)\n```\n\n### Phase 3: Visual Regression\n```\n1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)\n2. Compare against baseline screenshots (if stored)\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 AA violations (contrast, labels, focus order)\n3. Verify keyboard navigation works end-to-end\n4. Check screen reader landmarks\n```\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```\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,"origin":24,"description":7},"ECC","master","d6ca01da0f24a3b0e26e4a8b7b66cbd25d429f5d","everything-claude-code\u002Fskills\u002Fbrowser-qa",0,"https:\u002F\u002Fgithub.com\u002FSriramGandhiS\u002FSkills","https:\u002F\u002Fgithub.com\u002FSriramGandhiS","https:\u002F\u002Fsriram.website\u002F","Curious guy who keeps tinkering until something works","2026-05-20 16:21:34",{"source":8,"skillName":5,"commands":35,"prompt":45,"zipAvailable":46},[36,39,42],{"tool":37,"command":38},"npx","npx skills add SriramGandhiS\u002FSkills --skill browser-qa",{"tool":40,"command":41},"bunx","bunx skills add SriramGandhiS\u002FSkills --skill browser-qa",{"tool":43,"command":44},"pnpm","pnpm dlx skills add SriramGandhiS\u002FSkills --skill browser-qa","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FSriramGandhiS\u002FSkills\u002Fblob\u002Fmaster\u002Feverything-claude-code\u002Fskills\u002Fbrowser-qa\u002FSKILL.md",true,[],[49,57,62,68,75,82],{"skillNo":50,"name":51,"nameZh":6,"description":52,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":53,"categories":54,"keywords":55,"publishedAt":56},"01M732609EPJWV13PVTX3GT4TM","webgpu-threejs-tsl","Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.","https:\u002F\u002Fgithub.com\u002FSriramGandhiS\u002FSkills\u002Fblob\u002Fmaster\u002Fwebgpu-threejs-tsl\u002Fskills\u002Fwebgpu-threejs-tsl\u002FSKILL.md",[],[],"2026-11-11 15:11:14",{"skillNo":58,"name":51,"nameZh":6,"description":52,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":61,"publishedAt":56},"01M7325XM47AGWB6K6C4VXKE6B","https:\u002F\u002Fgithub.com\u002FSriramGandhiS\u002FSkills\u002Fblob\u002Fmaster\u002Fwebgpu-threejs-tsl\u002FSKILL.md",[],[],{"skillNo":63,"name":64,"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":65,"categories":66,"keywords":67,"publishedAt":56},"01M7325WP6DES69JKC840VMFEP","verification-loop","https:\u002F\u002Fgithub.com\u002FSriramGandhiS\u002FSkills\u002Fblob\u002Fmaster\u002Fweb-assets\u002Fdocs\u002Fzh-TW\u002Fskills\u002Fverification-loop\u002FSKILL.md",[],[],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":74,"publishedAt":56},"01M7325TFQF1DZTQ6J3WGQQ1VR","tdd-workflow","Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.","https:\u002F\u002Fgithub.com\u002FSriramGandhiS\u002FSkills\u002Fblob\u002Fmaster\u002Fweb-assets\u002Fdocs\u002Fzh-TW\u002Fskills\u002Ftdd-workflow\u002FSKILL.md",[],[],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":56},"01M7325RGV9AY9PK92D2V8KKPW","strategic-compact","Suggests manual context compaction at logical intervals to preserve context through task phases rather than arbitrary auto-compaction.","https:\u002F\u002Fgithub.com\u002FSriramGandhiS\u002FSkills\u002Fblob\u002Fmaster\u002Fweb-assets\u002Fdocs\u002Fzh-TW\u002Fskills\u002Fstrategic-compact\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":56},"01M7325MZC28SE86E7NMCNEFS4","security-review","Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment\u002Fsensitive features. Provides comprehensive security checklist and patterns.","https:\u002F\u002Fgithub.com\u002FSriramGandhiS\u002FSkills\u002Fblob\u002Fmaster\u002Fweb-assets\u002Fdocs\u002Fzh-TW\u002Fskills\u002Fsecurity-review\u002FSKILL.md",[],[]]