skills.rest
OpenRouterTeam
OpenRouterTeamOFFICIAL
Explore all skills by this author →
Website𝕏@openrouterGitHub

frontend-screenshots

Capture screenshots of frontend changes on PRs or branches via Storybook or local dev.

7|12|Updated Mar 26, 2026
Search Tags:#pull request#frontend#react#visual testing#storybook#screenshot#local dev
One-click install
npx skills add https://github.com/OpenRouterTeam/docs --skill frontend-screenshots-openrouterteam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-screenshots
Source: https://github.com/OpenRouterTeam/docs/tree/main/.agents/skills/frontend-screenshots
Command: npx skills add https://github.com/OpenRouterTeam/docs --skill frontend-screenshots-openrouterteam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Verifying how a frontend change actually looks on a PR or branch normally requires manually checking out code, starting servers, seeding data, and navigating to the right page. This Skill automates that workflow by guiding the choice between Storybook and a local dev instance, then driving a browser to capture the screenshot. ## Core Features & Use Cases - Storybook path: Checks out the PR branch, finds or creates a .stories.tsx file, launches Storybook (port 6006, or the UI-only config on port 6008), derives the story ID, and screenshots the isolated component with mock data. - Local dev path: Verifies seed data coverage in postgres/seed.sql and postgres/seeds/*.csv before starting the local dev environment, then navigates to the target page and captures the screenshot. - Viewport and overlay handling: Sets exact viewport widths (including a phone-width iframe workaround), dismisses Vite error overlays, and waits for story-specific elements before capturing. - Use Case: A reviewer asks "show me what the new guardrail wizard looks like on this PR" — the Skill checks out the branch, renders the component in Storybook, and delivers a full-viewport screenshot in under a minute. ## Quick Start Take a screenshot of the frontend change on this PR so I can see what the new component looks like.

Frequently Asked Questions about frontend-screenshots

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

FAQPage Schema
How do I take a screenshot of a frontend change on a PR?▼

Check out the PR branch, then choose Storybook for isolated component rendering with mock data or a local dev instance for real auth and data flows. Storybook is faster, targeting under one minute from launch to screenshot.

Storybook vs local dev for frontend screenshots — which should I use?▼

Use Storybook when the component can render with mock props and no backend, auth, or seed dependencies. Use the local dev instance when the screenshot requires cross-page navigation, real authentication flows, or data that is hard to mock in a story.

How do I derive a Storybook story ID from a stories file?▼

The story ID is the story title and export name joined with a double hyphen, lowercased, with spaces and slashes converted to hyphens. For example, title 'Guardrails/New Guardrail Takeover' with export 'Default' becomes guardrails-new-guardrail-takeover--default.

Why is my Storybook screenshot dimmed or blank?▼

A Vite error overlay can dim the entire page even when the story renders correctly underneath. Remove it by evaluating document.querySelector('vite-error-overlay')?.remove() in the browser before capturing the screenshot.

How do I screenshot a component at mobile phone width?▼

Chrome will not shrink below roughly 500px wide, so for a phone width like 390px, open a local HTML file that embeds the story URL in an iframe styled to 390x844 pixels and screenshot that instead.

What should I check before screenshotting with a local dev instance?▼

Inspect postgres/seed.sql and postgres/seeds/*.csv to confirm the target page's data requirements are covered by existing seed rows. If seed data is missing, stop and switch to Storybook with mock props instead.

Related Skills

Explore More Software Engineering Skills→
Srujan0798Srujan0798

deploy-local

Orchestrate the NRG stack locally with docker-compose and a Python virtual environment.

Community
Advanced
githubgithub
38.5k

pr-screenshots

Embeds before/after screenshots and annotated images in pull request descriptions.

Official
Intermediate
MolcajeteAIMolcajeteAI
2

visual-regression

Automate visual regression testing with Playwright and Percy across browsers and viewports.

Official
Intermediate
probationer070probationer070

browse

Automate web application testing with Playwright headless browser interactions.

Community
Advanced