From gtm-engineering-command-center
Browser-based QA and autonomous verification — Playwright, Chrome DevTools MCP, Computer Use for visual testing, pixel verification, funnel walkthroughs, and overcoming web UI blockers
How this skill is triggered — by the user, by Claude, or both
Slash command
/gtm-engineering-command-center:browser-qaThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill enables the GTM agent to **see, interact with, and verify** real browser experiences. The agent uses browser tools to QA its own work, verify tracking fires correctly, test signup flows end-to-end, and overcome blockers that have no CLI/API path.
This skill enables the GTM agent to see, interact with, and verify real browser experiences. The agent uses browser tools to QA its own work, verify tracking fires correctly, test signup flows end-to-end, and overcome blockers that have no CLI/API path.
Always use the most efficient tool for the job:
| Task | Tool | Why |
|---|---|---|
| Verify pixel fires, check network requests | Playwright (headless) | Fast, scriptable, can inspect network layer |
| Visual screenshot comparison | Playwright screenshot + Read | Headless, pixel-perfect, no setup overhead |
| Test full signup/checkout flow | Playwright end-to-end | Automated form filling, navigation, assertions |
| Interact with web UIs that block API access | Computer Use (mcp__computer-use__*) | Click real buttons, fill real forms, handle OAuth popups |
| Inspect live DOM, console errors, performance | Playwright evaluate + console | Access to browser APIs, performance metrics |
| Verify mobile responsiveness | Playwright with viewport override | Test at 375px, 390px, 768px |
| Read what's on screen when other tools fail | Computer Use screenshot | Last resort visual inspection |
// Navigate to landing page and intercept network requests
const pixelRequests = [];
page.on('request', req => {
if (req.url().includes('facebook.com/tr')) pixelRequests.push(req);
});
await page.goto(landingUrl);
// Check PageView fired
const pageViewFired = pixelRequests.some(r => r.url().includes('ev=PageView'));
// Simulate signup and check CompleteRegistration
await page.fill('[data-testid="email-input"]', '[email protected]');
await page.click('[data-testid="signup-button"]');
const regFired = pixelRequests.some(r => r.url().includes('ev=CompleteRegistration'));
// Intercept PostHog capture calls
const posthogEvents = [];
page.on('request', req => {
if (req.url().includes('/e/') || req.url().includes('/capture')) {
try {
const body = JSON.parse(req.postData());
posthogEvents.push(...(body.batch || [body]));
} catch {}
}
});
await page.goto(url);
// Check specific event fired
const hasEvent = posthogEvents.some(e => e.event === '$pageview');
// Get Core Web Vitals
const metrics = await page.evaluate(() => {
return new Promise(resolve => {
new PerformanceObserver(list => {
const entries = {};
list.getEntries().forEach(e => entries[e.name] = e.value || e.startTime);
resolve(entries);
}).observe({ type: 'largest-contentful-paint', buffered: true });
});
});
// LCP should be < 2.5s for good score
// Test critical viewports
const viewports = [
{ width: 375, height: 812, name: 'iPhone SE' },
{ width: 390, height: 844, name: 'iPhone 14' },
{ width: 768, height: 1024, name: 'iPad' },
{ width: 1440, height: 900, name: 'Desktop' }
];
for (const vp of viewports) {
await page.setViewportSize({ width: vp.width, height: vp.height });
await page.goto(url);
await page.screenshot({ path: `.gtm/qa/${vp.name}.png`, fullPage: true });
}
// Land with UTMs
await page.goto(url + '?utm_source=meta&utm_medium=paid&utm_campaign=test');
// Complete signup flow
await page.click('[data-testid="signup-cta"]');
// Check UTMs are stored
const storedUtm = await page.evaluate(() => {
return localStorage.getItem('utm_params') || sessionStorage.getItem('utm_params');
});
Use Computer Use (mcp__computer-use__*) when you need to interact with native apps or web UIs that resist automation:
1. request_access — List applications needed (Chrome, Safari, etc.)
2. screenshot — See current state before acting
3. left_click / type / key — Interact with UI elements
4. screenshot — Verify action completed
5. Repeat until goal achieved
After any GTM asset deployment (landing page, email, ad), run this verification:
The QA agent should NEVER report "I can't do this because there's no API." Instead:
The agent should always exhaust all available tools before asking for human help.
npx claudepluginhub dojocodinglabs/gtm-engineering-command-center --plugin gtm-engineering-command-centerGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.