Zasada 01

Nic nie skacze

Przesuwający się interfejs to złamana obietnica: użytkownik celuje w przycisk, a trafia w reklamę. Każdy element, który pojawia się asynchronicznie, taki jak obraz, baner czy wynik zapytania, musi mieć zarezerwowane wymiary, zanim dotrze do przeglądarki.

Ta sama strona, dwa charaktery

Baner i ilustracja docierają z opóźnieniem. Po lewej spychają treść, po prawej wchodzą w zarezerwowane miejsce.

✕ Bez rezerwacji

Baner promocyjny 728×160

Ten akapit czytasz w trakcie ładowania strony. W wersji bez rezerwacji miejsca każdy element, który dociera z opóźnieniem, zepchnie go w dół dokładnie w momencie, w którym sięgasz po przycisk poniżej.

Ilustracja artykułu 1600×700

✓ Z rezerwacją

Baner promocyjny 728×160

Ilustracja artykułu 1600×700

Reguły

Każdy obraz i osadzenie ma zadeklarowane wymiary lub aspect-ratio.
Kontener na dane asynchroniczne istnieje od pierwszego renderu i trzyma wysokość.
Treść nigdy nie spycha w dół tego, co użytkownik właśnie czyta lub w co celuje.
Cumulative Layout Shift traktujemy jak błąd krytyczny, nie jak metrykę do optymalizacji.

Wzorzec w kodzie

Container trzyma kształt niezależnie od danych

function Cover({ url }: { url?: string }) {
  return (
    <div className="aspect-video overflow-hidden rounded-lg">
      {url ? (
        <img
          src={url}
          alt=""
          width={1600}
          height={900}
          className="size-full object-cover"
        />
      ) : (
        <div className="skeleton size-full" />
      )}
    </div>
  );
}

Antywzorzec vs wzorzec: warunkowy mount kontra warunkowe wypełnienie

{reklama && <Banner dane={reklama} />}

<div className="aspect-[16/3.5]">
  {reklama ? <Banner dane={reklama} /> : <div className="skeleton size-full" />}
</div>

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zastosuj w moim projekcie zasadę „Nic nie skacze" z metodologii Liquid Design.

Layout jest umową. Treść, która dociera później, wchodzi w miejsce, które na nią czekało.

Wymagania:
- Każdy obraz i osadzenie ma zadeklarowane wymiary lub aspect-ratio.
- Kontener na dane asynchroniczne istnieje od pierwszego renderu i trzyma wysokość.
- Treść nigdy nie spycha w dół tego, co użytkownik właśnie czyta lub w co celuje.
- Cumulative Layout Shift traktujemy jak błąd krytyczny, nie jak metrykę do optymalizacji.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/zasady/stabilnosc