WHEN users express dissatisfaction with visual appearance or behavior; use Playwright MCP to capture screenshots and collaborate on UI fixes with a structured feedback loop.
How this skill is triggered — by the user, by Claude, or both
Slash command
/uikit-agent-marketplace:eyesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use Playwright MCP to capture screenshots and collaborate with users on visual refinements. Always confirm before making changes.
Use Playwright MCP to capture screenshots and collaborate with users on visual refinements. Always confirm before making changes.
Capture current state — Use Playwright MCP browser_take_screenshot to capture the current page or element to better understand the users questions or requirements.
Gather specific feedback — Ask what needs adjustment: "Looking at this screenshot, what specifically would you like changed?"
Propose changes clearly — Describe intended modifications with specifics:
Confirm before implementing — Use AskUserQuestion to get explicit approval. Never modify code without confirmation.
Verify with comparison — After changes, capture a new screenshot to confirm the fix has been made.
Use these Playwright MCP tools for the visual feedback loop:
browser_navigate — Navigate to a URLbrowser_take_screenshot — Take a screenshot of the current pagebrowser_snapshot — Capture accessibility snapshot of the current page (useful for understanding structure)browser_click — Perform click on a web pagebrowser_hover — Hover over element on pagebrowser_wait_for — Wait for text appearance/disappearance or specified durationbrowser_console_messages — Returns all console messages (useful for debugging)browser_resize — Resize the browser window (useful for responsive testing)browser_install — Install the browser specified in the configWhen implementing visual changes, load these skills for guidance:
web:css — CSS architecture, spacing, units, and selector patternsweb:web-design — Visual hierarchy, typography, color, and component polishAfter implementing changes:
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub archon-research/uikit --plugin uikit-agent-marketplace