القائمة
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.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
Provides core architecture and best practices for building Web3 decentralised applications (dApps) using React, Next.js, Wagmi, Viem, and RainbowKit.
Provides best practices, patterns, and security workflows for writing, testing, and deploying Solidity smart contracts using Foundry or Hardhat.
Provides best practices for Web3 full-stack development. Automatically activates when writing Solidity smart contracts, deploying DApps, using Wagmi/RainbowKit, or interacting with Ethers/Viem.
Creates, refines, and validates Claude Code skills following amplihack philosophy and official best practices. Automatically activates when building, creating, generating, or designing new skills.
استنادا إلى تصنيف SOC المهني
| name | eyes |
| description | 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. |
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: