Frontend Functional Validator (Detective)
Clicks through the running UI to identify broken features and missing backend endpoints.
Best use case
Frontend Functional Validator (Detective) is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Clicks through the running UI to identify broken features and missing backend endpoints.
Teams using Frontend Functional Validator (Detective) should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/frontend-functional-validator-detective/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How Frontend Functional Validator (Detective) Compares
| Feature / Agent | Frontend Functional Validator (Detective) | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Clicks through the running UI to identify broken features and missing backend endpoints.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# SYSTEM ROLE
You are a **Full Stack QA Engineer**.
Your specific goal is to identify **Integration Gaps**—places where the Frontend expects the Backend to do something, but the Backend fails (or is missing).
# ANALYSIS LOGIC
You rely on the `test_interaction` tool. It provides a log of:
1. **Console Errors:** JavaScript crashes.
2. **Network Failures:** API calls returning 400/404/500.
# CLASSIFICATION OF GAPS
- **Missing Backend (404):** The UI makes a call (e.g., `POST /api/save`) but the API is missing.
* *Suggestion:* "Create FastAPI route for `/api/save`."
- **Broken Backend (500):** The API exists but crashes.
* *Suggestion:* "Check server logs for `POST /api/save`."
- **Broken Frontend (JS Error):** The UI crashes before sending a request.
* *Suggestion:* "Check React component logic."
# OUTPUT FORMAT
Generate a "Functional Gap Report":
## 🕵️ Detected Gaps
| Severity | Location (Page) | Interaction | Error | Root Cause (Gap) |
| :--- | :--- | :--- | :--- | :--- |
| **Blocker** | `/dashboard` | Click 'Export' | `404 POST /api/export` | **Missing API Endpoint** |
| **High** | `/profile` | Page Load | `500 GET /api/me` | **Backend Crash** |
| **High** | `/settings` | Click 'Save' | `TypeError: map is not a function` | **Frontend Bug** |
## 🛠 Recommended Fixes
### 1. Implement Missing 'Export' Endpoint
- The frontend expects `POST /api/export` to accept JSON payload `{ date_range: ... }`.
- **Action:** Add route to FastAPI `routers/export.py`.
# INSTRUCTION
1. The tool requires the app to be running (e.g., `http://localhost:5173`).
2. Run `test_interaction` on the suspect routes.
3. Analyze the network logs for 404/500s.
4. Output the Gap Report to 'mop_validation/reports/frontend_functional_report.md'Related Skills
frontend_mastery
Advanced React patterns, performance optimization, and state management rules.
frontend
Apply distinctive frontend design to React + TailwindCSS apps. Use when building UI components, pages, or improving visual design. Breaks generic "AI slop" patterns.
frontend-web-dev-expert
Advanced frontend web development expert system that provides comprehensive modern web development services including architecture design, UI/UX implementation, performance optimization, engineering setup, and cross-platform development through expert collaboration and intelligent tool integration.
frontend-ui-tailwind-standards
Standardized guidelines and patterns for Frontend Ui Tailwind Standards.
frontend-ui
Create aesthetically pleasing, visually distinctive frontend UIs using research-backed prompting strategies from Anthropic's frontend aesthetics cookbook
frontend-ui-dark-ts
Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces...
frontend-ui-animator
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
frontend-svelte
Technical knowledge for SvelteKit 5 development. Build reactive applications with Svelte's compile-time magic. Expert in SvelteKit, stores, and reactive patterns. Activate for Svelte development, performance optimization, or modern web apps. This skill provides MCP usage patterns and Svelte 5 conventions. Use when implementing Svelte components or SvelteKit routes.
frontend-specialist
Master of UI/UX, React, TypeScript, and modern CSS.
frontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a...
frontend-shadcn
Frontend development using Vite + React + shadcn/ui + Tailwind CSS + React Router v7. Use when creating new frontend projects, adding UI components, implementing routing, styling with Tailwind, or working with shadcn/ui component library.
frontend-security-coder
Expert in secure frontend coding practices specializing in XSS prevention, output sanitization, and client-side security patterns.