Generate Web Skills

Teach the agent how a website works by recording a real user-driven Chrome session, then replay the learned action with different inputs. Phase 1 launches Chrome via Playwright codegen while the user performs an action (e.g. "check flight availability from X to Y on date Z"), capturing all network activity as a HAR plus the UI steps. Phase 2 distills the HAR into a reusable lesson (endpoints, payloads, parameter knobs, auth surface) and reports what actions were learned. Phase 3 performs a variation of the same action for a similar task — either by replaying the learned API calls with substituted parameters (e.g. a different date or destination) or by replaying the UI navigation and recording an mp4 as proof. Phase 4 (optional) turns a recording into a standalone, shareable skill (Cursor personal/project or skills.sh format) that performs one inferred action with the session (HAR) embedded, so it works independently of this skill or the original recording. Use when the user asks to teach/learn a website action, record or capture a browsing session, save network activity to a HAR, "learn how this site does X", replay an action with different parameters, produce UI mp4 proof of a web flow, or generate/build a reusable skill from a recorded session.

flowchart LR
  subgraph teach [1. Teach]
    Rec["record_session.sh<br/>user drives Chrome"] --> Har["session.har + actions.js"]
  end
  subgraph distill [2. Distill]
    Har --> Proc["process_har.py"] --> Lesson["lesson.json + LESSON.md"]
  end
  subgraph apply [3. Apply]
    Lesson --> Api["API replay<br/>(new params)"]
    Lesson --> Ui["replay_ui.sh<br/>(mp4 proof)"]
  end
…

mkdir -p ~/.claude/skills/generate-web-skills
curl -L https://claudskills.com/skills/generate-web-skills/SKILL.md \
  -o ~/.claude/skills/generate-web-skills/SKILL.md

@misc{generate-web-skills-2026,
  author    = {puntorigen},
  title     = {Generate Web Skills [Claude Code skill]},
  year      = {2026},
  publisher = {ClaudSkills},
  url       = {https://claudskills.com/skills/generate-web-skills/}
}