Modern Web Guidance: come far scrivere ai coding agent codice web davvero “moderno”

I coding agent sono diventati impressionanti: chiedi una funzionalità e, nella maggior parte dei casi, “qualcosa” funzionante arriva. Il problema è che, nel web, funzionante non è sinonimo di ben fatto. Quando si passa una feature generata dall’AI sotto gli occhi di un frontend esperto, emergono quasi sempre gli stessi difetti: codice più lungo del necessario, scelte tecniche legacy, performance mediocri (soprattutto su mobile), e attenzione insufficiente per accessibilità e sicurezza.

La causa non è misteriosa: i modelli imparano da una quantità enorme di codice storico, tutorial vecchi e risposte d’archivio. Risultato: davanti a un requisito moderno tendono a “ripescare” soluzioni datate, anche quando la piattaforma web offre già strumenti migliori.

Il problema: agent capaci, ma spesso con pattern legacy

Ecco tre esempi tipici che si vedono spesso nel codice generato automaticamente:

• Dialog e overlay: per una modale vengono importate librerie JavaScript pesanti o costruiti workaround complessi, invece di usare elementi e API native come dialog o le soluzioni moderne per popover.
• Animazioni legate allo scroll: invece di adottare tecniche pensate per essere fluide, si finisce con listener su scroll e calcoli in JavaScript, che su dispositivi reali diventano facilmente janky.
• Menu e UI “semplici”: dropdown o componenti basilari vengono risolti con JavaScript legacy anche quando potrebbero essere gestiti con CSS in modo più robusto e accessibile.

Il difetto più costoso, però, è un altro: spesso il codice viene generato senza chiedere o considerare quali browser debbano essere supportati. Senza un “target” esplicito, le scelte oscillano tra due estremi: o si usa la soluzione più vecchia “per sicurezza”, o si adotta una feature recente senza fallback.

Cos’è Modern Web Guidance e cosa cambia davvero

Modern Web Guidance (MWG) è pensata per colmare proprio questo gap: inserire nel workflow dell’agente competenza di piattaforma web, best practice e dati di compatibilità browser, in modo che le soluzioni proposte:

• privilegino feature native moderne invece di librerie e hack;
• rispettino un baseline di supporto (cioè ciò che è effettivamente disponibile nei browser target);
• includano fallback e feature detection quando serve;
• incorporino accessibilità come requisito trasversale, non come rifinitura finale.

In pratica, MWG funziona come un insieme di “skill” richiamabili dagli agent: quando l’agente deve implementare o rifattorizzare una parte, pesca indicazioni mirate da una base di guide.

Guide focalizzate sui punti caldi del frontend moderno

Le aree coperte toccano i temi dove l’AI sbaglia più facilmente o dove la piattaforma ha fatto grandi passi avanti:

• CSS moderno: sistemi di layout e responsive design evoluti (es. subgrid, container queries).
• Performance e Core Web Vitals: ottimizzazioni che impattano davvero sul caricamento e sull’interattività (es. fetchpriority, speculation rules).
• UX “nativa” sul web: transizioni e animazioni che sfruttano capacità recenti della piattaforma (es. view transitions, scroll-driven animations).
• Accessibilità: pratiche corrette integrate nel design delle soluzioni.

Un aspetto importante: l’approccio è framework-agnostic. Che tu stia lavorando con React, Web Components o altro, l’obiettivo è spingere verso soluzioni di piattaforma e pattern solidi, non verso “ricette” dipendenti da una libreria.

Un esempio concreto: navigation drawer su mobile

Un caso d’uso perfetto per misurare la differenza è un navigation drawer mobile: apri col tasto menu, chiudi toccando fuori o con uno swipe.

Con indicazioni moderne, l’implementazione tende a:

• sfruttare CSS scroll snap per gestire lo swipe-to-close in modo naturale;
• usare scroll-driven animations per effetti come il fade del backdrop, evitando listener su scroll;
• applicare feature detection e prevedere fallback quando alcune feature non sono “widely available” nel baseline scelto.

Senza una guida di questo tipo, è facile finire con:

• centinaia di righe di JavaScript per pointer/touch events;
• logica custom per fisica e snapping;
• animazioni e fade gestiti in JS;
• un risultato che su telefono reale può risultare lento e scattoso.

Entrambe le versioni “funzionano”, ma una si comporta come un’app curata, l’altra no. La differenza, quasi sempre, è l’aderenza alle API e ai pattern per cui la piattaforma web è stata progettata.

Baseline e compatibilità: il dettaglio che evita metà dei problemi

Uno dei contributi più pratici di MWG è l’attenzione alla baseline target.

• Se il progetto ha un target definito, l’agente riceve suggerimenti che stanno dentro quel perimetro.
• Se non è definito, si assume un default orientato a ciò che è considerato ampiamente disponibile.

Questo riduce due errori classici:

1. Soluzioni troppo conservative (codice vecchio “perché sì”).
2. Soluzioni troppo ottimistiche (feature moderne senza rete di sicurezza).

Quanto migliora? Non perfezione, ma un salto misurabile

MWG non promette magia: l’output va sempre validato. Però, a livello di qualità media, la differenza è misurabile.

In test automatizzati basati su asserzioni di best practice web, l’adozione della guida porta tipicamente a un incremento importante del tasso di “pass” rispetto a un agente lasciato senza orientamento.

Implicazione pratica per chi fa frontend

Il punto non è “usare più AI”, ma usarla meglio:

• Se lasci un agent libero di scegliere, tenderà a risolvere con ciò che ha visto più spesso nella sua memoria statistica (spesso legacy).
• Se gli dai vincoli e conoscenza di piattaforma, ottieni implementazioni più corte, più veloci, più accessibili e più allineate alle capacità dei browser moderni.

Sintesi

Modern Web Guidance è un modo concreto per spostare il baricentro dell’AI coding dal “copio pattern del passato” al “uso la piattaforma web per ciò che offre oggi”. Il risultato non è solo codice più elegante: è un’esperienza utente migliore, meno regressioni cross-browser, e un percorso più breve dal prototipo a una feature davvero pronta per la produzione.