القائمة
Use Chrome DevTools MCP for browser-based verification, UI regression checks, screenshots, console/network inspection, and quick performance traces. Trigger when verifying frontend changes in a live browser, capturing evidence, or debugging client-side issues.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Compound Engineering workflow for AI-assisted development. Use when planning features, executing work, reviewing code, or codifying learnings. Follows the Plan → Work → Review → Compound loop where each unit of engineering makes subsequent work easier. Triggers on: plan this feature, implement this, review this code, compound learnings, create implementation plan, systematic development.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Generate a Product Requirements Document (PRD) for a new feature. Use when planning a feature, starting a new project, or when asked to create a PRD. Triggers on: create a prd, write prd for, plan this feature, requirements for, spec out.
Convert PRDs to prd.json format for the Ralph autonomous agent system. Use when you have an existing PRD and need to convert it to Ralph's JSON format. Triggers on: convert this prd, turn this into ralph format, create prd.json from this, ralph json.
| name | dev-browser |
| description | Use Chrome DevTools MCP for browser-based verification, UI regression checks, screenshots, console/network inspection, and quick performance traces. Trigger when verifying frontend changes in a live browser, capturing evidence, or debugging client-side issues. |
| license | MIT |
| compatibility | opencode |
Use the Chrome DevTools MCP tools to verify UI changes, capture evidence, and inspect console/network state.
~/.config/opencode/opencode.jsonlist_pagesselect_page (if needed)new_page or navigate_pagewait_for (use a key selector or page-ready signal)take_screenshot (set fullPage: true for full page)take_snapshot for DOM snapshotlist_console_messageslist_network_requests → get_network_request for detailsperformance_start_traceperformance_stop_traceperformance_analyze_insightUse the dev-browser skill to verify /en/games/... renders correctly, capture a full-page screenshot, and confirm there are no console errors.