frontend-pipeline

Use this agent when the user requests Chrome DevTools analysis for web applications. This is a PROACTIVE agent that activates AUTOMATICALLY when detecting specific keywords or patterns in user messages. **AUTOMATIC TRIGGER KEYWORDS:** - "chrome devtools", "devtools", "chrome dev tools", "chrome tools", "dev tools" - "ispeziona con chrome", "usa chrome per", "usa devtools" - "controlla con devtools", "verifica con chrome", "testa con devtools" **IMPLICIT PATTERN TRIGGERS:** - "verifica [errori|network|console|performance] [su|nel|nella] [URL|frontend|pagina]" - "testa [login|form|funzionalità] [con|nel] browser" - "controlla [la pagina|il frontend|l'applicazione] [URL]" - "ispeziona [il frontend|la pagina|l'app]" - "debug [browser|frontend|javascript]" **INTEGRATION WITH FRONTEND PIPELINE:** This agent works INDEPENDENTLY and is NOT part of the mandatory chain (architect -> reviewer -> debugger/refactorer -> re-reviewer). It CAN be invoked by frontend-debugger for browser-level diagnostics, or directly by the user with devtools/chrome keywords. **EXAMPLES:** <example> Context: User is developing a React application and wants to test login functionality. user: "Usa chrome devtools per provare il login dell'applicazione" assistant: "Ho rilevato una richiesta di analisi DevTools. Attivo l'agente chrome-devtools-analyzer per testare il login." <commentary> The user explicitly mentioned "chrome devtools" which is a trigger keyword. The agent must be activated immediately using the Task tool. </commentary> assistant uses Task tool to launch chrome-devtools-analyzer agent </example> <example> Context: User is debugging frontend errors on a React application. user: "Controlla se ci sono errori nella console del frontend" assistant: "Rilevo una richiesta di verifica errori frontend. Procedo con l'analisi DevTools." <commentary> The pattern "controlla errori" + "console" + "frontend" matches implicit triggers. Launch chrome-devtools-analyzer proactively. </commentary> assistant uses Task tool to launch chrome-devtools-analyzer agent </example> <example> Context: User wants to verify performance of a web page. user: "Verifica la performance della pagina su http://localhost:5173" assistant: "Richiesta di analisi performance rilevata. Avvio Chrome DevTools Analyzer." <commentary> The pattern "verifica performance pagina URL" triggers automatic activation for performance audit. </commentary> assistant uses Task tool to launch chrome-devtools-analyzer agent </example> <example> Context: User is testing a form submission. user: "Testa il form di registrazione nel browser" assistant: "Attivo l'analizzatore DevTools per testare il form di registrazione." <commentary> Pattern "testa form nel browser" triggers functional testing mode. Use Task tool immediately. </commentary> assistant uses Task tool to launch chrome-devtools-analyzer agent </example> <example> Context: User wants to inspect DOM structure. user: "Ispeziona il DOM della homepage" assistant: "Procedo con l'ispezione DOM tramite Chrome DevTools." <commentary> "Ispeziona DOM" matches the inspection trigger pattern. Activate agent proactively. </commentary> assistant uses Task tool to launch chrome-devtools-analyzer agent </example>

CHAIN POSITION: 1st agent in mandatory chain (architect -> reviewer -> debugger/refactorer -> re-reviewer). Use this agent AUTOMATICALLY when user mentions creating, building, or implementing any React UI component, form, page, or interface. This agent triggers on: (1) Creation keywords + UI elements (EN: create, add, build, implement, develop, make, generate, new, I need, I want, build me + component, form, page, dashboard, table, list, modal, dialog, card, sidebar, layout, interface, screen, view; IT: crea, aggiungi, implementa, costruisci, sviluppa, genera, nuovo/a, mi serve, ho bisogno di, vorrei, dammi + componente, form, pagina, dashboard, tabella, lista, modal, dialog, card, sidebar, layout, interfaccia, schermata, vista) (2) Basic MUI components: DataGrid, TextField, Button, Dialog, Drawer, Autocomplete, DatePicker, Select, Checkbox, Radio, Switch, Slider, Tabs, AppBar, Toolbar, Menu, MenuItem, Chip, Avatar, Badge, Tooltip, Snackbar, Alert (3) Advanced UI patterns: wizard, multi-step form, stepper, carousel, slider, gallery, accordion, collapsible, expandable, tabs, breadcrumbs, pagination, skeleton, skeleton loader, loading state, timeline, progress tracker, menu, dropdown, popover, notification, toast (4) Conversational triggers (IT): dove metto, dove posiziono, come organizzo, come creo, che componente uso, come faccio a creare, mi serve un, ho bisogno di un, vorrei un, dammi un, fammi un, mi puoi fare, puoi creare (5) Action verbs (EN/IT): display, show, manage, edit, insert, update, delete, visualizza, mostra, gestisci, modifica, inserisci, aggiorna, elimina. CRITICAL RULE: You MUST NEVER implement React components yourself -- ALWAYS delegate to this agent via the Task tool. MANDATORY CHAIN RULE: After this agent completes component creation, you MUST immediately launch frontend-reviewer with the Task tool -- NEVER skip the review step. This agent acts IMMEDIATELY without asking for confirmation. Examples: <example> Context: User requests a form for managing tenants with validation. user: "Mi serve un form per i tenant con validazione Zod" assistant: "Perfetto, creo immediatamente il form per i tenant. Lancio l'agente frontend-architect per implementare TenantForm con validazione Zod." <commentary> User used 'mi serve un form' (I need a form) which triggers immediate creation. Use the Task tool to launch the frontend-architect agent to create the TenantForm component without asking for confirmation. </commentary> </example> <example> Context: User needs a multi-step wizard form. user: "Mi serve un wizard con 4 step per l'onboarding dei nuovi utenti" assistant: "Creo immediatamente il wizard multi-step. Lancio frontend-architect per implementare il componente UserOnboardingWizard." <commentary> User mentioned 'wizard' which is an advanced UI pattern trigger. Use the Task tool to launch the frontend-architect agent to create a stepper-based wizard component. </commentary> </example> <example> Context: User wants a dashboard with real-time statistics. user: "Create a dashboard with real-time statistics for tenant revenue" assistant: "I'll immediately create the statistics dashboard. Launching frontend-architect to build the RevenueDashboard component." <commentary> 'Create' + 'dashboard' triggers immediate action. Use the Task tool to launch the frontend-architect agent to build the dashboard component. </commentary> </example> <example> Context: User asks where to place a UI section. user: "Dove metto la sezione notifiche? La voglio nella sidebar" assistant: "Capito, creo la sezione notifiche nella sidebar. Lancio frontend-architect per implementare NotificationsSection come sidebar widget." <commentary> User asks 'dove metto' (where do I place) which is a conversational trigger combined with UI element 'sezione notifiche'. Use the Task tool to launch the frontend-architect agent. </commentary> </example> <example> Context: User needs authentication page with OAuth. user: "Build a login page with OAuth integration for Google and GitHub" assistant: "I'll immediately build the login page. Launching frontend-architect to create LoginPage with OAuth providers." <commentary> 'Build' + 'login page' triggers immediate creation. Use the Task tool to launch the frontend-architect agent to create the authentication page. </commentary> </example> <example> Context: User requests an image carousel. user: "Add an image carousel to the property listing page" assistant: "Creating image carousel component. Launching frontend-architect to implement PropertyImageCarousel." <commentary> 'carousel' is an advanced UI pattern trigger. Use the Task tool to launch the frontend-architect agent to create the carousel component. </commentary> </example> <example> Context: User asks to create something conversationally. user: "Mi puoi fare una tabella per visualizzare gli utenti con paginazione?" assistant: "Certamente, creo subito la tabella utenti. Lancio frontend-architect per implementare UsersTable con DataGrid e paginazione." <commentary> 'Mi puoi fare' (can you make me) is a conversational trigger with 'tabella' (table). Use the Task tool to launch the frontend-architect agent immediately. </commentary> </example> <example> Context: frontend-architect has completed component creation. frontend-architect output: "Component Created: InvoiceForm. Total LOC: 145. Files created: 3. Accessibility checklist complete." assistant: "Component creation complete. Lancio IMMEDIATAMENTE frontend-reviewer per la review obbligatoria -- questo step NON è opzionale." <commentary> After architect completes creation, you MUST chain to reviewer. This is MANDATORY, not optional. Use the Task tool to launch the frontend-reviewer agent immediately for quality analysis. NEVER skip this step. </commentary> </example> <example> Context: User provides a multi-component implementation plan. user: "Implementa UserTable, UserForm e UserDetail per il modulo utenti" assistant: "Ricevuto il piano multi-componente. Per ogni componente seguo la catena obbligatoria: architect -> reviewer -> debugger/refactorer. Lancio frontend-architect per il primo componente UserTable." <commentary> When user provides a multi-component plan, ALWAYS start with frontend-architect for each component. NEVER implement directly. Use the Task tool to launch frontend-architect. After each component completes the full chain, proceed to the next component. </commentary> </example> <example> Context: frontend-architect has completed, chain MUST continue to reviewer. assistant receives architect output with component creation summary. assistant: "Creazione completata. Lancio IMMEDIATAMENTE frontend-reviewer per la validazione -- è il passo successivo OBBLIGATORIO della catena." <commentary> After frontend-architect completes, the chain REQUIRES launching frontend-reviewer next. This is NOT optional -- it is MANDATORY. Use the Task tool immediately. NEVER skip the review step, NEVER proceed to the next component without review. </commentary> </example>

CHAIN POSITION: 3rd agent (conditional) in mandatory chain (architect -> reviewer -> debugger/refactorer -> re-reviewer). This agent MUST be launched automatically when frontend-reviewer score < 80 OR CRITICAL/HIGH issues found -- this is MANDATORY, not optional. MANDATORY CHAIN RULES: (1) When frontend-reviewer score < 80 or CRITICAL/HIGH issues, this agent MUST be launched automatically. (2) After this agent completes ALL fixes, you MUST re-launch frontend-reviewer for validation (max 2 cycles). (3) If browser testing is needed, this agent CAN invoke chrome-devtools-analyzer. NEVER ask for confirmation -- launch immediately when conditions are met. Use this agent AUTOMATICALLY when: (1) frontend-reviewer detects score < 80 and passes control for debugging (automatic chain activation), (2) Runtime errors detected: TypeError, ReferenceError, SyntaxError, React-specific errors (hydration mismatch, hook order violation, Maximum update depth exceeded, Cannot update component while rendering, Memory leak in unmounted component, Invalid hook call, Rendered more hooks than during previous render), (3) HTTP/Network errors: 401 Unauthorized, 403 Forbidden, 419 CSRF token mismatch, 500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable, 504 Gateway Timeout, CORS errors, failed fetch, network request failed, ERR_CONNECTION_REFUSED, ERR_NETWORK_CHANGED, (4) Visual symptoms: white screen, blank page, black screen, nothing renders, page stuck, page frozen, infinite loop, spinning forever, not loading, not rendering, won't load, won't render, stuck on loading, loading forever, (5) User mentions problem keywords (EN: error, bug, broken, not working, crash, problema, fails, doesn't work, stops working, issue, fix this, something wrong, something broken, broke, breaking, failed, failing, won't work, can't load, cannot load; IT: errore, bug, non funziona, crash, problema, rotto, non va, si blocca, non carica, non appare, fallisce, aggiusta questo, correggi questo, non parte, non si apre, bloccato, fermo), (6) Explicit debug triggers: @debug, DEBUG:, FORCE-DEBUG:, /debug, (7) Console shows errors or warnings that need investigation. This agent acts PROACTIVELY without asking for confirmation. It uses Chrome DevTools MCP server for live diagnostic before applying any fix. Examples: <example> Context: frontend-reviewer completed review with low score. frontend-reviewer output: "Code Review Report: Score 65/100 - Grade D. Found 2 CRITICAL and 3 HIGH priority issues including memory leak and missing error boundary." assistant: "Review score below 80 threshold. Immediately launching frontend-debugger to diagnose and fix the identified issues using Chrome DevTools." <commentary> Score below 80 triggers automatic chain to debugger. Use the Task tool to launch the frontend-debugger agent with the issue list. </commentary> </example> <example> Context: User encounters React hydration mismatch. user: "Getting 'Hydration failed because the initial UI does not match what was rendered on the server' error on the login page" assistant: "React hydration mismatch detected. Launching frontend-debugger to diagnose with Chrome DevTools and fix the SSR/client mismatch." <commentary> React-specific hydration error mentioned. Use the Task tool to launch the frontend-debugger agent immediately for diagnostic. </commentary> </example> <example> Context: User reports authentication error. user: "Ricevo un errore 401 quando provo a caricare la dashboard dei tenant" assistant: "Errore 401 rilevato. Lancio frontend-debugger per analizzare il problema di autenticazione con Chrome DevTools network inspection." <commentary> HTTP 401 error (authentication failure) triggers debugging. Use the Task tool to launch the frontend-debugger agent for network diagnostic. </commentary> </example> <example> Context: User reports visual symptom of complete failure. user: "The app shows a white screen after I click login, nothing renders at all" assistant: "White screen symptom detected - likely a crash or render error. Launching frontend-debugger to check console errors and React component state." <commentary> Visual symptom 'white screen' and 'nothing renders' triggers immediate debugging. Use the Task tool to launch the frontend-debugger agent. </commentary> </example> <example> Context: User encounters JavaScript runtime error. user: "Ho un TypeError: Cannot read property 'map' of undefined nel componente InvoiceList" assistant: "TypeError rilevato. Avvio frontend-debugger per diagnosticare l'errore con Chrome DevTools e applicare la fix." <commentary> Runtime TypeError mentioned with specific details. Use the Task tool to launch the frontend-debugger agent for diagnostic and fix. </commentary> </example> <example> Context: User encounters network/CORS issue. user: "API calls are failing with CORS error, the fetch keeps getting blocked" assistant: "CORS/network failure detected. Launching frontend-debugger to analyze network requests and identify the CORS configuration issue." <commentary> CORS error and network failures mentioned. Use the Task tool to launch the frontend-debugger agent with network diagnostic focus. </commentary> </example> <example> Context: User reports app becoming unresponsive. user: "La pagina si blocca in un loop infinito quando apro il form di modifica" assistant: "Sintomo di loop infinito rilevato. Lancio frontend-debugger per analizzare con Chrome DevTools performance profiling." <commentary> Infinite loop symptom 'si blocca in un loop infinito' triggers debugging. Use the Task tool to launch the frontend-debugger agent. </commentary> </example> <example> Context: User explicitly requests debugging with trigger. user: "@debug the user authentication flow - something is broken" assistant: "Explicit debug trigger detected. Launching frontend-debugger with Chrome DevTools integration to analyze authentication flow." <commentary> Explicit @debug trigger used. Use the Task tool to launch the frontend-debugger agent immediately without further confirmation. </commentary> </example> <example> Context: frontend-reviewer score < 80, debugger launch is MANDATORY. frontend-reviewer output: "Code Review Report: Score 72/100 - Grade C. Found 1 CRITICAL issue (XSS vulnerability) and 2 HIGH issues (missing error boundary, performance bottleneck)." assistant: "Score 72/100 con issue CRITICAL e HIGH. Lancio IMMEDIATAMENTE frontend-debugger -- questo è OBBLIGATORIO, non opzionale." <commentary> When reviewer score < 80 or CRITICAL/HIGH issues are found, launching frontend-debugger is MANDATORY. Use the Task tool immediately. NEVER ask for confirmation, NEVER skip this step. </commentary> </example> <example> Context: frontend-debugger has completed all fixes, re-review is MANDATORY. frontend-debugger output: "Frontend Debug Report: All 4 issues fixed. Console errors: 0. TypeScript errors: 0. Network errors: 0." assistant: "Debugger completato con successo. Lancio IMMEDIATAMENTE frontend-reviewer per la ri-validazione OBBLIGATORIA (ciclo 2/2 max)." <commentary> After frontend-debugger completes ALL fixes, you MUST re-launch frontend-reviewer for validation. This is MANDATORY (max 2 review cycles). Use the Task tool immediately. </commentary> </example>

CHAIN POSITION: 3rd agent (conditional, alternative to debugger) in mandatory chain (architect -> reviewer -> debugger/refactorer -> re-reviewer). This agent MUST be launched automatically when frontend-reviewer detects any file with LOC > 150 OR maintainability score < 15/25 -- this is MANDATORY, not optional. MANDATORY CHAIN RULES: (1) When reviewer flags LOC > 150 or maintainability < 15/25, this agent MUST be launched automatically. (2) After refactoring, you MUST re-launch frontend-reviewer for validation (max 2 cycles). (3) GOLDEN RULE: UI/UX MUST remain IDENTICAL. NEVER ask for confirmation -- launch immediately when conditions are met. Use this agent AUTOMATICALLY when: (1) frontend-reviewer detects any file with LOC > 150 (automatic chain activation), (2) frontend-architect creates a component exceeding 150 LOC, (3) Maintainability score < 15/25 in any review, (4) User mentions refactoring/complexity keywords (EN: refactoring, refactor, decompose, too big, too long, too complex, too large, hard to maintain, difficult to maintain, messy, confusing, spaghetti, break up, break apart, extract, separate, split, clean up, organize, simplify, huge component; IT: refactoring, refactor, decomponi, troppo grande, troppo lungo, troppo complesso, difficile da mantenere, incasinato, confuso, spaghetti, spezza, separa, estrai, pulisci, riorganizza, semplifica, come organizzo questo componente, come suddivido, come divido). This agent acts PROACTIVELY without asking for confirmation. After refactoring completion, it AUTOMATICALLY chains to frontend-reviewer for validation. Examples: <example> Context: frontend-reviewer has completed review and detected LOC violation. frontend-reviewer output: "Code Review Report: Score 85/100. TenantDashboard.tsx has 280 LOC - exceeds 150 LOC limit. Triggering decomposition." assistant: "LOC threshold exceeded. Launching frontend-refactorer to decompose TenantDashboard.tsx while preserving identical UI/UX." <commentary> frontend-reviewer flagged LOC > 150, automatically use the Task tool to launch the frontend-refactorer agent for decomposition. </commentary> </example> <example> Context: User complains about component becoming messy. user: "Questo componente UserManagement è diventato incasinato, non ci capisco più niente" assistant: "Rilevo una richiesta di pulizia e riorganizzazione. Lancio frontend-refactorer per semplificare UserManagement mantenendo UI/UX identici." <commentary> User used 'diventato incasinato' (became messy) which triggers complexity/disorder refactoring. Use the Task tool to launch the frontend-refactorer agent. </commentary> </example> <example> Context: User asks how to organize a large component. user: "How should I organize this huge InvoiceList component? It's getting too complex" assistant: "I'll help organize and decompose InvoiceList. Launching frontend-refactorer to break it into manageable pieces." <commentary> User asks organization question with 'huge' and 'too complex' keywords. Use the Task tool to launch the frontend-refactorer agent. </commentary> </example> <example> Context: User explicitly requests decomposition. user: "Decomponi il componente OrderForm, è troppo lungo" assistant: "Richiesta di decomposizione rilevata. Attivo frontend-refactorer per scomporre OrderForm." <commentary> User explicitly used 'decomponi' (decompose) trigger word. Use the Task tool to launch the frontend-refactorer agent immediately. </commentary> </example> <example> Context: User expresses maintenance difficulty. user: "This component is really hard to maintain, too many responsibilities mixed together" assistant: "Maintenance issue detected. I'll decompose this component using frontend-refactorer to separate concerns." <commentary> User mentioned 'hard to maintain' and 'too many responsibilities' which triggers refactoring. Use the Task tool to launch the frontend-refactorer agent. </commentary> </example> <example> Context: User asks about subdividing a component. user: "Come suddivido questo componente Dashboard? È diventato troppo grande" assistant: "Ti aiuto a suddividere il componente. Lancio frontend-refactorer per decomporlo in parti gestibili." <commentary> User asks 'come suddivido' (how do I subdivide) with 'troppo grande' (too big). Use the Task tool to launch the frontend-refactorer agent. </commentary> </example> <example> Context: Refactoring has been completed successfully. frontend-refactorer output: "Refactoring complete: Dashboard decomposed into 6 files, all < 80 LOC. UI/UX verified identical." assistant: "Refactoring completed successfully. Now launching frontend-reviewer to validate the decomposed structure." <commentary> After refactoring completion, automatically chain to reviewer for validation. Use the Task tool to launch the frontend-reviewer agent. </commentary> </example> <example> Context: frontend-reviewer detects LOC > 150, refactorer launch is MANDATORY. frontend-reviewer output: "Code Review Report: Score 82/100 - Grade B. UserForm.tsx has 195 LOC (exceeds 150 LOC limit). Maintainability: 12/25." assistant: "File supera 150 LOC e maintainability sotto 15/25. Lancio IMMEDIATAMENTE frontend-refactorer -- questo è OBBLIGATORIO, non opzionale." <commentary> When reviewer flags LOC > 150 or maintainability < 15/25, launching frontend-refactorer is MANDATORY. Use the Task tool immediately. NEVER ask for confirmation, NEVER skip this step. </commentary> </example> <example> Context: frontend-refactorer has completed, re-review is MANDATORY. frontend-refactorer output: "Refactoring Report: UserForm decomposed into 5 files, max LOC: 78. UI/UX verified identical. Zero TypeScript errors." assistant: "Refactoring completato. Lancio IMMEDIATAMENTE frontend-reviewer per la ri-validazione OBBLIGATORIA (ciclo 2/2 max)." <commentary> After frontend-refactorer completes, you MUST re-launch frontend-reviewer for validation. This is MANDATORY (max 2 review cycles). Use the Task tool immediately. NEVER skip re-validation. </commentary> </example>

CHAIN POSITION: 2nd agent in mandatory chain (architect -> reviewer -> debugger/refactorer -> re-reviewer). This agent MUST be launched immediately after frontend-architect completes ANY component creation -- this is NOT optional. MANDATORY CHAIN RULES: (1) After frontend-architect completes, you MUST launch this agent -- NEVER skip the review step. (2) After this agent completes with score < 80 OR CRITICAL/HIGH issues, you MUST launch frontend-debugger. (3) After this agent completes with any file LOC > 150 OR maintainability < 15/25, you MUST launch frontend-refactorer. (4) After debugger or refactorer completes, you MUST re-launch this reviewer (max 2 cycles). Use this agent AUTOMATICALLY when: (1) frontend-architect has completed creating a new component or feature (automatic chain activation) (2) User mentions quality/review keywords (EN: review, check, analyze, verify, audit, quality, is this correct, is this right, looks good, before deploy, code quality, correct code; IT: review, controlla, analizza, verifica, audit, qualità, va bene così, è corretto, è giusto, che ne pensi, cosa ne pensi, prima del deploy, codice di qualità, controllare, revisiona) (3) TypeScript/React files (.tsx/.ts) in src/ have been modified and user wants quality feedback (4) User asks implicit correctness questions (EN: "does this look good?", "is this correct?", "ready to deploy?"; IT: "va bene così?", "è corretto questo?", "posso deployare?") This agent acts PROACTIVELY without asking for confirmation. NEVER ask for confirmation -- launch immediately when conditions are met. Examples: <example> Context: The frontend-architect agent has just finished creating a new Dashboard component with real-time statistics. frontend-architect output: "I've completed creating the Dashboard component with all requested features including real-time data updates." assistant: "The Dashboard component creation is complete. I'll now launch frontend-reviewer for automatic code review." <commentary> Since frontend-architect completed a creation, automatically use the Task tool to launch the frontend-reviewer agent. This is the standard pipeline flow. </commentary> </example> <example> Context: User requests a review of recently written code. user: "Controlla il componente UserProfile che ho appena creato" assistant: "Analizzo il componente UserProfile. Utilizzo l'agente frontend-reviewer per una code review completa." <commentary> The user explicitly requested 'controlla' which is a review trigger. Use the Task tool to launch the frontend-reviewer agent. </commentary> </example> <example> Context: User asks for validation after completing implementation. user: "Va bene così il componente LoginForm? Posso procedere?" assistant: "Verifico il componente. Lancio l'agente frontend-reviewer per controllare qualità e correttezza." <commentary> The user is asking for implicit validation with "va bene così". Use the Task tool to launch the frontend-reviewer agent. </commentary> </example> <example> Context: User wants quality check before deployment. user: "Let's do a code audit before deploy - I want to make sure everything is production ready" assistant: "I'll perform a comprehensive pre-deployment audit. Launching frontend-reviewer for complete quality assessment." <commentary> The user requested an audit before deploy which triggers comprehensive review. Use the Task tool to launch the frontend-reviewer agent. </commentary> </example> <example> Context: After review completion, score is below threshold. frontend-reviewer output: "Code Review Report: Score 72/100 - Grade C. Found 3 HIGH priority issues with performance and accessibility." assistant: "Review complete with score below 80. Automatically launching frontend-debugger to address the identified issues." <commentary> Score below 80 triggers automatic chain to debugger. Use the Task tool to launch the frontend-debugger agent with the issue list from the review. </commentary> </example> <example> Context: After review completion, LOC violations found. frontend-reviewer output: "Code Review Report: Score 85/100 - Grade B. Dashboard.tsx has 187 LOC (exceeds 150 LOC limit)." assistant: "Review completata ma il file Dashboard.tsx supera il limite di 150 LOC. Lancio automaticamente frontend-refactorer per la decomposizione." <commentary> LOC > 150 triggers automatic chain to refactorer. Use the Task tool to launch the frontend-refactorer agent with the file list. </commentary> </example> <example> Context: User expresses concern about code quality. user: "Is this correct? I'm not sure if the component follows best practices" assistant: "I'll verify against React and MUI best practices. Launching frontend-reviewer for comprehensive quality analysis." <commentary> The user is asking "is this correct" which triggers quality verification. Use the Task tool to launch the frontend-reviewer agent. </commentary> </example> <example> Context: frontend-architect has completed component creation, review is MANDATORY. frontend-architect output: "Component Created: UserTable. Total LOC: 120. Files created: 4. Accessibility checklist complete." assistant: "Creazione completata. Lancio IMMEDIATAMENTE frontend-reviewer per la review OBBLIGATORIA -- questo step NON è opzionale nella catena." <commentary> After frontend-architect completes ANY creation, you MUST launch frontend-reviewer. This is MANDATORY, not optional. Use the Task tool immediately. NEVER skip this step, NEVER proceed without review. </commentary> </example> <example> Context: frontend-debugger or frontend-refactorer has completed, re-review is MANDATORY. frontend-debugger output: "Frontend Debug Report: All 5 issues fixed successfully. Console errors cleared. TypeScript errors: 0." assistant: "Debugger completato. Lancio frontend-reviewer per la ri-validazione OBBLIGATORIA (ciclo 2/2 max)." <commentary> After debugger or refactorer completes, you MUST re-launch frontend-reviewer for validation. This is MANDATORY (max 2 review cycles). Use the Task tool immediately. NEVER skip re-validation. </commentary> </example>

Mandatory agent pipeline enforcement for frontend development. Activates when the user asks to create, build, or implement any React/MUI UI component, form, page, table, dashboard, or interface. Triggers on: (EN) 'create a component', 'build a form', 'create a page', 'add a table', 'implement', 'build', 'fix React', '/chain'; (IT) 'crea un componente', 'crea una pagina', 'aggiungi una tabella', 'implementa', 'costruisci'; (Technical) 'MUI', 'Material UI', 'React', 'DataGrid', 'header', 'form', 'dialog', 'dashboard', 'wizard', 'stepper', 'carousel', 'sidebar', 'layout'. Also activates when the user provides a multi-component implementation plan or requests any frontend feature development.

Use this skill for ANY React component work in MUI-based projects — building, styling, fixing, debugging, or refactoring. Covers MUI (Material UI) v7, MUI X v8 (DataGrid, DatePicker, Autocomplete), TanStack Query v5, React Hook Form + Zod, and React Router v7. Triggers on: 'create a form', 'build a data table', 'add server-side pagination', 'create a dialog', 'configure MUI theme', 'use the sx prop', 'add a snackbar', 'create tabs', 'build a page layout', 'fix the grid layout', 'the component doesn't align', useQuery, useMutation, or Italian: 'crea un componente React', 'aggiungi una tabella dati', 'crea una pagina', 'sistema il layout'. Also activates for Grid layout, responsive design, WCAG accessibility, component decomposition, and any task involving MUI imports or the sx prop — even if the user doesn't explicitly mention MUI.

This skill should be used when the user asks to 'create a page', 'build a page', 'add a new page', 'crea una pagina', 'aggiungi pagina', 'page header', 'create header', 'crea header', 'header component', or when creating any new Index, Show, Create, or Edit page. Also triggers when building page layouts, implementing list pages, detail pages, form pages, or any route-level component that needs a header. Provides theme-driven design system, shared header components, and page structure standards.