agentmods.dev

website-study

website-study is a skill for Claude Code, Codex from Akakaui/visual-browser-agent. It costs 38 tokens per session (994 once invoked), scanned A, original, MIT.

A method for studying how a public website looks and behaves across screen sizes. It examines design, interactions, accessibility, page structure, and motion using structured inspections and selected screenshots or recordings.

In plain words
What is it for?
Use it for design inspiration, user-experience research, responsive-layout study, accessibility checks, and analysis of hover states, clicks, transitions, and animations.
Why use it?
It gives you a repeatable way to understand a site instead of relying on a quick visual impression. Comparing desktop, tablet, and mobile views reveals changes that may otherwise be missed.

Skill for Claude CodeCodex

not rated 0 9d ago A scan 38 tokens original MIT
View the source file Akakaui/visual-browser-agent
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/akakaui/visual-browser-agent/website-study
Any agent
npx skills add Akakaui/visual-browser-agent --skill website-study
Clone the repo
git clone --depth 1 https://github.com/Akakaui/visual-browser-agent

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for website-study

README.md
[![agentmods](https://agentmods.dev/badge/skills/akakaui/visual-browser-agent/website-study.svg)](https://agentmods.dev/skills/akakaui/visual-browser-agent/website-study)
Your own site
<a href="https://agentmods.dev/skills/akakaui/visual-browser-agent/website-study"><img src="https://agentmods.dev/badge/skills/akakaui/visual-browser-agent/website-study.svg" alt="Measured on agentmods" height="20"></a>
Per session 38 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 994 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00038 $0.00994
Opus 5 $0.00019 $0.00497
Sonnet 5 $0.00008 $0.00199
Haiku 4.5 $0.00004 $0.00099

Measured 3d ago against content hash ca4816590dbb, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

website-study scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/website-study/SKILL.md · 135 lines

How it starts

The opening of the file, as written. The whole thing — 135 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Website Study Skill

When to Use

Use this skill when the user wants to analyze a public website's:

  • Visual design (typography, colors, spacing, layout)
  • Interactions (hover states, clicks, transitions)
  • Responsiveness (breakpoints, mobile/desktop)
  • Motion/animations
  • Information architecture
  • Accessibility

Instructions

Phase 1: Planning

  1. Clarify scope: Which pages? Which viewports? What aspects matter most?
  2. Create run context with createRunContext(goal, requirements)
  3. Define viewports (default: desktop 1280x720, tablet 768x1024, mobile 375x667)

Phase 2: Structured Inspection

For each page and viewport:

  1. navigate(url, waitUntil: "networkidle")
  2. inspect_page(includeA11y: true, includeDOM: false) - get accessibility tree
  3. capture_screenshot(action: "viewport-{name}", requirement: "{name} layout")
  4. Extract: colors, fonts, spacing, component inventory

Phase 3: Interaction Study

For key interactive elements:

  1. Identify interactive elements from accessibility tree
  2. For each: hover, click, focus states
  3. record_interaction for transitions/animations
  4. capture_screenshot for each state

Phase 4: Responsive Audit

Use responsive_audit workflow tool or manual:

  1. Test each viewport breakpoint
  2. Check: navigation, content reflow, touch targets, readability
  3. Document issues with screenshots

Phase 5: Animation Study

Use animation_study workflow tool or manual:

  1. Identify animated elements
  2. Trigger animations (hover, click, scroll, load)
  3. record_interaction with 8-second clips
  4. Analyze: easing, duration, purpose, performance

Phase 6: Vision Review

For each captured artifact:

  1. review_visual_evidence(artifacts, requirement, context)
  2. Document findings, confidence, pass/fail
  3. Build evidence manifest

Phase 7: Synthesis

  1. Compile findings into structured report
  2. Include: design system analysis, interaction patterns, responsive issues, animation quality
  3. Reference all evidence with event IDs
  4. Save as artifact (Markdown/HTML)

Read the full file on GitHub · 135 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 135 lines · 38 tokens per session scan A ca4816590dbb

Subscribe to this mod's changes

website-study is a skill published in the GitHub repository Akakaui/visual-browser-agent (0 stars, last pushed 9d ago), licensed MIT. It adds 38 tokens to every session and 994 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Browser automationDesign and UX
Related

Other skills, from other repositories

electron

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include…

vercel-labs/agent-browser · 112 tokens

browserwing-executor

Control browser automation through HTTP API. Supports page navigation, element interaction (click, type, select), data extraction, accessibility snapshot analysis, screenshot, JavaScript execution, and batch operations.

MemTensor/MemOS · 42 tokens

ce-polish

Polish a working feature through user-directed live browser feedback. Use when a functional feature needs focused UX refinement before shipping.

EveryInc/compound-engineering-plugin · 28 tokens

chrome-cdp

Drive a headless Chrome over the Chrome DevTools Protocol (CDP) for browser QA — navigate, click, fill forms, read the DOM/accessibility tree, screenshot, and assert. Use whenever a task requires loading a web page and interacting with it like a user. Chrome is launched by a bash step (recipe below); this skill…

mattzcarey/shippie · 91 tokens

agent-browser

Headless browser automation CLI optimized for AI agents with accessibility tree snapshots and ref-based element selection.

UnicomAI/wanwu · 21 tokens

html-game-generator

Build a complete, polished, production-quality browser game inside a single self-contained HTML file using only vanilla HTML, CSS and JavaScript — no frameworks, no libraries, no external assets. Use this skill whenever the user asks for a game, a playable demo, a prototype, an interactive toy, or anything "inspired…

buildfastwithai/gen-ai-experiments · 195 tokens