Baastaseme UI

Jõustab arvamusliku UI-baastaseme, et vältida tehisaru genereeritud liidese lohakust.

Kuidas kasutada

/baseline-ui Rakenda need piirangud selle vestluse mis tahes UI-tööle.
/baseline-ui <file> Vaata fail üle kõigi alltoodud piirangute järgi ja väljasta:
rikkumised (tsiteeri täpset rida/katkendit)
miks see oluline on (1 lühike lause)
konkreetne parandus (koodi tasemel soovitus)

PEAD kasutama Tailwind CSS vaikeväärtusi, kui kohandatud väärtused juba ei eksisteeri või neid pole selgelt palutud
PEAD kasutama motion/react (varem framer-motion), kui vajalik on JavaScripti animatsioon
SOOVITATAVALT kasuta tw-animate-css sisenemis- ja mikroanimatsioonide jaoks Tailwind CSS-is
PEAD kasutama cn abifunktsiooni (clsx + tailwind-merge) klassiloogika jaoks

PEAD kasutama ligipääsetavaid komponendialgvorme kõige puhul, millel on klaviatuuri- või fookuskäitumine (Base UI, React Aria, Radix)
PEAD kasutama esmalt projekti olemasolevaid komponendialgvorme
ÄRA KUNAGI sega algvormisüsteeme sama interaktsioonipinna sees
SOOVITATAVALT eelista uute algvormide jaoks Base UI, kui see tehnoloogiapinuga sobib
PEAD lisama aria-label ainult ikooniga nuppudele
ÄRA KUNAGI ehita klaviatuuri- või fookuskäitumist käsitsi uuesti, kui seda pole selgelt palutud

ÄRA KUNAGI lisa animatsiooni, kui seda pole selgelt palutud
PEAD animeerima ainult kompositori omadusi (transform, opacity)
ÄRA KUNAGI animeeri paigutusomadusi (width, height, top, left, margin, padding)
SOOVITATAVALT väldi joonistusomaduste (background, color) animeerimist, välja arvatud väikeste, lokaalsete UI-elementide puhul (tekst, ikoonid)
SOOVITATAVALT kasuta sisenemisel ease-out
ÄRA KUNAGI ületa interaktsiooni tagasiside puhul 200ms
PEAD peatama korduvad animatsioonid, kui need on ekraanist väljas
SOOVITATAVALT arvesta prefers-reduced-motion
ÄRA KUNAGI võta kasutusele kohandatud pehmenduskõveraid, kui seda pole selgelt palutud
SOOVITATAVALT väldi suurte piltide või täisekraanipindade animeerimist

PEAD kasutama text-balance pealkirjade ja text-pretty kehateksti/lõikude jaoks
PEAD kasutama tabular-nums andmete jaoks
SOOVITATAVALT kasuta truncate või line-clamp tiheda UI jaoks
ÄRA KUNAGI muuda letter-spacing (tracking-*), kui seda pole selgelt palutud

PEAD kasutama fikseeritud z-index skaalat (mitte suvalist z-*)
SOOVITATAVALT kasuta ruudukujuliste elementide jaoks size-* w-* + h-* asemel

ÄRA KUNAGI animeeri suuri blur() või backdrop-filter pindu
ÄRA KUNAGI rakenda will-change väljaspool aktiivset animatsiooni
ÄRA KUNAGI kasuta useEffect millegi jaoks, mida saab väljendada renderdamisloogikana

ÄRA KUNAGI kasuta gradiente, kui seda pole selgelt palutud
ÄRA KUNAGI kasuta lillasid ega mitmevärvilisi gradiente
ÄRA KUNAGI kasuta helendusefekte peamiste tegutsemisvihjetena
SOOVITATAVALT kasuta Tailwind CSS vaikevarjuskaalat, kui pole selgelt teisiti palutud
PEAD andma tühjadele olekutele ühe selge järgmise toimingu
SOOVITATAVALT piira aktsentvärvi kasutust ühega vaate kohta
SOOVITATAVALT kasuta olemasolevaid teema või Tailwind CSS värvimärke enne uute kasutuselevõttu