skills.rest
langfuse
langfuseOFFICIAL
Explore all skills by this author →
Website𝕏@langfuseGitHub

frontend-browser-review

Reviews user-visible frontend changes in Langfuse using browser automation before signoff.

34.0k|3.7k|Updated May 18, 2023
Search Tags:#seed data#playwright#ui testing#visual regression#langfuse#Browser Automation#frontend review
One-click install
npx skills add https://github.com/langfuse/langfuse --skill frontend-browser-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-browser-review
Source: https://github.com/langfuse/langfuse/tree/main/.agents/skills/frontend-browser-review
Command: npx skills add https://github.com/langfuse/langfuse --skill frontend-browser-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend changes in Langfuse can introduce visual regressions, broken layouts, or navigation issues that unit tests and linting miss. This Skill provides a structured browser-based review workflow so UI changes are verified in a real browser before signoff.

Core Features & Use Cases

  • Browser-Based Review Loop: Drives a repeatable workflow using Cursor Cloud computer use or a Playwright MCP server to exercise changed flows and check for visual regressions.
  • Seeded Test Data: Integrates with the Langfuse seed CLI to prefill traces, sessions, and observation trees, producing deep links for realistic review scenarios.
  • Structured Signoff Reporting: Defines output expectations including reviewed flows, regression findings, blockers, and human handoff details with screenshots or videos on the GitHub PR.
  • Use Case: After modifying a trace tree page layout in web/, seed 5000 observations, open the deep link in a browser session, verify the happy path and responsive behavior, then post before/after proof on the PR.

Quick Start

Ask the agent to review your Langfuse UI change in the browser using the frontend-browser-review workflow and report any visible regressions.

Frequently Asked Questions about frontend-browser-review

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

FAQPage Schema
How do I review frontend changes in Langfuse with a browser?▼

Start the app with pnpm run dev:web, seed test data with the seed CLI, then open the changed flow using Cursor Cloud computer use or the Playwright MCP server. Exercise the happy path and check for layout, spacing, and responsive regressions.

How do I seed test data for Langfuse UI review?▼

Use the seed CLI commands such as pnpm run seed -- trace-tree --observations 5000 --v4 for complex trees or pnpm run seed -- long-session --traces 300 for heavy sessions. Each run prints UI deep links to open directly.

When should I use browser review instead of unit tests?▼

Use browser review for user-visible changes like layout, styling, navigation flows, and bug fixes with visible failure modes. It complements targeted tests and linting rather than replacing them.

What should I do if the Playwright MCP session fails?▼

Inspect the /tmp/playwright-mcp directory for failure details. In Cursor Cloud, check the run's browser artifacts and Compose logs to diagnose the issue.

What should a frontend review report include?▼

Report the reviewed flow, whether the primary path worked, any visible regressions or risks, and blockers if review was impossible. For handoff, include the preview URL, click-path steps, and screenshot or video proof on the GitHub PR.

Related Skills

Explore More Software Engineering Skills→
beam-ai-teambeam-ai-team

langfuse-traces

Query and manage Langfuse traces, observations, and sessions via API.

Official
Intermediate
bitpantrybitpantry

finish-pr

Merge reviewed GitHub pull requests after tests pass and branches sync.

Community
Advanced
kdlbskdlbs
562

verify

Run format, typecheck, tests, and lint across monorepo packages.

Official
Intermediate
thktthkt
11

e2e

Generate Playwright E2E tests and documentation through guided browser interactions.

Community
Intermediate