Integrate Playwright MCP for UI Testing

.copilot/mcp.json

@@ -0,0 +1,9 @@
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest"],
+      "type": "stdio"
+    }
+  }
+}

.github/agents/playwright-testing.md

@@ -0,0 +1,89 @@
+# Playwright MCP Testing Skill
+
+This skill provides guidance on using the Playwright MCP server for testing UI components in primer/view_components.
+
+## When to Use Playwright MCP
+
+Use Playwright MCP when:
+- Making changes to component rendering (`.rb` files in `app/components/` or `html.erb` files)
+- Modifying component styles (`.pcss` files)
+- Updating component JavaScript/TypeScript behavior
+- Adding new components or component variants
+- Fixing visual bugs or accessibility issues
+
+## Repository Setup
+
+### Demo Application
+The demo app runs at `http://127.0.0.1:4000` and provides component previews.
+
+### Preview URLs
+Component previews follow this pattern:
+```
+http://127.0.0.1:4000/rails/view_components/{component_path}
+```
+
+For example:
+- Button: `/rails/view_components/primer/beta/button/default`
+- ActionMenu: `/rails/view_components/primer/alpha/action_menu/default`
+
+### Theme Testing
+Add `?theme={theme_name}` to test different themes:
+- `light`, `dark`, `dark_dimmed`
+- `light_colorblind`, `dark_colorblind`
+- `light_high_contrast`, `dark_high_contrast`
+- `all` - Shows all themes at once
+
+## Using Playwright MCP
+
+### Starting the Demo Server
+Before using Playwright MCP, ensure the demo server is running:
+```bash
+script/dev
+```
+
+### Common Playwright MCP Actions
+
+#### 1. Test Interactions
+```
+Click the interactive element(s) and take a screenshot of the result
+```
+
+#### 2. Check Accessibility
+```
+Get the accessibility tree/ARIA snapshot of the component
+```
+
+#### 3. Test Focus States
+```
+Press Tab to focus interactive elements, then take a screenshot
+```
+
+## Existing Test Structure
+
+### Test Files
+- `test/playwright/snapshots.test.ts` - Main snapshot tests
+- `test/playwright/helpers.ts` - Test utilities
+
+### Snapshot Storage
+- Visual snapshots: `.playwright/screenshots/`
+- ARIA snapshots: `.playwright/screenshots/*/aria-snapshot.yml`
+
+## Running Existing Tests
+
+```bash
+# Run all Playwright tests
+npx playwright test
+
+# Run specific test file
+npx playwright test test/playwright/snapshots.test.ts
+
+# Update snapshots
+npx playwright test --update-snapshots
+```
+
+## Tips for PR Authors
+
+1. **Before submitting**: Use Playwright MCP to visually verify your component changes
+1. **Test interactions**: For interactive components, verify hover, focus, and active states
+1. **Accessibility**: Ensure ARIA snapshots remain valid after your changes
+1. **Screenshots**: If visual changes are intentional, the PR should include updated snapshots

.github/copilot-instructions.md

@@ -0,0 +1,28 @@
+# Copilot Instructions for primer/view_components
+
+This repository contains ViewComponents for the Primer Design System used by GitHub.
+
+## Key Context
+
+- **Framework**: Ruby on Rails ViewComponents with TypeScript/JavaScript
+- **Testing**: Uses Playwright for visual regression and accessibility testing
+- **Demo App**: Runs on port 4000 via `script/dev`
+
+## When Making UI Changes
+
+If your changes affect the visual appearance or behavior of a component:
+
+1. Consider running Playwright tests to verify visual snapshots
+2. Check ARIA snapshots for accessibility compliance
+3. Test across all supported themes (light, dark, high contrast, colorblind variants)
+
+## Playwright MCP Available
+
+This repository has Playwright MCP configured. When working on UI-facing changes, you can use the Playwright MCP to:
+
+- Navigate to component previews at `/rails/view_components/{component_path}`
+- Take screenshots for visual verification
+- Interact with components to test behavior
+- Verify accessibility through ARIA snapshots
+
+See `.github/agents/playwright-testing.md` for detailed guidance.