mcpbeat Sign in

Frontend Browser Review Agent Skill

by langfuse

| Shared workflow for browser-based review of user-visible frontend changes in Langfuse. Use when a change affects UI behavior, layout, styling, navigation, or browser-visible regressions and should be checked with the Playwright MCP server before signoff.

723 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
32482
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/langfuse/langfuse --skill frontend-browser-review

The instruction itself

7 sections, as written by the author

Frontend Browser Review

Use this skill when a change affects what users see or do in the browser.

Start Here

  • Read ../../../web/AGENTS.md for web-specific

entry points and test commands.

  • Use the workspace playwright MCP server configured from the repo-owned

shared agent setup.

When To Use It

  • UI changes in web/**
  • Layout, styling, or responsive behavior changes
  • Changes to navigation or page flows
  • Bug fixes where the failure mode is visible in the browser
  • Final signoff for user-visible frontend work

Prefill Test Data First

Most flows are only reviewable against meaningful data. Before opening the

browser, seed what the flow needs with the seed CLI (see the

seed-test-data skill for the need→command table):

  • pnpm run seed -- trace-tree --observations 5000 --v4 — complex

observation trees (v3 + v4 events)

  • pnpm run seed -- long-session --traces 300 — heavy session views
  • pnpm run seed -- many-traces --count 100000 — list/filter performance
  • pnpm run seed -- doctor — when the stack misbehaves

Every run prints UI deep links — open those instead of navigating manually.

Do not hand-write seed scripts or raw ClickHouse inserts.

Review Loop

  • Start the app with pnpm run dev:web unless an existing local server is

already running.

  • Install Chromium with pnpm run playwright:install if Playwright has not

been set up on the machine yet.

  • Open the primary changed flow with the Playwright MCP server, using the

deep links printed by the seed CLI when the flow needs seeded data.

  • Exercise the main happy path affected by the change.
  • Check for obvious visual regressions:
  • broken layout or spacing
  • banner overlap or viewport anchoring issues
  • missing loading, empty, or error states
  • broken responsive behavior on narrow widths
  • If the page changed materially, inspect the resulting UI state and compare

it against the intended behavior from the task or existing patterns.

  • If the browser session fails, inspect traces and artifacts under

/tmp/playwright-mcp.

Output Expectations

Report:

  • What flow you reviewed
  • Whether the primary flow worked
  • Any visible regressions or follow-up risks
  • If review was blocked, exactly what prevented browser verification

Scope Notes

  • This skill complements, not replaces, targeted tests and linting.
  • For implementation details, stay in web/AGENTS.md and package-local skills.
  • Use this as the browser-signoff workflow, not as a generic frontend coding

guide.

Other skills for the same job

different authors, same section of the catalogue
Screenshot Feature Extractor
by ComeOnOliver
×1

Analyze product screenshots to extract feature lists and generate development task checklists. Use when: (1) Analyzing competitor product screenshots for feature extraction, (2) Generating PRD/task lists from UI designs, (3) Batch analyzing multiple app screens, (4) Conducting competitive analysis from visual references.

5k tokens
High Perf Browser
by wondelai

Optimize web performance through network protocols, resource loading, and browser rendering internals. Use when the user mentions "my site is slow", "Core Web Vitals", "HTTP/2 or HTTP/3", "resource hints", "network latency", "render blocking", "TCP/TLS optimization", "service worker", "Cache-Control or caching strategy", or "critical rendering path". Also trigger when diagnosing slow page loads, optimizing time to first byte, choosing between WebSocket and SSE, or reducing bundle sizes. For UI visual performance, see refactoring-ui. For font loading, see web-typography.

24k tokens
Claude Design Card
by geekjourneyx

| 将任意文本、网页或 URL 生成符合 Claude/Anthropic 设计语言的 HTML 信息卡片，通过 Playwright 截图为 PNG。 支持 14 种格式：平台封面（公众号、视频号、B站、抖音）、图文内容卡（小红书、教程、对比分析）、 社交分享卡（金句、数据、方形）、长文编辑排版（Broadsheet、Feature、Reader、Digest）。 当用户提到「信息卡、卡片、封面、图文笔记、排版、截图、生成图、内容卡」时使用本技能。

3944k tokens scripts zh
Accessibility Skill
by LambdaTest

> Adds automated accessibility (a11y) testing to test suites on TestMu AI cloud by enabling WCAG scans through driver capabilities. Framework-agnostic, works with Selenium, Playwright, and Cypress. Use when user mentions "accessibility", "accessibility testing", "a11y scan", "WCAG compliance", "accessibility audit LambdaTest", "is my page accessible".

4k tokens
Accessibility Selenium Testing
by fugazi

Accessibility testing toolkit using Selenium WebDriver 4+ with Java 21+ and axe-core engine. Use when asked to validate WCAG 2.2 AA compliance, scan pages or components for a11y violations, test keyboard navigation, audit color contrast, check ARIA semantics, generate accessibility reports, filter axe rules, debug screen reader issues, or implement POUR principles (perceivable, operable, understandable, robust).

22k tokens scripts
Browser Inspection Workflow
by TheGoat395

Run browser inspection for websites and apps. Use after building or changing frontend work to open the rendered site, inspect console and network errors, verify layout and interactions, test links/forms/media, capture screenshots, check responsive behavior, and perform the second visual polish pass before final delivery.

1k tokens
High Perf Browser
by christophacham

Optimize web performance through network protocols, resource loading, and browser rendering internals. Use when the user mentions "page load speed", "Core Web Vitals", "HTTP/2", "resource hints", "network latency", or "render blocking". Covers TCP/TLS optimization, caching strategies, WebSocket/SSE, and protocol selection. For UI visual performance, see refactoring-ui. For font loading, see web-typography.

25k tokens
Web Design Builder
by rknall

Create and refactor HTML5/JavaScript web designs from specifications or descriptions. Generates complete, accessible, responsive web designs with modern frameworks. Automatically verifies designs using Playwright MCP for accessibility and functionality testing. Use this skill when users ask to create web designs, mockups, landing pages, web applications, or refactor existing HTML/CSS/JS designs.

10k tokens

How to use it

Copy the folder

Take langfuse/frontend-browser-review from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.