Visual Development Workflow

When developing or modifying any visual element (components, pages, layouts, styling), you must visually verify your work using Playwright screenshots and Compodium. Do not rely on code alone for UI changes.

Setup

1. Start the dev server in the background: bun run dev
2. Wait for the server to be ready (listen on localhost:3000 or the next available port)

Verifying Pages and Layouts

Use Playwright to screenshot full pages after making changes:

npx playwright screenshot --wait-for-timeout=3000 http://localhost:3000/your-page /tmp/screenshot.png

Then read the screenshot with the Read tool to visually inspect the result.