visual-feedback

name	visual-feedback
description	**WORKFLOW SKILL** — Visual design feedback loop using Playwright screenshots. USE FOR: reviewing how a page looks, getting 1–3 concrete improvement suggestions, then implementing ONE improvement and re-screenshotting. Workflow: specify page → screenshot → suggest → implement one change → screenshot again. DO NOT USE FOR: functional testing, unit tests, or non-visual code changes.

Visual Feedback Skill

Take a Playwright screenshot of a specific page, review it visually, suggest 1–3 improvements, implement exactly ONE, then re-screenshot to confirm.

Prerequisites

• Dev server running on http://localhost:4200 (run npm start if not)
• Playwright installed (npm install covers it)
• Screenshots land in e2e/screenshots/

Workflow

Follow these steps exactly in order. Do ONE improvement per cycle, not many.

Step 1 — Identify the page

Ask or infer which page to review. Valid pages and their screenshot names:

Page	URL path	Screenshot file
Home / Landing	/	home.png
ADHS Dashboard	/dashboard/adhs-regulation	dashboard-adhs.png
Emotion Dashboard	/dashboard/emotion-regulation	dashboard-emotion.png
Co-Founder	/cofounder	cofounder.png
Recovery Dashboard	/dashboard/recovery	dashboard-recovery.png
Evening Check-in	/dashboard/evening-checkin	dashboard-evening.png
Orientation Check	/dashboard/orientation-check	dashboard-orientation.png
Social Regulation	/dashboard/social-regulation	dashboard-social.png

If the page isn't in the test suite yet, add it to e2e/screenshots.spec.ts first.

Step 2 — Take a screenshot

Run the Playwright screenshot for that specific page:

npx playwright test --project=chromium -g "screenshot: <page-name>"

For example: npx playwright test --project=chromium -g "screenshot: home"

This generates a PNG in e2e/screenshots/<page-name>.png.

Step 3 — View the screenshot

Use the view_image tool to look at the screenshot file:

view_image("e2e/screenshots/<page-name>.png")

Step 4 — Give feedback

Based on the screenshot, provide 1 to 3 concrete, specific visual improvement suggestions. Each suggestion should be:

• Actionable (specific CSS/template change, not vague)
• Visual (layout, spacing, colors, typography, alignment, contrast)
• Scoped (small, incremental — not a full redesign)

Format:

1. [Brief title] — [What to change and where]
2. [Brief title] — [What to change and where]
3. [Brief title] — [What to change and where]

Step 5 — Implement ONE improvement

Pick the highest-impact suggestion. Implement it. Just one — not all three.

Step 6 — Re-screenshot

Run the same Playwright screenshot command again to capture the result. Use view_image to review the new screenshot. Briefly confirm what changed and whether it looks better.

STOP HERE. The cycle is complete. Do not continue improving unless the user asks for another round.

Adding New Pages

To add a page to the screenshot suite, edit e2e/screenshots.spec.ts and add an entry to the pages array:

{ name: 'my-page', path: '/my-route' },

Notes

• Screenshots are full-page captures at 1440×900 viewport
• The e2e/screenshots/ folder is gitignored
• Each cycle is ONE improvement only — no cascading changes
• Always show the screenshot to the user via view_image before and after

Showcase Screenshots

Showcase screenshots live in public/showcase/ and are used on the landing page. They are generated by e2e/showcase-screenshots.spec.ts.

Important rules for showcase screenshots:

• After programmatically changing form controls (sliders, inputs), always blur focus before taking the screenshot: await page.evaluate(() => (document.activeElement as HTMLElement)?.blur()) followed by await page.mouse.click(10, 10). Otherwise browser focus rings will be visible in the screenshot.
• Run npx playwright test --project=chromium e2e/showcase-screenshots.spec.ts to regenerate all showcase images.
• The showcase tabs on the home page reference images from showcase/ — if you rename a file, update the showcaseTabs array in src/app/pages/home/home.component.ts.