browser-to-code

Gathers Chrome browser tab content and routes it to development workflows.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/Dimi82/claude-playground-explorer --skill browser-to-code
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-to-code
Source: https://github.com/Dimi82/claude-playground-explorer/tree/main/browser-to-code
Command: npx skills add https://github.com/Dimi82/claude-playground-explorer --skill browser-to-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This orchestrator skill captures live browser context from Chrome tabs (e.g., Jira, Figma, docs) and hands it off to the appropriate development workflow, reducing setup time and context-switching.

Core Features & Use Cases

  • Gather and summarize content from selected tabs
  • Route context into downstream skills for brainstorming, planning, debugging, or code review
  • Seamlessly hand off full context to the chosen workflow without executing browser actions

Quick Start

Instruct Claude to gather your open browser tabs, select the ones that matter, and hand off the full context to the chosen workflow skill.

Frequently Asked Questions about browser-to-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Chrome browser context to start a code review or brainstorming workflow?

To use Chrome browser context for a code review workflow, you can gather and summarize content from selected browser tabs and route it directly into downstream development skills. This orchestrator captures live context from Jira, Figma, and docs to seed your session without executing browser actions.

What is the best way to gather Jira and Figma context for development planning?

The best way to gather Jira and Figma context for development planning is to extract live tab content using the chrome-cdp skill, which allows this orchestrator to summarize the browser context and hand it off to your chosen workflow, reducing manual setup and context-switching.

Do I need the chrome-cdp skill to extract tab content for development workflows?

Yes, you need the chrome-cdp skill to extract tab content. This capability requires chrome-cdp to actively gather live browser context from Chrome tabs so it can be summarized and handed off to downstream development workflow skills like debugging or planning.

Can I use browser context summarization for debugging sessions across multiple tabs?

Yes, you can use browser context summarization for debugging sessions across multiple tabs. It captures live context from selected Chrome tabs, summarizes the content, and seamlessly routes the full context into your downstream debugging workflow without requiring manual copy-pasting.

Does this browser context approach execute actions on my open Chrome tabs?

No, this browser context approach does not execute actions on your open Chrome tabs. It strictly gathers and summarizes the content from selected tabs to hand off the full context to a chosen development workflow skill, ensuring safe, read-only extraction.

browser-to-code: How does it reduce context-switching during software engineering tasks?

browser-to-code reduces context-switching during software engineering tasks by capturing live browser context from Chrome tabs and automatically routing it into the appropriate development workflow. This eliminates the need to manually copy information from Jira, Figma, or docs into your coding environment.