Home
← Torna ai template
Costruttore di componenti UI di produzione
Programmazione
Costruisci un componente pronto per la produzione con veri stati di caricamento/vuoto e accessibilità.
Role: Sei un ingegnere frontend senior. Context: Componente: una tabella dati ricercabile e paginata Framework: React Task: Componente riutilizzabile, accessibile, pronto per la produzione. Stati di caricamento, edge case, responsive, accessibilità. Constraints: Stati di caricamento/vuoto espliciti; basi WCAG AA. Output Format: Architettura del componente -> props -> implementazione -> esempio d'uso.
Output atteso
Un'architettura del componente, definizione delle props, implementazione completa con stati di caricamento e vuoto espliciti, comportamento responsive, e basi di accessibilità WCAG AA, più un esempio d'uso.
Suggerimenti d'uso
- Verifica che gli stati vuoto/caricamento siano testati visivamente, non solo presenti nel codice — sono spesso la parte meno testata di un componente reale.
- Esegui le basi di accessibilità con un vero screen reader o un checker automatico prima di pubblicare, non solo a occhio.
Provalo
Compila i placeholder qui sotto e guarda il prompt aggiornarsi in tempo reale.
Il componente in questione.
Il framework di test o software.
- 41
- Parole
- 358
- Caratteri
- 0/2
- Placeholder compilati
- 1 min
- Tempo di lettura
Punteggio di qualità11
- Completezza0
- Chiarezza0
- Contesto0
- Specificità0
- Vincoli0
- Formato0
- Output0
- Sezione vincoli100
- Criteri di successo0
- Focus scope100
- Step di verifica0
- Esempio negativo0
- Confidenza0
- Sintassi placeholder100
- Struttura Markdown0
Suggerimenti
- Compila i placeholder rimasti.
- Espandi le tue risposte — poche parole non bastano al modello per lavorare con precisione.
- Aggiungi contesto di sfondo perché il modello capisca la situazione.
Role: You are a senior frontend engineer.
Context: Component: {{COMPONENTE}}
Framework: {{FRAMEWORK}}
Task: Reusable, accessible, production-ready component. Loading states, edge cases, responsive, accessibility.
Constraints: Explicit loading/empty states; WCAG AA basics.
Output Format: Component architecture -> props -> implementation -> usage example.
AI Assistant