UI

@skribly/ui to wspólny wygląd Skribly: jeden zestaw tokenów projektowych, zwykły CSS dla dowolnej strony, komponenty React dla aplikacji i site kit stron Skribly.

Późniejsza zmiana frameworka wymienia tylko górną warstwę. React Aria zapewnia obsługę klawiatury, fokusu i czytników ekranu; wygląd pozostaje Skribly.

Z Tailwind 4:

@import "tailwindcss";
@import "@skribly/ui/styles.css";

import { Button, Logo } from '@skribly/ui'

Na stronie bez Tailwind i bez React:

@import "@skribly/ui/plain.css";

<button class="sk-button sk-button--outline">Cancel</button>

Aplikacja dodaje własny link do czcionek: Inter dla interfejsu, JetBrains Mono dla kodu, Bricolage Grotesque dla nagłówków głównych (display).

Ustaw data-theme na light, dark lub contrast na elemencie głównym (root) albo na dowolnym elemencie, aby nadać motyw tylko tej części strony. Bez atrybutu na elemencie głównym decyduje system operacyjny, w tym prefers-contrast: more.

data-density="compact" daje mniejsze kontrolki i tekst aplikacji Skribly Agent. Klasy a11y-reduce-motion i a11y-strong-focus na elemencie głównym odpowiadają ustawieniom czytelności w aplikacjach, a prefers-reduced-motion działa bez klasy.

Ta witryna stosuje te same reguły: wybierz Dzień, Noc, Wysoki kontrast lub Jak w systemie w przełączniku motywu w nagłówku. Wybór obowiązuje na każdej witrynie Skribly.

Bursztynowy jest jedynym akcentem. Zieleń oznacza wyłącznie sukces, a czerwień wyłącznie działania destrukcyjne. --sk-accent-text to akcent dla tekstu, bo zwykły akcent nie spełnia 4,5:1 jako kolor tekstu na niektórych powierzchniach. Testy pakietu sprawdzają kontrast każdej pary tekstu i kontrolki względem progów WCAG we wszystkich trzech motywach.

Każda klasa leży w warstwie kaskady components i czyta wyłącznie tokeny --sk-*, więc motywy, data-density i ustawienia dostępności działają tak jak w aplikacjach, a własny CSS strony wygrywa bez przepychanek o specyficzność. Każda klasa ma stany hover, focus i disabled tam, gdzie mają sens, a resztę stanów czyta z atrybutów ARIA, takich jak aria-current, aria-selected, aria-expanded, aria-sort i aria-invalid. Komunikaty łączą kolor ze znakiem (glifem).

To znaczniki HTML niosą znaczenie, a klasy tylko wygląd: checkbox to <label> wokół swojego <input>, błąd jest powiązany przez aria-describedby, a tabela szersza niż ekran leży w .sk-table-wrap z tabindex="0", role="region" i nazwą.

Site kit daje skribly.pl, docs.skribly.pl i ui.skribly.pl jedną technologię, Astro 7, i jeden zestaw części, żeby wyglądały i działały jak jedna całość. Ta witryna dokumentacji już na nim działa; skribly.pl i ui.skribly.pl na niego przechodzą.

• Jeden nagłówek z przełącznikiem produktów Skribly, który pokazuje logo każdego produktu: Skribly, Skribly Agent, Skribly Tracker, agent-skills, Skribly Docs i Skribly UI.
• Jeden przełącznik motywu: dzień, noc, wysoki kontrast albo wybór systemu. Wybór jest zapamiętany w cookie sk-theme na .skribly.pl, więc obowiązuje na wszystkich trzech witrynach.
• Jeden panel dostępności: rozmiar tekstu, skala szarości, wysoki kontrast, odwrócone kolory, jasne tło, podkreślone linki, czytelna czcionka, zatrzymane animacje i wyraźny fokus, zapamiętywane tak samo w cookie sk-a11y.
• Jedno okno wyszukiwania oparte na Pagefind, otwierane przez Ctrl+K, ⌘+K lub /.
• Jedna stopka, link „przejdź do treści”, ścieżka nawigacji (breadcrumbs), strona 404 i jeden wzorzec tytułu: <page> | Skribly <site>.
• Ten sam opis meta, adres kanoniczny, karta Open Graph i dane strukturalne na każdej stronie.
• Ruch, który ustępuje, gdy prosisz o mniej: strony zmieniają się przez view transition, nagłówki wsuwają się, a sekcje podnoszą w pole widzenia; wszystko to wyłącza ograniczenie ruchu w systemie albo Zatrzymaj animacje w panelu.

Witryny nie instalują prywatnego repozytorium. Każda trzyma kopię w vendor/skribly-ui, zapisywaną jednym poleceniem w repozytorium UI, a testy zawodzą, gdy kopia zostanie zmieniona ręcznie.

Komponenty są podzielone na grupy, a każda grupa ma też własny punkt wejścia, na przykład @skribly/ui/forms. Na 8 listopada 2026 główna gałąź ma:

Pakiet nie ma jeszcze wydania z tagiem, a żadna aplikacja jeszcze tych komponentów nie używa.

Każdy komponent trzyma się tych samych reguł: tylko tokeny semantyczne, więc wygląda dobrze w każdym motywie; żadnego wbudowanego tekstu, więc każda etykieta, także aria-label, pochodzi z plików językowych aplikacji; znaczenie nigdy nie jest niesione samym kolorem; a testy zawierają kontrolę axe każdego demo w każdym motywie.

• skribly.pl i ui.skribly.pl na site kicie.
• Wydanie 0.1.0 z tagiem, a potem przejście Skribly Agent i Skribly Tracker na jego komponenty.