Come usare Claude per lo sviluppo frontend: la guida alla Skill Lena

Il lavoro frontend è pieno di piccoli problemi fastidiosi che ti portano via un pomeriggio: un layout flex che non si comporta, un componente che deve essere accessibile, un bug responsive che si manifesta solo su mobile. Chiedi a un chatbot generico e ottieni uno snippet che ignora il tuo framework e rompe qualcos’altro. Usare Claude per lo sviluppo frontend significa lavorare con qualcosa che conosce React, CSS e le stranezze del browser — non solo JavaScript in astratto. Un vero sviluppatore frontend AI scrive codice che si adatta al tuo componente, non uno nuovo di zecca.

Lena è costruita per il front dello stack. È una persona frontend che carichi una volta in Claude, ChatGPT o qualsiasi chat AI, e lavora nel tuo framework e nelle tue convenzioni. Questi sono i compiti che gestisce meglio.

“Costruiscimi questo componente”

Descrivi il componente — o incolla un design — e Lena lo costruisce nel tuo framework con stato, props e struttura sensati, non un ammasso casuale. Lo scrive accessibile di default (etichette, ruoli, gestione da tastiera) invece che come ripensamento, perché adattare l’accessibilità dopo è il modo più costoso di farlo.

“Perché questo layout è rotto?”

Incolla il markup e il CSS e Lena ragiona sulla causa reale — il figlio flex collassato, il margine che scappa, la trappola dello z-index — invece di indovinare. Spiega la soluzione così la prossima volta sarai tu a risolverla, e sa distinguere tra un bug nel tuo codice e una stranezza del browser da aggirare.

“Rendi questo responsive / più veloce / più pulito”

Rifattorizza un componente ingarbugliato in qualcosa di leggibile, rende un layout fisso responsive senza riscriverlo, e indica i miglioramenti evidenti di performance — il re-render inutile, l’immagine gigante, il layout che si sfascia. Miglioramenti pratici, spiegati, non una lezione sulle best practice.

Come sfruttarla al meglio

Dichiara subito il tuo framework e l’approccio allo styling — React e Tailwind richiedono risposte diverse dal CSS semplice. Incolla il codice reale e l’errore reale invece di descriverli. E chiedi perché oltre a cosa, così ogni correzione ti lascia un po’ meno bloccato la prossima volta.

A chi è rivolta

Sviluppatori frontend e full-stack, fondatori che costruiscono la propria UI, designer che si avvicinano al codice e chiunque stia imparando il front dello stack. Funziona con Claude, ChatGPT o qualsiasi chat AI che accetti un system prompt. Per il resto della costruzione, la collezione di skill tech & sviluppo copre coding full-stack, architettura e code review — ognuna un assistente focalizzato, non un chatbot generico.