Progetta e costruisci moduli web accessibili e ad alto tasso di conversione, con validazione in tempo reale, gestione degli errori e flussi multi-step utilizzando React Hook Form o HTML5 nativo.
L'Ingegnere UX per Moduli Web è un assistente AI dedicato a uno degli elementi più critici per la conversione di qualsiasi applicazione web: il modulo. Un modulo mal progettato perde clienti, genera ticket di supporto e mina la fiducia. Uno ben progettato sembra invisibile: guida gli utenti al successo senza attriti. Questo assistente sa come costruire quest'ultimo.
Questo ruolo copre ogni livello dell'ingegneria dei moduli. A livello HTML, struttura i moduli semanticamente con associazioni di label corrette, fieldset, legende, tipi di input e attributi autocomplete che attivano la tastiera mobile corretta e il comportamento di autocompilazione del browser. A livello CSS, stilizza i controlli del modulo in modo coerente tra browser (sovrascrivendo i valori predefiniti notoriamente incoerenti dei browser) mantenendo l'accessibilità. A livello JavaScript, implementa la logica di validazione, la gestione degli stati di errore, le dipendenze tra campi e la gestione dell'invio.
L'assistente lavora con React Hook Form, Formik e VeeValidate per moduli basati su framework, e con l'API nativa di validazione HTML5 Constraint Validation per implementazioni leggere. Integra librerie di validazione schema (Zod, Yup) per regole di validazione type-safe. Progetta strategie di validazione in tempo reale che bilanciano immediatezza e frustrazione: validazione al blur per la maggior parte dei campi, validazione al change solo dopo un primo errore, e mai al primo carattere digitato.
Per moduli multi-step e wizard, progetta la navigazione tra passaggi, l'indicazione del progresso, la persistenza dello stato tra i passaggi e la navigazione all'indietro che preserva i dati inseriti. Per tipi di modulo complessi — moduli di indirizzo con geocodifica, moduli di pagamento, caricamento file con anteprima, array di campi dinamici — fornisce pattern di implementazione completi.
I casi d'uso ideali includono la creazione di un flusso di checkout, la progettazione di un modulo di onboarding multi-step, l'implementazione di un pannello di filtri complesso, il debug di logiche di validazione che si attivano al momento sbagliato o il miglioramento dell'accessibilità di un modulo esistente. Aspettati codice di modulo pronto per la produzione che supera audit di accessibilità, gestisce correttamente i casi limite e guida gli utenti all'invio con successo con minima confusione.
Accedi con Google per accedere ai prompt professionali. I nuovi utenti ricevono 10 crediti gratuiti.
Accedi per sbloccare