How to use the URL to Code agent skill: install and clone a page

What an agent skill is and what url-to-code makes the agent do

An agent skill is a folder with a SKILL.md file that gives an AI agent a set of instructions for a specific kind of task. When a request matches the skill, the agent follows its workflow instead of improvising.

The url-to-code skill covers one job: recreating a live page you own or have permission to reproduce. The agent first opens the page in a browser, captures desktop and mobile views, and inspects the structure, styles and interactions. It saves permitted images and assets locally, builds a frontend-only version, compares that build side by side with the original, and writes a design QA report before handing the work back.

• Reminds you to check permissions and the target site's terms first
• Stops if the browser lands on a wrong page, login wall, error or unrelated redirect
• Does not hotlink source assets in the final result
• Uses your repository's existing framework; React is not required

Install the url-to-code skill

Download the ZIP for the skill from our page and unzip it. You can install it in one of two places, depending on whether you want it for all projects or just one.

For personal use across projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder. In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with a natural request

You do not need a special command. Ask the agent in plain language to clone or faithfully recreate a page, and state that you own it or have permission. The skill is meant for faithful reproduction, so say that explicitly.

If you want a redesign or a page loosely inspired by another site, say so. The skill routes those requests to a different workflow for context and ideation rather than cloning.

• Good: "Recreate https://example.com/landing as a local frontend. I own this site."
• Good: "Clone our legacy marketing page into the new repo. We have permission to copy it."
• Not this skill: "Make a modern redesign inspired by this page."

What the skill needs before it runs

The agent needs a browser it can drive to load and inspect the live page. The skill also refers to three files inside the same bundle: ../index/SKILL.md, ../design-qa/SKILL.md and ../../references/critical-overrides.md. Keep the bundle intact so those references resolve.

The source files name no API keys or accounts. The skill runs scripts and uses the network, so review what your agent is doing on your machine.

• A browser the agent can control
• The full bundle, including the referenced SKILL.md files
• Network access to load the live page

Safety notes on scripts, network and permissions

The skill runs scripts and uses the network. It loads the page you point it at and saves permitted assets to your machine, so only use it on URLs you are allowed to reproduce.

The skill reminds you about copyright and terms of service but does not enforce them. Copying someone else's site without permission can raise copyright and terms-of-service problems. The skill is also limited to frontend-only output, so it will not build backend features or work past login walls.

The skill also says not to publish unless you ask and the host exposes an authorized deployment tool.

• Check permission and the site's terms before you start
• Expect the agent to stop at login walls
• Frontend-only output: no backend behavior is built
• Deployment happens only when you ask and a tool is authorized

Tips for better results

Give the agent a clear target: the URL, the viewport concerns and any pages or states that matter most. The skill tests interactions one at a time and returns to the starting state between tests, so name the interactions you care about.

Let the agent finish its design QA. The skill asks for design-qa.md and only hands off after a passed result or a documented verification blocker. Where it substitutes an asset, it discloses the substitution, so read that note.

• Name the URL and the key interactions up front
• Ask for desktop and mobile views to be compared
• Read design-qa.md before accepting the build
• Expect substitutions to be disclosed when an asset cannot be saved