Skill

browser-qa

Automate visual testing and UI interaction verification using browser automation after deploying features.

npx claudepluginhub nassimbf/ftitos-claude-code

Tool Access

This skill uses the workspace's default tool permissions.

Preview

- After deploying a feature to staging/preview

SKILL.md

Similar Skills

cache-components

139.3k

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

cache-components

mcp-builder

124.2k

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

9 files

anthropics-skills-13

Stats

Stars2

Forks0

Last CommitApr 18, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Browser QA -- Automated Visual Testing & Interaction

When to Use

After deploying a feature to staging/preview
When you need to verify UI behavior across pages
Before shipping -- confirm layouts, forms, interactions actually work
When reviewing PRs that touch frontend code
Accessibility audits and responsive testing

How It Works

Uses browser automation MCP (Playwright or similar) to interact with live pages like a real user.

Phase 1: Smoke Test

1. Navigate to target URL
2. Check for console errors (filter noise: analytics, third-party)
3. Verify no 4xx/5xx in network requests
4. Screenshot above-the-fold on desktop + mobile viewport
5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms

Phase 2: Interaction Test

1. Click every nav link -- verify no dead links
2. Submit forms with valid data -- verify success state
3. Submit forms with invalid data -- verify error state
4. Test auth flow: login -> protected page -> logout
5. Test critical user journeys (checkout, onboarding, search)

Phase 3: Visual Regression

1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
2. Compare against baseline screenshots (if stored)
3. Flag layout shifts > 5px, missing elements, overflow
4. Check dark mode if applicable

Phase 4: Accessibility

1. Run axe-core or equivalent on each page
2. Flag WCAG AA violations (contrast, labels, focus order)
3. Verify keyboard navigation works end-to-end
4. Check screen reader landmarks

Output Format

## QA Report -- [URL] -- [timestamp]

### Smoke Test
- Console errors: 0 critical, 2 warnings (analytics noise)
- Network: all 200/304, no failures
- Core Web Vitals: LCP 1.2s, CLS 0.02, INP 89ms

### Interactions
- Nav links: 12/12 working
- Contact form: missing error state for invalid email
- Auth flow: login/logout working

### Visual
- Hero section overflows on 375px viewport
- Dark mode: all pages consistent

### Accessibility
- 2 AA violations: missing alt text on hero image, low contrast on footer links

### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

Integration

Pair with /canary-watch for post-deploy monitoring.