Zasada 02

Skeleton wierny treści

Skeleton loader ma sens tylko wtedy, gdy jego geometria jest identyczna z treścią, którą zapowiada. Najprostsza droga do wierności to jeden komponent, który renderuje ten sam layout w dwóch stanach, zamiast osobnego pliku ze zgadywanymi prostokątami.

List artykułów: szkielet i treść to ten sam layout

Przeładuj i patrz na krawędzie kart. Żadna nie drgnie, bo placeholdery dziedziczą typografię treści.

Maja Lis · 2 lip 2026

Aspect-ratio zamiast modlitwy o wymiary

Każdy element ładowany asynchronicznie może mieć zadeklarowany kształt, zanim przyjdą dane. Pokazuję, jak robić to systemowo, a nie przypadkiem od obrazka do obrazka.

Igor Wrona · 28 cze 2026

Jeden komponent, dwa stany

Osobny plik ze skeletonem rozjeżdża się z treścią po pierwszym refaktorze. Wspólny layout renderowany w dwóch stanach nie ma jak się rozjechać.

Nina Cios · 21 cze 2026

Line-clamp po obu stronach lustra

Skoro excerpt ma maksymalnie dwie linie, skeleton też ma dokładnie dwie. Typografia dyktuje wysokość placeholdera, nigdy odwrotnie.

Reguły

Skeleton i treść to jeden komponent i jeden layout, różni się tylko wypełnienie.
Placeholdery dziedziczą typografię, więc wysokość linii szkieletu równa się wysokości linii tekstu.
Linia szkieletu zajmuje dokładnie 1lh, a widoczny pasek jest niższy i wyśrodkowany, więc między liniami zostaje światło jak w prawdziwym tekście.
Liczba linii szkieletu odpowiada liczbie linii docelowej treści (line-clamp po obu stronach).
Podmiana szkieletu na treść nie zmienia ani jednego wymiaru kontenera.

Wzorzec w kodzie

Jeden komponent, w którym treść i szkielet dzielą layout

function ArticleCard({ article }: { article?: Article }) {
  const loading = !article;
  return (
    <article className="flex gap-4 p-5">
      <div
        className={
          loading
            ? "skeleton size-12 rounded-full"
            : "size-12 rounded-full bg-cover"
        }
      />
      <div className="min-w-0 flex-1">
        <h3 className="truncate text-lg font-semibold">
          {loading ? <SkeletonLine className="w-4/5" /> : article.title}
        </h3>
        <p className="mt-1 line-clamp-2 text-sm">
          {loading ? (
            <>
              <SkeletonLine className="w-full" />
              <SkeletonLine className="w-2/3" />
            </>
          ) : (
            article.excerpt
          )}
        </p>
      </div>
    </article>
  );
}

Linia szkieletu zajmuje dokładnie 1lh, a pasek jest niższy i wyśrodkowany

function SkeletonLine({ className = "" }: { className?: string }) {
  return (
    <span aria-hidden className="flex h-[1lh] items-center">
      <span className={`skeleton h-[0.75em] ${className}`} />
    </span>
  );
}

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ę „Skeleton wierny treści" z metodologii Liquid Design.

Szkielet to nie ozdoba. To ta sama karta, jeszcze bez danych, wierna co do piksela.

Wymagania:
- Skeleton i treść to jeden komponent i jeden layout, różni się tylko wypełnienie.
- Placeholdery dziedziczą typografię, więc wysokość linii szkieletu równa się wysokości linii tekstu.
- Linia szkieletu zajmuje dokładnie 1lh, a widoczny pasek jest niższy i wyśrodkowany, więc między liniami zostaje światło jak w prawdziwym tekście.
- Liczba linii szkieletu odpowiada liczbie linii docelowej treści (line-clamp po obu stronach).
- Podmiana szkieletu na treść nie zmienia ani jednego wymiaru kontenera.

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/skeleton