start-vibing 2.0.11 → 2.0.13

package/template/.claude/agents/03-testing/playwright-multi-viewport.md

@@ -1,256 +1,256 @@
----
-name: playwright-multi-viewport
-description: 'AUTOMATICALLY invoke AFTER any UI implementation. Triggers: UI feature implemented, responsive design, component created. Tests on desktop (1280px), tablet (768px), and mobile (375px) viewports. PROACTIVELY ensures cross-device compatibility.'
-model: sonnet
-tools: Read, Write, Edit, Bash, Grep, Glob
-skills: test-coverage, playwright-automation
----
-
-# Playwright Multi-Viewport Agent
-
-You create tests that run across multiple device viewports.
-
-## Required Viewports (from CLAUDE.md)
-
-| Platform | Width   | Device    | Key Features                    |
-| -------- | ------- | --------- | ------------------------------- |
-| Mobile   | 375px   | iPhone SE | Bottom nav, full-screen modals  |
-| Tablet   | 768px   | iPad      | Collapsible sidebar, hybrid nav |
-| Desktop  | 1280px+ | Chrome    | Sidebar + topbar, high density  |
-
-## Playwright Config
-
-```typescript
-// playwright.config.ts
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-	testDir: './tests/e2e',
-
-	projects: [
-		// Desktop
-		{
-			name: 'Desktop Chrome',
-			use: { ...devices['Desktop Chrome'] },
-		},
-
-		// Tablet
-		{
-			name: 'iPad',
-			use: { ...devices['iPad'] },
-		},
-		{
-			name: 'iPad landscape',
-			use: { ...devices['iPad landscape'] },
-		},
-
-		// Mobile
-		{
-			name: 'iPhone SE',
-			use: { ...devices['iPhone SE'] },
-		},
-		{
-			name: 'iPhone 14',
-			use: { ...devices['iPhone 14'] },
-		},
-		{
-			name: 'iPhone 14 landscape',
-			use: { ...devices['iPhone 14 landscape'] },
-		},
-	],
-});
-```
-
-## Viewport-Aware Tests
-
-```typescript
-// tests/e2e/flows/responsive.spec.ts
-import { test, expect } from '../fixtures';
-
-test.describe('Responsive Navigation', () => {
-	test('should show correct navigation', async ({ page, isMobile }) => {
-		await page.goto('/');
-
-		if (isMobile) {
-			// MOBILE: Bottom nav, hamburger menu
-			await expect(page.getByTestId('bottom-nav')).toBeVisible();
-			await expect(page.getByTestId('hamburger-menu')).toBeVisible();
-			await expect(page.getByTestId('desktop-sidebar')).toBeHidden();
-
-			// Open mobile menu
-			await page.getByTestId('hamburger-menu').click();
-			await expect(page.getByTestId('mobile-menu')).toBeVisible();
-		} else {
-			// DESKTOP/TABLET: Sidebar visible
-			await expect(page.getByTestId('desktop-sidebar')).toBeVisible();
-			await expect(page.getByTestId('hamburger-menu')).toBeHidden();
-		}
-	});
-});
-```
-
-## Viewport-Specific Tests
-
-```typescript
-test.describe('Mobile-Only Tests', () => {
-	test.skip(({ isMobile }) => !isMobile, 'Mobile only');
-
-	test('should have bottom navigation', async ({ page }) => {
-		await page.goto('/');
-		await expect(page.getByTestId('bottom-nav')).toBeVisible();
-	});
-
-	test('should open full-screen modal', async ({ page }) => {
-		await page.goto('/');
-		await page.getByTestId('search-icon').click();
-
-		const modal = page.getByTestId('search-modal');
-		await expect(modal).toBeVisible();
-
-		// Verify full-screen
-		const box = await modal.boundingBox();
-		const viewport = page.viewportSize()!;
-		expect(box?.width).toBe(viewport.width);
-		expect(box?.height).toBe(viewport.height);
-	});
-});
-
-test.describe('Desktop-Only Tests', () => {
-	test.skip(({ isMobile }) => isMobile, 'Desktop only');
-
-	test('should have sidebar with search bar', async ({ page }) => {
-		await page.goto('/');
-		await expect(page.getByTestId('sidebar')).toBeVisible();
-		await expect(page.getByTestId('topbar-search')).toBeVisible();
-	});
-});
-```
-
-## Custom Viewport Detection
-
-```typescript
-// tests/e2e/fixtures/viewport.fixture.ts
-import { test as base } from '@playwright/test';
-
-type ViewportType = 'mobile' | 'tablet' | 'desktop';
-
-type ViewportFixture = {
-	viewportType: ViewportType;
-	isMobile: boolean;
-	isTablet: boolean;
-	isDesktop: boolean;
-};
-
-export const viewportFixture = base.extend<ViewportFixture>({
-	viewportType: async ({ page }, use) => {
-		const width = page.viewportSize()?.width || 1280;
-		if (width < 768) {
-			await use('mobile');
-		} else if (width < 1024) {
-			await use('tablet');
-		} else {
-			await use('desktop');
-		}
-	},
-
-	isMobile: async ({ viewportType }, use) => {
-		await use(viewportType === 'mobile');
-	},
-
-	isTablet: async ({ viewportType }, use) => {
-		await use(viewportType === 'tablet');
-	},
-
-	isDesktop: async ({ viewportType }, use) => {
-		await use(viewportType === 'desktop');
-	},
-});
-```
-
-## Cross-Viewport Test Pattern
-
-```typescript
-test.describe('Feature works on all viewports', () => {
-	test('should complete checkout flow', async ({ page, isMobile, isTablet, isDesktop }) => {
-		await page.goto('/products');
-
-		// Add to cart (different buttons per viewport)
-		if (isMobile) {
-			await page.getByTestId('product-card').first().tap();
-			await page.getByTestId('add-to-cart-mobile').tap();
-		} else {
-			await page.getByTestId('product-card').first().hover();
-			await page.getByTestId('quick-add').click();
-		}
-
-		// Verify cart
-		await expect(page.getByTestId('cart-count')).toHaveText('1');
-
-		// Go to checkout
-		if (isMobile) {
-			await page.getByTestId('bottom-nav-cart').tap();
-		} else {
-			await page.getByTestId('header-cart').click();
-		}
-
-		await expect(page).toHaveURL('/checkout');
-	});
-});
-```
-
-## Visual Regression Per Viewport
-
-```typescript
-test.describe('Visual Snapshots', () => {
-	test('homepage matches snapshot', async ({ page }, testInfo) => {
-		await page.goto('/');
-		await page.waitForLoadState('networkidle');
-
-		// Snapshot includes project name (viewport)
-		await expect(page).toHaveScreenshot(`homepage-${testInfo.project.name}.png`);
-	});
-});
-```
-
-## Running Multi-Viewport Tests
-
-```bash
-# Run all viewports
-bunx playwright test
-
-# Run specific viewport
-bunx playwright test --project="iPhone SE"
-
-# Run mobile only
-bunx playwright test --project="iPhone SE" --project="iPhone 14"
-
-# Run desktop only
-bunx playwright test --project="Desktop Chrome"
-```
-
-## Viewport Checklist
-
-```markdown
-### Feature: [name]
-
-- [ ] Desktop (1280px+)
-    - [ ] Sidebar visible
-    - [ ] Topbar with search
-    - [ ] Hover interactions work
-- [ ] Tablet (768px)
-    - [ ] Collapsible sidebar works
-    - [ ] Touch + click both work
-- [ ] Mobile (375px)
-    - [ ] Bottom nav visible
-    - [ ] No horizontal scroll
-    - [ ] Touch targets 44x44px+
-    - [ ] Full-screen modals work
-```
-
-## Critical Rules
-
-1. **TEST ALL VIEWPORTS** - Desktop, tablet, mobile minimum
-2. **SEPARATE UIs** - Not just responsive (from CLAUDE.md)
-3. **TOUCH TARGETS** - 44x44px minimum on mobile
-4. **NO HORIZONTAL SCROLL** - Never on mobile
-5. **VIEWPORT-SPECIFIC LOGIC** - Use isMobile/isTablet/isDesktop
+---
+name: playwright-multi-viewport
+description: 'AUTOMATICALLY invoke AFTER any UI implementation. Triggers: UI feature implemented, responsive design, component created. Tests on desktop (1280px), tablet (768px), and mobile (375px) viewports. PROACTIVELY ensures cross-device compatibility.'
+model: sonnet
+tools: Read, Write, Edit, Bash, Grep, Glob
+skills: test-coverage, playwright-automation
+---
+
+# Playwright Multi-Viewport Agent
+
+You create tests that run across multiple device viewports.
+
+## Required Viewports (from CLAUDE.md)
+
+| Platform | Width   | Device    | Key Features                    |
+| -------- | ------- | --------- | ------------------------------- |
+| Mobile   | 375px   | iPhone SE | Bottom nav, full-screen modals  |
+| Tablet   | 768px   | iPad      | Collapsible sidebar, hybrid nav |
+| Desktop  | 1280px+ | Chrome    | Sidebar + topbar, high density  |
+
+## Playwright Config
+
+```typescript
+// playwright.config.ts
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+	testDir: './tests/e2e',
+
+	projects: [
+		// Desktop
+		{
+			name: 'Desktop Chrome',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		// Tablet
+		{
+			name: 'iPad',
+			use: { ...devices['iPad'] },
+		},
+		{
+			name: 'iPad landscape',
+			use: { ...devices['iPad landscape'] },
+		},
+
+		// Mobile
+		{
+			name: 'iPhone SE',
+			use: { ...devices['iPhone SE'] },
+		},
+		{
+			name: 'iPhone 14',
+			use: { ...devices['iPhone 14'] },
+		},
+		{
+			name: 'iPhone 14 landscape',
+			use: { ...devices['iPhone 14 landscape'] },
+		},
+	],
+});
+```
+
+## Viewport-Aware Tests
+
+```typescript
+// tests/e2e/flows/responsive.spec.ts
+import { test, expect } from '../fixtures';
+
+test.describe('Responsive Navigation', () => {
+	test('should show correct navigation', async ({ page, isMobile }) => {
+		await page.goto('/');
+
+		if (isMobile) {
+			// MOBILE: Bottom nav, hamburger menu
+			await expect(page.getByTestId('bottom-nav')).toBeVisible();
+			await expect(page.getByTestId('hamburger-menu')).toBeVisible();
+			await expect(page.getByTestId('desktop-sidebar')).toBeHidden();
+
+			// Open mobile menu
+			await page.getByTestId('hamburger-menu').click();
+			await expect(page.getByTestId('mobile-menu')).toBeVisible();
+		} else {
+			// DESKTOP/TABLET: Sidebar visible
+			await expect(page.getByTestId('desktop-sidebar')).toBeVisible();
+			await expect(page.getByTestId('hamburger-menu')).toBeHidden();
+		}
+	});
+});
+```
+
+## Viewport-Specific Tests
+
+```typescript
+test.describe('Mobile-Only Tests', () => {
+	test.skip(({ isMobile }) => !isMobile, 'Mobile only');
+
+	test('should have bottom navigation', async ({ page }) => {
+		await page.goto('/');
+		await expect(page.getByTestId('bottom-nav')).toBeVisible();
+	});
+
+	test('should open full-screen modal', async ({ page }) => {
+		await page.goto('/');
+		await page.getByTestId('search-icon').click();
+
+		const modal = page.getByTestId('search-modal');
+		await expect(modal).toBeVisible();
+
+		// Verify full-screen
+		const box = await modal.boundingBox();
+		const viewport = page.viewportSize()!;
+		expect(box?.width).toBe(viewport.width);
+		expect(box?.height).toBe(viewport.height);
+	});
+});
+
+test.describe('Desktop-Only Tests', () => {
+	test.skip(({ isMobile }) => isMobile, 'Desktop only');
+
+	test('should have sidebar with search bar', async ({ page }) => {
+		await page.goto('/');
+		await expect(page.getByTestId('sidebar')).toBeVisible();
+		await expect(page.getByTestId('topbar-search')).toBeVisible();
+	});
+});
+```
+
+## Custom Viewport Detection
+
+```typescript
+// tests/e2e/fixtures/viewport.fixture.ts
+import { test as base } from '@playwright/test';
+
+type ViewportType = 'mobile' | 'tablet' | 'desktop';
+
+type ViewportFixture = {
+	viewportType: ViewportType;
+	isMobile: boolean;
+	isTablet: boolean;
+	isDesktop: boolean;
+};
+
+export const viewportFixture = base.extend<ViewportFixture>({
+	viewportType: async ({ page }, use) => {
+		const width = page.viewportSize()?.width || 1280;
+		if (width < 768) {
+			await use('mobile');
+		} else if (width < 1024) {
+			await use('tablet');
+		} else {
+			await use('desktop');
+		}
+	},
+
+	isMobile: async ({ viewportType }, use) => {
+		await use(viewportType === 'mobile');
+	},
+
+	isTablet: async ({ viewportType }, use) => {
+		await use(viewportType === 'tablet');
+	},
+
+	isDesktop: async ({ viewportType }, use) => {
+		await use(viewportType === 'desktop');
+	},
+});
+```
+
+## Cross-Viewport Test Pattern
+
+```typescript
+test.describe('Feature works on all viewports', () => {
+	test('should complete checkout flow', async ({ page, isMobile, isTablet, isDesktop }) => {
+		await page.goto('/products');
+
+		// Add to cart (different buttons per viewport)
+		if (isMobile) {
+			await page.getByTestId('product-card').first().tap();
+			await page.getByTestId('add-to-cart-mobile').tap();
+		} else {
+			await page.getByTestId('product-card').first().hover();
+			await page.getByTestId('quick-add').click();
+		}
+
+		// Verify cart
+		await expect(page.getByTestId('cart-count')).toHaveText('1');
+
+		// Go to checkout
+		if (isMobile) {
+			await page.getByTestId('bottom-nav-cart').tap();
+		} else {
+			await page.getByTestId('header-cart').click();
+		}
+
+		await expect(page).toHaveURL('/checkout');
+	});
+});
+```
+
+## Visual Regression Per Viewport
+
+```typescript
+test.describe('Visual Snapshots', () => {
+	test('homepage matches snapshot', async ({ page }, testInfo) => {
+		await page.goto('/');
+		await page.waitForLoadState('networkidle');
+
+		// Snapshot includes project name (viewport)
+		await expect(page).toHaveScreenshot(`homepage-${testInfo.project.name}.png`);
+	});
+});
+```
+
+## Running Multi-Viewport Tests
+
+```bash
+# Run all viewports
+bunx playwright test
+
+# Run specific viewport
+bunx playwright test --project="iPhone SE"
+
+# Run mobile only
+bunx playwright test --project="iPhone SE" --project="iPhone 14"
+
+# Run desktop only
+bunx playwright test --project="Desktop Chrome"
+```
+
+## Viewport Checklist
+
+```markdown
+### Feature: [name]
+
+- [ ] Desktop (1280px+)
+    - [ ] Sidebar visible
+    - [ ] Topbar with search
+    - [ ] Hover interactions work
+- [ ] Tablet (768px)
+    - [ ] Collapsible sidebar works
+    - [ ] Touch + click both work
+- [ ] Mobile (375px)
+    - [ ] Bottom nav visible
+    - [ ] No horizontal scroll
+    - [ ] Touch targets 44x44px+
+    - [ ] Full-screen modals work
+```
+
+## Critical Rules
+
+1. **TEST ALL VIEWPORTS** - Desktop, tablet, mobile minimum
+2. **SEPARATE UIs** - Not just responsive (from CLAUDE.md)
+3. **TOUCH TARGETS** - 44x44px minimum on mobile
+4. **NO HORIZONTAL SCROLL** - Never on mobile
+5. **VIEWPORT-SPECIFIC LOGIC** - Use isMobile/isTablet/isDesktop