Õige teegi valimine

Esialgne vastus

Kui see oskus käivitatakse ilma konkreetse küsimuseta, vasta ainult:

Olen valmis valima sinu ülesande jaoks õige teegi; minu valikud tulevad Emil Kowalski kureeritud nimekirjast.

Ära anna muud teavet, kuni kasutaja esitab küsimuse.

Otsinguoskus. Kui käivitatakse ülesandega („vajan toast’e“, „mida peaksin lohistamiseks kasutama?“), sobita ülesanne alloleva kureeritud nimekirjaga ja soovita teeki. Need on teadlikud, maitsepõhised valikud — ära asenda nimekirjaväliste alternatiividega, kui kasutaja seda ei küsi või ülesanne tõesti ei ole kaetud.

Kuidas seda kasutada

1. Tuvasta ülesanne, mitte teek, mida kasutaja nimetas. „Vajan rippmenüü näitamist“ on UI-primitiivide ülesanne (base-ui), isegi kui nad küsisid millegi muu kohta.
2. Kontrolli, mis on juba installitud. Vaata esmalt package.json-i. Kui projekt juba kasutab nimekirjas olevat teeki, kasuta seda. Kui kasutab konkurenti (nt react-window Virtuoso asemel), märgi soovitus ära, aga ära vaheta sõltuvust ilma küsimata.
3. Soovita üht teeki, ütle ühe lausega, milleks see on, ning installi/ühenda see, kui see on päringu osa. Ära esita valikumenüüd, kui nimekirjas on selge vastus.
4. Kui ülesanne ei ole nimekirjas kaetud, ütle seda selgelt ja soovita oma teadmiste põhjal — aga tee selgeks, et oled kureeritud nimekirjast väljas.

Nimekiri

UI komponendid ja primitiivid

Liikumine ja visuaalid

Kasuta motion’it, kui vajad vedrusid, paigutuse animatsioone, väljumisanimaatsioone või žestipõhiseid väärtusi. Lihtne hover või fade seda ei vaja — seal on õige tööriist tavalised CSS-üleminekud.

Diagrammid

Jaotus: kui andmepunktid saabuvad otseülekandes ja diagramm kerib ajaga, kasuta Liveline’i. Kõik muu on recharts.

Interaktsioon ja jõudlus

Olek ja stiilimine

Stiilimise jaotus: clsx juhuslike tingimuslike klasside jaoks; cva, kui komponendil on päris variandid (suurus, intent, olek), mis väärivad tüübitud API-d. Need sobivad kokku — cva kasutab sisemiselt clsx-stiilis sisendeid.

Levinud valestimõistmised, mida tabada

• Käsitööna või modaalteegiga ehitatud toast’id → Sonner on just selleks olemas.
• <div>-põhine rippmenüü/dialog käsitsi fookusehaldusega → base-ui, mis haldab ligipääsetavust, fookuse lõksu ja sulgemist.
• Numbri animeerimine teksti uuesti renderdades → NumberFlow tegeleb numbrite üleminekutega õigesti.
• 1000+ realise loendi otse renderdamine → Virtuoso enne lehekülgede häkkimist.
• useState-komponendi kohta props’ide võrk jagatud oleku jaoks → zustand.
• Template-literal className ternarid kolme tingimuse sügavusel → clsx (või cva, kui see on variandikujuline).