Frontend Functional Validator (Detective)

Automate frontend UI exploration to detect missing backend endpoints and generate failure reports.

1|1|Updated Jan 16, 2026
One-click install
npx skills add https://github.com/Bambibanners/master_of_puppets --skill frontend-functional-validator-detective
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Frontend Functional Validator (Detective)
Source: https://github.com/Bambibanners/master_of_puppets/tree/main/.agent/skills/review-frontend-functional
Command: npx skills add https://github.com/Bambibanners/master_of_puppets --skill frontend-functional-validator-detective

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve?

Frontend teams often face invisible gaps where the backend does not support a UI flow, causing broken pages, missing endpoints, or unexpected errors during user interactions. This skill proactively navigates the app to surface integration gaps and frontend issues.

Core Features & Use Cases

  • Automated UI exploration: visits pages, triggers interactions, and records console errors and network responses to surface issues.
  • Backend gap detection: detects missing or misbehaving API endpoints that the UI expects but the server does not provide or returns errors.
  • Use Case: validate critical flows such as login, data fetch, and form submission across routes, generating a concise report of failures.

Quick Start

Start the React app on port 5173 and run the functional tester against the base URL to begin probing.

Frequently Asked Questions about Frontend Functional Validator (Detective)

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

FAQPage Schema
How do I automate UI checks to catch broken backend endpoints during user flows?

To catch missing backend endpoints, automated UI checks navigate interactive single-page applications, trigger asynchronous API calls, and record network failures. This process generates a structured report of missing endpoints and UI errors across routes.

Why does my frontend show broken pages when the UI expects API endpoints the server does not provide?

Broken pages occur when the backend does not support the UI flow, causing missing endpoints or unexpected errors during asynchronous API calls. Automated frontend validation proactively navigates the app to surface these integration gaps.

What's the best way to validate login and form submission flows using Playwright?

Validate login and form submission flows by running Playwright against your app's base URL to automate frontend exploration. It records console errors and network responses to detect misbehaving API endpoints and generate a concise failure report.

Do I need to start my React app on port 5173 before running automated frontend behavior validation?

Yes, you need to start your React app on port 5173 before running automated frontend behavior validation. The functional tester probes the base URL of your single-page application to trigger interactions and record network failures.

Can I detect network errors and missing API endpoints in typical single-page applications?

Yes, you can detect network errors and missing API endpoints in typical single-page applications. Automated testing tooling visits pages, triggers interactive UI elements, and records console errors alongside network responses to surface integration gaps.

What limitations should I expect when automating UI exploration for asynchronous API calls?

Automating UI exploration for asynchronous API calls targets single-page applications with interactive UI and may not cover complex backend logic beyond network responses. It generates actionable gap reports but requires the app to be running on the specified port.