Agent skill

Verify With Browser

Visually verify component changes in Storybook using the agent-browser CLI tool

MITAuto-check passedProductivity & Automation

Install Verify With Browser

skills CLI

$ npx skills add razorpay/blade --skill verify-with-browser -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install razorpay/blade verify-with-browser --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/verify-with-browser .claude/skills/verify-with-browser && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "verify-with-browser" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/verify-with-browser into .claude/skills/verify-with-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "verify-with-browser", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/razorpay/blade/tree/master/.agents/skills/verify-with-browser

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add razorpay/blade --skill verify-with-browser -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install razorpay/blade verify-with-browser --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/verify-with-browser .agents/skills/verify-with-browser && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "verify-with-browser" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/verify-with-browser into .agents/skills/verify-with-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "verify-with-browser", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add razorpay/blade --skill verify-with-browser -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install razorpay/blade verify-with-browser --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/verify-with-browser .cursor/skills/verify-with-browser && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "verify-with-browser" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/verify-with-browser into .cursor/skills/verify-with-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "verify-with-browser", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/razorpay/blade.git --path .agents/skills/verify-with-browser

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add razorpay/blade --skill verify-with-browser -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install razorpay/blade verify-with-browser --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/verify-with-browser .gemini/skills/verify-with-browser && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "verify-with-browser" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/verify-with-browser into .gemini/skills/verify-with-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "verify-with-browser", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install razorpay/blade verify-with-browser

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add razorpay/blade --skill verify-with-browser -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/verify-with-browser .github/skills/verify-with-browser && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "verify-with-browser" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/verify-with-browser into .github/skills/verify-with-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "verify-with-browser", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add razorpay/blade --skill verify-with-browser -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install razorpay/blade verify-with-browser --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/razorpay/blade.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/verify-with-browser .opencode/skills/verify-with-browser && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "verify-with-browser" agent skill from https://github.com/razorpay/blade/tree/master/.agents/skills/verify-with-browser into .opencode/skills/verify-with-browser/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "verify-with-browser", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: verify-with-browser
GitHub stars: 656
Token cost: ~1.1k tokens
SKILL.md length: 398 words
Files: 1
Skills in repo: 16
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Visually verify component changes in Storybook using the agent-browser CLI tool

Works in 6 steps: Prerequisites → Available Agent Browser Commands → Navigate to Storybook → …
Tasks that involve Browser automation
SKILL.md covers Usage, Instructions, Storybook URL Patterns and Tips for Testing
Calls npx and yarn

What it does

Verify With Browser is an agent skill from razorpay/blade. Visually verify component changes in Storybook using the agent-browser CLI tool

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Productivity & Automation, covering Browser automation. It works with Storybook and Figma. The repository describes itself as: Design System that powers Razorpay. The licence is MIT.

When your agent uses it

Tasks that involve Browser automation

Example prompts

“/verify-with-browser”

Requirements

Node.js

Workflow steps

6 steps, taken from the step headings in SKILL.md.

Prerequisites
Available Agent Browser Commands
Navigate to Storybook
Take Screenshots
Example Workflow
Verification Checklist

What it can do on your machine

Read from SKILL.md and the folder at commit fa38cf0. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npx
- yarn
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx and yarn, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Verify With Browser loads about 1.1k tokens when it runs. Until then it costs about 25 tokens; SKILL.md has 398 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~25
When it runs · the whole SKILL.md, loaded when a task matches: ~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from razorpay/blade at commit fa38cf0, republished under its MIT licence (© razorpay). 398 words, ~1,148 tokens.

Download SKILL.mdSave it as .claude/skills/verify-with-browser/SKILL.md (or your agent's skills folder).

name: verify-with-browser
description: Visually verify component changes in Storybook using the agent-browser CLI tool

Verify with Browser

Visually verify component changes in Storybook using the agent-browser CLI tool.

Usage

/verify-with-browser <ComponentName>

Example:

/verify-with-browser Popover
/verify-with-browser Button

Instructions

Step 1: Prerequisites

Ensure Storybook is running (check terminals folder or start with yarn start:web in packages/blade or packages/blade-svelte depending on the package you are verifying)
Use npx agent-browser to run commands (no installation required)
Agent-browser will automatically start a daemon in the background on first use

Step 2: Available Agent Browser Commands

Use Shell tool to run these commands with npx:

npx agent-browser --help - Show help for agent-browser commands
npx agent-browser open <url> - Navigate to a URL
npx agent-browser snapshot - Get current page structure with element refs
npx agent-browser snapshot -i - Interactive snapshot with clickable elements
npx agent-browser screenshot <filename> - Capture screenshot and save to file
npx agent-browser click @<ref> - Click element using ref from snapshot
npx agent-browser type @<ref> "text" - Type text into element
npx agent-browser close - Close browser session

Step 3: Navigate to Storybook

Note: the localhost port number might vary. Find the right port where storybook is running.

Option 1: Full Storybook View

bash

npx agent-browser open "http://localhost:9011/?path=/story/components-<component>--<story>"

Option 2: Iframe View (Recommended for Screenshots)

bash

npx agent-browser open "http://localhost:9011/iframe.html?id=components-<component>--<story>&viewMode=story"

Why use iframe view?

Cleaner screenshots without Storybook UI
Shows only the component being tested
Better for visual comparison with Figma
Smaller file size and faster loading

Step 4: Take Screenshots

Navigate to the story (use iframe URL for best results)
Get snapshot to verify page loaded:
bash
```
npx agent-browser snapshot
```

Take a screenshot:

bash

npx agent-browser screenshot <component-name>-<story>.png

Compare with Figma design - Verify all visual changes match

Show full SKILL.md (154 more words)Show less

Step 5: Example Workflow

bash

# Open the component story in iframe view
npx agent-browser open "http://localhost:9011/iframe.html?id=components-popover--uncontrolled&viewMode=story"

# Get snapshot to see page structure and verify loaded
npx agent-browser snapshot

# Take screenshot for visual verification
npx agent-browser screenshot popover-uncontrolled.png

# If interactive testing needed, get snapshot with refs
npx agent-browser snapshot -i
# Output will show elements like:
# - button "Open Popover" [ref=e1]
# - text "Click to toggle" [ref=e2]

# Click elements using refs
npx agent-browser click @e1

# Take another screenshot of the active state
npx agent-browser screenshot popover-open.png

# Close browser when done
npx agent-browser close

Step 6: Verification Checklist

Verify the following match the Figma design:

✅ Padding and spacing match design tokens
✅ Colors and borders are correct
✅ Typography sizes are accurate
✅ Shadows and effects are applied
✅ Component behavior works as expected

Storybook URL Patterns

Storybook runs on http://localhost:9011/ (port may vary, check terminals).

URL Formats:

Full Storybook: http://localhost:9011/?path=/story/components-<component>--<story-name>
Iframe (Clean View): http://localhost:9011/iframe.html?id=components-<component>--<story-name>&viewMode=story
Docs Page: http://localhost:9011/?path=/docs/components-<component>--docs

Story Name Conversion:

Storybook story names use kebab-case
"Uncontrolled" → uncontrolled
"Product Usecase: Dark Mode" → product-use-case-2
Check the actual story names in the component's .stories.tsx file

Tips for Testing

Use "Uncontrolled" or "Default" stories - These often show the component in its open/active state
Test multiple variants - Check different placements, sizes, or states if applicable
Check responsive behavior - Test on different viewport sizes if relevant
Verify interactions - Use npx agent-browser click and npx agent-browser type to test interactive states
Compare screenshots - Save screenshots with descriptive names for easy comparison with Figma designs

Files

Just SKILL.md in .agents/skills/verify-with-browser of razorpay/blade.

Open the folder on GitHubat commit fa38cf0

Compare with similar skills

Verify With Browser next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Verify With Browser compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Verify With Browser this skillrazorpay/blade	656	—	~1.1k	Automated safety check: Pass	MIT	today
Agent Browser CLIvercel-labs/agent-browser	44k	24 repos	~864	Automated safety check: Pass	Apache-2.0	yesterday
Bdgszymdzum/browser-debugger-cli	170	—	~2.4k	Automated safety check: Notes	MIT	today
Unicliolo-dot-io/Uni-CLI	274	—	~3.8k	Automated safety check: Notes	Apache-2.0	5 days ago
External Electron App Automationcashew-labs/libretto	904	—	~967	Automated safety check: Pass	MIT	1 mo ago
UX Audit WalkthroughAIPexStudio/AIPex	1.3k	—	~1.9k	Automated safety check: Pass	MIT	1 mo ago

Similar skills

Agent Browser CLI
vercel-labs/agent-browser
Official
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking…
44k GitHub starsUsed in 24 repos~864 tokens
Productivity & AutomationAuto-check passed
Bdg
szymdzum/browser-debugger-cli
Use bdg CLI to drive and debug a real Chrome via Chrome DevTools Protocol - navigate, click, fill and submit forms, check what an action changed (navigation, new messages, pending requests), inspect…
170 GitHub stars~2.4k tokensUpdated today
Frontend & DesignAuto-check: notes
Unicli
olo-dot-io/Uni-CLI
Comprehensive guide to Uni-CLI — the open Agent-Computer Interface runtime for real software.
274 GitHub stars~3.8k tokensUpdated 5 days ago
Productivity & AutomationAuto-check: notes
External Electron App Automation
cashew-labs/libretto
Drives desktop Electron apps already installed on your machine, such as Slack, Discord or VS Code, by relaunching them with a debugging port and using the Libretto CLI.
904 GitHub stars~967 tokensUpdated 1 mo ago
Productivity & AutomationAuto-check passed
UX Audit Walkthrough
AIPexStudio/AIPex
Walks a Figma prototype or live webpage screen by screen and scores it against four minimalist usability principles.
1.3k GitHub stars~1.9k tokensUpdated 1 mo ago
Frontend & DesignAuto-check passed
Wonder Blocks
Khan/wonder-blocks
Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.
163 GitHub stars~3.2k tokensUpdated today
Frontend & DesignAuto-check passed

Questions about Verify With Browser

What does Verify With Browser do?

Visually verify component changes in Storybook using the agent-browser CLI tool. Verify With Browser is an agent skill from razorpay/blade.

When should I use Verify With Browser?

Verify With Browser fits situations like: tasks that involve Browser automation.

How do I install Verify With Browser in Claude Code?

Run `npx skills add razorpay/blade --skill verify-with-browser -a claude-code`. Or copy the skill folder (.agents/skills/verify-with-browser in razorpay/blade) into .claude/skills/verify-with-browser in your project. Claude Code loads it when a task matches its description.

How do I install Verify With Browser in Codex?

Run `npx skills add razorpay/blade --skill verify-with-browser -a codex`. Or copy the skill folder (.agents/skills/verify-with-browser in razorpay/blade) into .agents/skills/verify-with-browser in your project. Codex loads it when a task matches its description.

Can I use Verify With Browser in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add razorpay/blade --skill verify-with-browser -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/verify-with-browser, .gemini/skills/verify-with-browser, .github/skills/verify-with-browser and .opencode/skills/verify-with-browser in your project.

What does Verify With Browser need to run?

Going by SKILL.md and its folder, Verify With Browser needs the command-line tools its instructions call (npx and yarn). Our summary lists: Node.js.

Does Verify With Browser access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Verify With Browser safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Verify With Browser use?

Verify With Browser is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Verify With Browser use?

About 1.1k tokens (SKILL.md is roughly 4.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Verify With Browser?

Skills that share tags, products or a category with Verify With Browser: Agent Browser CLI (vercel-labs/agent-browser, 44k stars), Bdg (szymdzum/browser-debugger-cli, 170 stars), Unicli (olo-dot-io/Uni-CLI, 274 stars) and External Electron App Automation (cashew-labs/libretto, 904 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Verify With Browser?

razorpay (a GitHub organization) maintains it in razorpay/blade, which has 656 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 9, 2026.

Source: razorpay/blade on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Verify With Browser

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Verify with Browser

Usage

Instructions

Step 1: Prerequisites

Step 2: Available Agent Browser Commands

Step 3: Navigate to Storybook

Step 4: Take Screenshots

Step 5: Example Workflow

Step 6: Verification Checklist

Storybook URL Patterns

Tips for Testing

Files

Compare with similar skills

Similar skills

More from razorpay/blade

Related

Questions about Verify With Browser