browser-use-screenshot

Automate browser UI verification and screenshot capture for Nuxt and Supabase projects.

45|3|Updated Jan 20, 2026
One-click install
npx skills add https://github.com/YuDefine/nuxt-supabase-starter --skill browser-use-screenshot
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-use-screenshot
Source: https://github.com/YuDefine/nuxt-supabase-starter/tree/main/.claude/skills/browser-use-screenshot
Command: npx skills add https://github.com/YuDefine/nuxt-supabase-starter --skill browser-use-screenshot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

截圖、看畫面、確認 UI、看一下頁面、幫我看 UI — nuxt-supabase-starter 的瀏覽器截圖流程(含自動登入與 dev server 自動管理)。處理 dev server 偵測/啟動、認證登入(支援 better-auth 填表或 dev-login route)、頁面導航與截圖。

Core Features & Use Cases

  • 自動啟動與偵測 Nuxt dev server,確保同時不干擾其他專案
  • 自動登入:支援 dev-login route 或 better-auth 表單登入,完成登入後再進行導航與截圖
  • 頁面導航與截圖:自動導航到指定頁面,等待就緒後以 temp/ 儲存截圖,方便驗證 UI
  • 適用場景:UI 迭代後的回歸檢查、跨頁面視覺比對、DevOps 的 UI 快速驗證

Quick Start

直接執行 browser-use-screenshot,讓自動登入、導航到目標頁面並產生截圖成為一條連續流程。

Frequently Asked Questions about browser-use-screenshot

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

FAQPage Schema
How do I automate UI screenshots for a Nuxt and Supabase dev server?

Automated browser UI verification handles dev server detection, auto-login via a dev-login route or better-auth forms, page navigation, and saves screenshots to temp/ to streamline UI debugging and regression checks across dev server states.

Can I capture browser screenshots without manually logging into my Supabase application?

Yes, the automated login mechanism handles authentication by navigating to a dev-login route or completing better-auth form submissions before capturing screenshots, eliminating manual login steps during UI verification.

What is the best way to run visual regression checks across multiple Nuxt pages?

Executing an automated browser screenshot workflow is the best way to perform visual regression checks, as it waits for page readiness after navigation and stores screenshots in temp/ for cross-page comparison and documentation.

Does this automated screenshot tool support better-auth form login?

Yes, the browser screenshot automation supports better-auth by automatically filling out login forms to authenticate the browser session before navigating to specified pages for UI verification and screenshot capture.

Why does the browser screenshot process wait before capturing the Nuxt UI?

The screenshot process includes readiness waits before capturing the Nuxt UI to ensure all dynamic elements and Supabase data have fully loaded, preventing incomplete or inaccurate visual validation captures.

Do I need to manually start my Nuxt dev server before taking UI screenshots?

No, you do not need to manually start the dev server because the browser daemon automatically detects an existing Nuxt dev server or starts a new one, ensuring port discovery does not interfere with other active projects.