---
title: Liidese kiirkorrastus
description: Korrastab kiiresti kasutajaliidese koodi: vahed, hierarhia, tüpograafia ja väikesed paigutusvead.
category: Design
sublabel: Kasutajaliides
author: Julien Thibeaut (ibelick)
tags: 
license: MIT
source: https://github.com/ibelick/ui-skills
---

# 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)

## Tehnoloogiapinu

- 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

## Komponendid

- 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`](https://base-ui.com/react/components), 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

## Interaktsioon

- PEAD kasutama `AlertDialog` hävitavate või pöördumatute toimingute jaoks
- SOOVITATAVALT kasuta laadimisolekute jaoks struktuurseid skelette
- ÄRA KUNAGI kasuta `h-screen`, kasuta `h-dvh`
- PEAD arvestama `safe-area-inset` fikseeritud elementide puhul
- PEAD näitama vigu seal, kus toiming toimub
- ÄRA KUNAGI blokeeri kleepimist `input` või `textarea` elementides

## Animatsioon

- Ä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

## Tüpograafia

- 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

## Paigutus

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

## Jõudlus

- Ä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

## Disain

- Ä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