skills.rest
razorpay
razorpayOFFICIAL
Explore all skills by this author →
Website𝕏@razorpayGitHub

verify-with-browser

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

649|197|Updated Jan 28, 2020
Search Tags:#storybook#screenshot#Browser Automation#Visual Testing#agent-browser#Design system#component verification
One-click install
npx skills add https://github.com/razorpay/blade --skill verify-with-browser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: verify-with-browser
Source: https://github.com/razorpay/blade/tree/main/.agents/skills/verify-with-browser
Command: npx skills add https://github.com/razorpay/blade --skill verify-with-browser

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agent-browser.

What problem does it solve?

Manually checking whether UI component changes match Figma designs is slow and error-prone. This Skill automates visual verification of Blade Design System components in Storybook by driving a real browser, capturing screenshots, and testing interactive states.

Core Features & Use Cases

  • Automated Browser Navigation: Opens Storybook stories in full or iframe view using the agent-browser CLI, with no installation required.
  • Screenshot Capture: Takes clean, iframe-based screenshots of components for direct comparison against Figma designs.
  • Interactive State Testing: Clicks elements and types text via snapshot element refs to verify component behavior in active states.
  • Use Case: After modifying the Popover component, run the Skill to open its Storybook story, screenshot the default and open states, and confirm padding, colors, and typography match the design tokens.

Quick Start

Ask the agent to verify the Popover component in Storybook with the verify-with-browser skill and compare the screenshots against the Figma design.

Frequently Asked Questions about verify-with-browser

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visually test Storybook components in a browser?▼

Run Storybook locally, then use agent-browser commands to open the story URL, take a snapshot to confirm the page loaded, and capture a screenshot. The iframe view URL gives cleaner screenshots without Storybook UI chrome.

How to take screenshots of Storybook stories with agent-browser?▼

Use npx agent-browser open with the iframe URL format, then run npx agent-browser screenshot with a descriptive filename. The iframe view shows only the component, producing smaller files ideal for Figma comparison.

Does agent-browser require installation to test components?▼

No installation is required. Run all commands through npx agent-browser, and the tool automatically starts a background daemon on first use for subsequent commands.

Why is my Storybook URL not loading during verification?▼

The localhost port may differ from the default 9011, so check which port Storybook is actually running on. Also confirm the story name uses kebab-case matching the component's .stories.tsx file.

Can I test interactive component states like open popovers?▼

Yes. Run npx agent-browser snapshot -i to get clickable element refs, then use npx agent-browser click with the ref to trigger interactions before capturing a screenshot of the active state.

Related Skills

Explore More Software Engineering Skills→
vultisigvultisig
19

Storybook Component Workflow

Integrate Figma designs with Storybook for React styled-components development.

Official
Advanced
udecodeudecode
240

figma-design-sync

Compare Figma designs with live web components and fix CSS/Tailwind discrepancies.

Official
Advanced
V4-CompanyV4-Company
2

marsai:dev-frontend-accessibility

Run axe-core accessibility scans on React/TypeScript UI components.

Official
Intermediate
cartridge-ggcartridge-gg
80

update-storybook-snapshots

Update Storybook visual regression snapshots after intentional UI changes.

Official
Intermediate