visual-feedbacklisted

# Visual Feedback Output "Read Visual Feedback skill." to chat to acknowledge you read this file. Pipeline position: sits inside **`/do-work`** → replaces the "look at the UI" step that LLMs otherwise skip. ## Why this exists Backend feedback loops are fully textual — tests, types, lint. Frontend feedback loops are not. Without a browser, the LLM is flying blind: it can write code that passes typecheck and still produce a broken layout, a broken dark mode, or an animation that feels wrong. This skill closes that gap. ## Setup assumptions - **VS Code browser** is available (Simple Browser or a browser preview panel pointed at the dev server) - **Tavily MCP** is connected for web search when you hit something unfamiliar ## Workflow ### 1. Start the dev server Before taking any screenshots, confirm the dev server is running and note the local URL (e.g. `localhost:5173`). If it isn't running, start it. ### 2. Open the VS Code browser Open the Simple Browser pointed at the local URL. This is your visual ground truth for the session. ### 3. Implement a slice Write the minimum code for one visual change — a component, a layout adjustment, a theme switch. Keep slices small so screenshots stay meaningful. ### 4. Screenshot and evaluate Take a screenshot of the current state. Ask: - Does the layout match the intent? - Are there overflow, clipping, or alignment issues? - Does it work at different viewport widths? - If dark mode is relevant — does it render correctly unde