{
  "skill_name": "mcp-grid-ui-debugger",
  "eval_focus": [
    "grid-rendering-symptom-trigger",
    "dom-inspection-and-hypothesis",
    "reload-verification-and-no-hot-reload-only",
    "discrimination-from-browser-automation-e2e",
    "rebuild-confirmation-for-compiled-stacks",
    "symptom-pattern-recognition",
    "genesis-attempts-documentation"
  ],
  "evals": [
    {
      "id": 1,
      "prompt": "La scrollbar della griglia TesiGrid nel progetto SuperPlanning esce dal limite inferiore dopo il primo caricamento della pagina. Ho 120+ righe e la virtualizzazione è attiva. Mi aiuti a diagnosticare e risolvere.",
      "expected_output": "Utilizzo di mcp-grid-ui-debugger per diagnosi iterativa: baseline screenshot, ispezione DOM live (bounding rect, computed style overflow/height), ipotesi di timing/stile, modifica mirata, richiesta esplicita di rebuild (se Blazor lo richiede), verifica con reload pulito, iterazione finché stabilità confermata, documentazione su genesis_attempts.md.",
      "expectations": [
        "Riconosce il sintomo come glitch grid specifico (scrollbar posizionamento) e instrada a mcp-grid-ui-debugger",
        "Cattura baseline screenshot mostrando la scrollbar fuori limite",
        "Esegue ispezione DOM live con getBoundingClientRect() e getComputedStyle() su container griglia, scrollbar, footer",
        "Formula ipotesi basata su evidenze: overflow mancante, altezza container errata, z-index conflittuale, o transform su elementi virtualizzati",
        "Applica modifica circoscritta (CSS o JS), non refactorizzazione strutturale",
        "Se il progetto richiede rebuild (Blazor), chiede esplicitamente conferma: 'Il progetto richiede un rebuild. Puoi eseguire [comando]?'",
        "Esegue reload completo della pagina (Ctrl+R, non hot-refresh) prima di dichiarare fix verificato",
        "Prende nuovo screenshot e ispeziona DOM con gli stessi step, confronta con baseline",
        "Se il sintomo ricorre, itera (torna a formulare nuova ipotesi e applicare modifica)",
        "Crea o aggiorna documento TesiGrid_genesis_attempts.md con: sintomo, ipotesi, tentativi, root cause, fix definitivo, regressione da verificare"
      ]
    },
    {
      "id": 2,
      "prompt": "Voglio scrivere un test E2E che verifichi il flusso completo di login, poi navigazione alla griglia SuperPlanning, poi esportazione dati a CSV, tutto con Playwright.",
      "expected_output": "Escalation verso mcp-browser-automation per scrittura di suite E2E strutturata; mcp-grid-ui-debugger non è il tool adatto per test di flusso generico.",
      "expectations": [
        "Classifica la richiesta come E2E flow validation (login + navigazione + export), non diagnosi di bug visivo",
        "Riconosce che mcp-browser-automation è lo skill appropriato (test authoring, verifica post-fix)",
        "Non usa mcp-grid-ui-debugger per scrivere test generico senza sintomo grid specifico",
        "Se la richiesta includesse un sintomo specific ('la griglia non carica al login'), allora potrebbe istanziare mcp-grid-ui-debugger prima per diagnosi e mcp-browser-automation dopo per test di regressione"
      ]
    },
    {
      "id": 3,
      "prompt": "Ho cambiato il CSS della griglia aggiungendo `overflow: hidden; z-index: 10` al container. Nel browser (dopo hot-reload) la scrollbar adesso appare al posto giusto. Il fix è verificato.",
      "expected_output": "Rifiuto di dichiarare fix verificato senza reload pulito. Richiesta di: reload completo della pagina (Ctrl+R), nuovo screenshot, nuovo DOM inspect per confronto, verifica con dataset di 100+ righe (se virtuale), documentazione di quanto verificato e quanto rimane da testare.",
      "expectations": [
        "Riconosce che hot-reload può nascondere race condition o fallback temporanei",
        "Rifiuta di dichiarare 'fix verificato' basandosi solo su hot-reload o singolo screenshot post-cambio",
        "Richiede esplicitamente: 'Puoi eseguire un reload completo della pagina (Ctrl+R o F5)? Questo è importante per verificare che il fix sia stabile e non solo un effetto di hot-reload.'",
        "Dopo il reload, prende nuovo screenshot e ispeziona DOM (bounding rect scrollbar, overflow computed, altezza container)",
        "Confronta il nuovo screenshot con la baseline pre-fix",
        "Se il dataset è virtualizzato (100+ righe), verifica che il fix funzioni anche con il numero reale di righe",
        "Non dichiara fix definitivo fino a quando reload pulito + DOM inspect + screenshot confermano la risoluzione",
        "Itera se il sintomo ricorre al reload pulito"
      ]
    },
    {
      "id": 4,
      "prompt": "La griglia TesiGrid sfarfalla (flicker) quando viene caricata per la prima volta: il footer scompare e riappare in meno di 1 secondo. Sembra una race condition. Puoi aiutarmi?",
      "expected_output": "Diagnosi iterativa di mcp-grid-ui-debugger con focus su timing/race condition: cattura del flicker in screenshot, ispezione DOM al momento del flicker (tempo di mount footer vs dati), ipotesi di delay di rendering, modifica mirata (es. delay di mount footer, fissare altezza container), verifica con reload pulito ripetuto, documentazione della radice causa nel genesis doc.",
      "expectations": [
        "Riconosce il sintomo di flicker come pattern ricorrente di timing/race condition in grid e instrada a mcp-grid-ui-debugger",
        "Cattura baseline screenshot mostrando il flicker (es. 3 screenshot in sequenza: prima flicker, durante flicker, dopo stabilizzazione)",
        "Esegue ispezione DOM al primo render: footer presente? Ha display corretta? Quando compare il footer vs quando i dati arrivano?",
        "Verifica il timing di mount nel codice: il footer viene dichiarato prima di isDataReady?",
        "Formula ipotesi di race condition: 'Il footer renderizza prima che l'altezza della griglia sia calcolata; quando i dati arrivano, il container si ridimensiona e il footer salta.'",
        "Applica modifica mirata: es. aggiungere `setTimeout(() => setShowFooter(true), 100)` o fissare altezza container prima del footer",
        "Se il progetto è Blazor/compilato, richiede rebuild esplicito",
        "Esegue reload completo della pagina 3+ volte consecutivamente per verificare che il flicker non ricorra",
        "Prende screenshot del nuovo stato e ispeziona DOM di nuovo",
        "Documenta: sintomo (flicker footer), ipotesi (race condition timing), fix (delay/altezza fissa), conferma (reload 3x stabile)"
      ]
    },
    {
      "id": 5,
      "prompt": "La griglia non supporta il drag-and-drop con 150 righe virtualizzate; il drag funziona finché non scorro, poi la preview appare nel posto sbagliato e il drop non registra la riga corretta.",
      "expected_output": "Diagnosi di mcp-grid-ui-debugger con focus su coordinate di mouse e scroll offset virtualizzato: ispezione del listener di drag, calcolo di offset, transform CSS su righe virtualizzate, verifica di pointer events, ipotesi di sincronizzazione coordinate con scroll, modifica mirata al calcolo di drag drop, verifica con reload pulito + interazione ripetuta su diverse righe.",
      "expectations": [
        "Riconosce il sintomo di drag rotto su virtualizzazione come pattern ricorrente, instrada a mcp-grid-ui-debugger",
        "Cattura baseline screenshot mostrando il drag fail (preview offset, drop target errato)",
        "Ispeziona il listener di drag: è registrato su parent o su singole righe? Come viene calcolata la posizione di mouse?",
        "Verifica il calcolo di offset di scroll virtualizzato: il listener tiene conto di scrollTop del container virtualizzato?",
        "Ispeziona il CSS delle righe: hanno transform: translateY()? Se sì, getBoundingClientRect() lo include?",
        "Formula ipotesi: 'Le coordinate di mouse non sincronizzate con scroll virtuale; il listener calcola la posizione relativa al viewport, non alla griglia scrollata.'",
        "Applica modifica: aggiungere il calcolo di scrollOffset al drag position: 'dragY = mouseY + virtualScrollContainer.scrollTop'",
        "Esegui reload completo della pagina",
        "Verifica il drag con reload pulito: prova drag su righe diverse, prova drag dopo scroll della griglia",
        "Prendi screenshot e verifica che preview e drop target siano corretti"
      ]
    }
  ]
}