Menu
This skill should be used when performing browser testing, verifying in browser, or runtime checks. Guides browser verification patterns.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
This skill should be used when implementing code, creating files, or writing new features. Provides complete file structure, naming patterns, and import rules.
Decompose large requirements into phased task files that fit AI context windows using Gherkin + State Machine approach.
This skill should be used when working with database, Drizzle ORM, entities, schemas, migrations, and seeds. It provides Rails-style DB conventions, local sqlite/libSQL file defaults, and Effect-friendly data patterns.
Use this skill when generating enterprise admin, back-office, or operations module UI. Activates on: new module screen, admin panel, dashboard, operations list, approval queue, entity detail, multi-step form wizard, RBAC console, audit log, analytics cockpit, support console, settings page, or any layout described as "enterprise", "compact", or "admin-heavy". Provides recipe selection, page anatomy contract, density mode, state checklist, and AI prompt template.
This skill should be used when working with Chakra UI, UI components, or the design system. Guides Chakra UI v3 and Ark UI patterns.
This skill should be used when working with i18n, translation, locale, or internationalization. Guides next-intl setup, locale routing, and message management.
Based on SOC occupation classification
| name | nextjs-browser-qa |
| description | This skill should be used when performing browser testing, verifying in browser, or runtime checks. Guides browser verification patterns. |
Use this skill when verifying features in the browser during the verification phase.
Remember that this repo already has Next.js DevTools and Playwright MCP servers, plus
the agent-browser skill. Prefer Next.js DevTools for Next.js runtime diagnostics,
and use Playwright or agent-browser for real browser interaction, screenshots, and
flow verification. Use this skill for the verification checklist and QA strategy.
Browser verification is required when:
## Feature: [Feature Name]
### Happy Path
- [ ] Primary action works as expected
- [ ] Data is displayed correctly
- [ ] Navigation works properly
- [ ] Form submission succeeds
### Edge Cases
- [ ] Empty states display correctly
- [ ] Loading states are shown
- [ ] Error states are handled
- [ ] Boundary conditions work (min/max values)
### User Feedback
- [ ] Success messages appear
- [ ] Error messages are clear
- [ ] Loading indicators show
- [ ] Transitions are smooth
## Visual Checks
### Layout
- [ ] Components are properly aligned
- [ ] Spacing is consistent
- [ ] No layout shifts on load
### Responsive
- [ ] Mobile (< 768px)
- [ ] Tablet (768px - 1024px)
- [ ] Desktop (> 1024px)
### Theme
- [ ] Light mode looks correct
- [ ] Dark mode looks correct
- [ ] Colors match design system
## Accessibility Checks
### Keyboard
- [ ] All interactive elements are focusable
- [ ] Focus order is logical
- [ ] Focus indicators are visible
- [ ] Escape closes modals
### Screen Reader
- [ ] Images have alt text
- [ ] Form inputs have labels
- [ ] Error messages are announced
- [ ] Dynamic content is announced
### ARIA
- [ ] Roles are appropriate
- [ ] States are communicated
- [ ] Live regions work
npm run dev
# Open http://localhost:3000
# English
http://localhost:3000/en/[route]
# Thai
http://localhost:3000/th/[route]
Use browser DevTools:
# Install axe DevTools browser extension
# Run accessibility audit in DevTools
- [ ] Page loads under 3 seconds
- [ ] No unnecessary re-renders
- [ ] Images are optimized
- [ ] No layout shifts (CLS)
- [ ] No sensitive data in URL
- [ ] Auth redirects work
- [ ] CSRF protection active
- [ ] XSS vectors blocked
- [ ] All text is translated
- [ ] RTL layout works (if applicable)
- [ ] Date/number formats correct
- [ ] Locale switching works
## Bug Report
**Location:** [URL or component path]
**Browser:** [Chrome/Firefox/Safari version]
**Device:** [Desktop/Mobile, OS]
**Steps to Reproduce:**
1. Navigate to...
2. Click on...
3. Enter...
**Expected:** [What should happen]
**Actual:** [What actually happens]
**Screenshot/Video:** [Attach if helpful]
**Severity:** [Critical/High/Medium/Low]
| Level | Definition | Example |
|---|---|---|
| Critical | App unusable | Crash, data loss, auth bypass |
| High | Feature broken | Form doesn't submit, navigation fails |
| Medium | Feature impaired | Styling issues, minor UX problems |
| Low | Minor issue | Typo, alignment off by few pixels |
# Ensure quality gates pass first
npm run check-types
npm run lint
npm run test
# After successful verification
node --experimental-strip-types --no-warnings bin/vibe task workflow:hook -- update-state \
qualityGates.verification=passed
# Update state with failure
node --experimental-strip-types --no-warnings bin/vibe task workflow:hook -- update-state \
qualityGates.verification=failed \
'qualityGates.lastRunSummary="Button click does not trigger action"'
// playwright.config.ts
import { defineConfig } from "@playwright/test";
export default defineConfig({
testDir: "./e2e",
use: {
baseURL: "http://localhost:3000",
trace: "on-first-retry",
},
webServer: {
command: "npm run dev",
port: 3000,
},
});
// e2e/user-flow.spec.ts
import { test, expect } from "@playwright/test";
test("user can create account", async ({ page }) => {
await page.goto("/en/register");
await page.fill('[name="email"]', "test@example.com");
await page.fill('[name="password"]', "password123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL("/en/dashboard");
await expect(page.getByText("Welcome")).toBeVisible();
});