Stagehand Integration

Stagehand is a TypeScript framework for browser automation with AI. SiteSkills skills provide structured navigation guidance that Stagehand agents can follow.

Install Skills

siteskills install amazon-add-to-cart --dir ./playwright-skills/

Stagehand does not have a default skills directory, so specify your preferred location with --dir.

Configuration

Load SKILL.md files in your Stagehand agent configuration and use them as navigation guidance:

import { readFileSync } from 'fs';

const skillMd = readFileSync('./playwright-skills/amazon-add-to-cart/SKILL.md', 'utf-8');

// Pass skill content as context to your Stagehand agent

Stagehand's auto-caching feature works well with SiteSkills -- repeat executions of the same skill are faster because element lookups are cached.

Version Requirements

Check each skill's siteskills.json for minimum Stagehand version:

{
  "compatibility": {
    "agents": [
      {
        "name": "stagehand",
        "min_version": "3.0.0",
        "notes": "Leverage Stagehand's auto-caching for repeat executions"
      }
    ]
  }
}

Directory Structure

your-project/
└── playwright-skills/
    ├── amazon-add-to-cart/
    │   ├── SKILL.md
    │   ├── siteskills.json
    │   └── README.md
    └── google-search-extract/
        ├── SKILL.md
        ├── siteskills.json
        └── README.md

Managing Skills

# List installed skills
siteskills list

# Update all skills
siteskills update

# Remove a skill
siteskills uninstall amazon-add-to-cart

Reporting Execution Results

siteskills report amazon-add-to-cart --success --time 15200 --agent stagehand

Playwright MCP

If you are using Stagehand through the Microsoft Playwright MCP server, skills work the same way. The MCP server can read SKILL.md files and follow the navigation steps.

siteskills install amazon-add-to-cart --dir ./mcp-skills/

Reference the skills directory in your MCP server configuration.