Menu
Set up and run Playwright end-to-end tests.
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.
Based on SOC occupation classification
Set up GitHub Actions CI for lint, typecheck, and tests.
Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
Configure Biome linting/formatting and Husky pre-commit hooks via Ultracite.
Use Lucide React icons correctly. Reference file contains all 1,671 valid icon names — always verify against it before using an icon.
Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.
| name | playwright |
| description | Set up and run Playwright end-to-end tests. |
bun add -D @playwright/test
bunx playwright install
Create playwright.config.ts:
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: process.env.CI ? 'github' : 'html',
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
],
webServer: {
command: 'bun run dev',
url: 'http://localhost:3000',
reuseExistingServer: !process.env.CI,
},
});
// tests/home.spec.ts
import { test, expect } from '@playwright/test';
test('homepage loads', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/My App/);
});
test('navigation works', async ({ page }) => {
await page.goto('/');
await page.click('text=About');
await expect(page).toHaveURL('/about');
});
// tests/pages/login.ts
import { type Page } from '@playwright/test';
export class LoginPage {
constructor(private page: Page) {}
async goto() { await this.page.goto('/login'); }
async login(email: string, password: string) {
await this.page.fill('[name=email]', email);
await this.page.fill('[name=password]', password);
await this.page.click('button[type=submit]');
}
}
bunx playwright test # Run all tests
bunx playwright test --ui # Interactive UI mode
bunx playwright test tests/home.spec.ts # Single file
bunx playwright show-report # View HTML report
bunx playwright install --with-deps in CI to install browser deps.forbidOnly: !!process.env.CI to fail if .only is left in.reporter: 'github' for inline PR annotations.workers: 1) for stability.