Web Agent Skills

The Spec

This is an open source proposal and code for Web Agent Skills.

Web Agent Skills are ways to teach an agent how to use or do something on a web page

This is meant to be equivalent to SKILL.md (agent skills spec) but for web pages.

This is also meant to complement the concept of WebMCP, similarly to how SKILL.md complements MCP.

Put instructions (what you'd put in a SKILL.md) in script tags with type="text/skill+markdown", and with optional data-default="true" (used to indicate it should be read by default).

<script type="text/skill+markdown" data-default="true">
---
name: using-this-page
description: A recognizable description
---

- Put some instructions here.
</script>

As long as JavaScript is available, we can do the parsing work for the agent and expose a simpler interface. To do this, just include this snippet in the body of the html:

<script>(()=>{function t(t,e){const l=String(t||"").trim(),s=l.match(/^---\n([\s\S]*?)\n---\n?([\s\S]*)$/),i={},n=s?s[2].trim():l,r=s?s[1].split("\n"):[];for(const t of r){const e=t.indexOf(":");if(-1===e)continue;const l=t.slice(0,e).trim(),s=t.slice(e+1).trim();l&&(i[l]=s)}return i.name&&i.description?{name:i.name,description:i.description,default:"true"===e.dataset.default,markdown:l,body:n}:null}const e={skills:Object.create(null),reload(){this.skills=Object.create(null);for(const e of document.querySelectorAll('script[type="text/skill+markdown"]')){const l=t(e.textContent,e);l&&(this.skills[l.name]=l)}return this.skills},list(){return this.reload(),Object.values(this.skills).map(({name:t,description:e,default:l})=>({name:t,description:e,default:l}))},read(t){return this.reload(),this.skills[t]||null},readDefault(){return this.reload(),Object.values(this.skills).filter(t=>t.default)}};window.agentSkills=e,e.reload()})();</script>

You can read an unminified version of this snippet here.

It's just a small convenience layer that parses the skills and puts them in a lookup by name, and then can be used with:

window.agentSkills.list()
window.agentSkills.read(name)
window.agentSkills.readDefault()
window.agentSkills.reload()

You can open the console on this page to try these out.

Chrome DevTools MCP

Use Chrome DevTools MCP getting started to connect an agent to a browser window.

Here is a SKILL.md that will teach the model how to use Web Agent Skills.

Once you have Chrome DevTools MCP set up and are using the skill, just ask it to navigate to webagentskills.dev and then give it a task.

For example:

> Go to webagentskills.dev and swap the colors of the page

• I’m inspecting the available Web Agent Skills and reading the relevant one.

• Called
  └ chrome-devtools-mcp.evaluate_script({
      "function":"() => ({ skills: window.agentSkills.list(), selected: window.agentSkills.read('Swapping colors of the page') })"
    })
    Script ran on page and returned:
    {
      "skills":[
        {
          "name":"Swapping colors of the page",
          "description":"Explains how to swap the colors of the page",
          "default":false
        }
      ],
      "selected":{
        "name":"Swapping colors of the page",
        "description":"Explains how to swap the colors of the page",
        "default":false,
        "markdown":"---\nname: Swapping colors of the page\n..."
      }
    }