Web Agent Skills

The Spec

Web Agent Skills are just a way to teach an agent how to use or do something on a webpage.

The spec is this: script[type="text/skill+markdown"], with optional data-default="true".

<script type="text/skill+markdown" data-default="true">
---
name: using-this-page
description: How an agent should use this page.
---

- Put some instructions here.
</script>

If 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.

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

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..."
      }
    }