Grafik · FREE

Polish pass UI

Checklist 2 h na ekran, który już działa: spacing, stany, favicon, OG, empty state. Nie przebudowuje layoutu. Przed demo albo launchem, po recenzji smaku, nie w trakcie budowania.

reviewed:

Jak zainstalować

  1. Uzupełnij pola poniżej (albo zostaw nazwy zmiennych i dopisz w czacie). Wartości z Skill creatora na liście podstawiają się same.
  2. Kopiuj, potem wklej w Claude.ai (instrukcje projektu) albo ChatGPT (Custom Instructions).
  3. Albo pobierz SKILL.md i połóż w folderze skilli Claude Code.
SKILL
Ekrany (URL, lista tras, screenshoty): [EKRANY].
Timer (np. 2 h): [TIMER].
Poza zakresem: [POZA_ZAKRESEM].

Jeśli [EKRANY] puste albo nadal nazwa zmiennej - dopytaj i STOP.
Puste [TIMER] = 2 h. Puste [POZA_ZAKRESEM] = nic wyłączone.
Ekran z [POZA_ZAKRESEM] pomijasz w checklistie i w ticketach.

Sąsiad: hierarchia i slop = `recenzja-smaku-ui` (zrób ją **przed** tym skilliem). Klawiatura, kontrast, alt = `recenzja-a11y-ui`. Kierunki od zera = `grafik-startowy`.

Ten skill nie zmienia siatki, palety, krojów ani architektury informacji. Jeśli layout jest zły - STOP i odeślij do `recenzja-smaku-ui`. Tu tylko wierzch: spójność, stany, meta.

Nie poleruj w trakcie budowania. Najpierw layout stoi, potem timer, potem stop.

## Artefakt

1. Jedna linia zakresu: ekrany + timer + co wyłączone.
2. Checklist `pass` / `fail` / `n/d` (n/d tylko gdy nie ma takiej powierzchni, np. brak formularza).
3. Do **10** ticketów z faili. Format: `T# | ekran | tytuł (max 6 słów) | expected (1 zdanie)`.
4. Jeśli faili > 10: top 10 wg szkody dla demo (meta i stany przed cieniem karty); reszta w `kolejka` (tylko tytuły).
5. Zero ticketów "przerób hero". Zero nowych hexów. Zero "skoro jesteśmy, zróbmy dark mode".

Nie wymyślaj 10 ticketów, gdy faili jest 4.

## Checklist (ta kolejność, od góry)

**A. Siatka wierzchu (nie layout)**

- A1. Odstępy wielokrotnością 8 (8/16/24/32/40/64). Fail: 7+11+13, padding "aż będzie równo".
- A2. Promień z jednej skali (max 3 tokeny: kontrolka / karta / pigułka). Fail: 4 i 11 i 22 i 999 na jednym ekranie.
- A3. Obrys 1 token (1 px albo 0). Fail: karta 1 px, modal 2 px, input 0,5 px.
- A4. Wyrównanie do tej samej osi co reszta strony. Fail: jedna karta ucieka o 3 px. Nie wolno "wyśrodkować wszystkiego od nowa".

**B. Stany**

- B1. Hover **tylko** na klikalnym. Fail: hover na `<div>` z tekstem, karta bez linku podnosi cień, cały wiersz tabeli bez akcji.
- B2. Focus widoczny na tym, co Tab łapie. Tu tylko "jest pierścień / nie ma". Kontrast pierścienia licz w `recenzja-a11y-ui`.
- B3. Empty: lista / inbox / wyszukiwarka / koszyk bez danych ma stan (1 zdanie + 1 CTA albo jego brak uzasadniony). Fail: biała dziura albo "undefined".
- B4. Error: formularz i fetch mają komunikat przy polu albo przy sekcji, nie tylko toast.
- B5. Loading: przycisk ma stan busy (disabled + etykieta albo spinner z nazwą). Szkielet albo tekst "ładuję", nie puste mignięcie.
- B6. Disabled wygląda inaczej niż default i nie udaje klikalnego hoverem.

**C. Meta-wizual**

- C1. Favicon (ico/svg) - nowa karta przeglądarki nie pokazuje pustej kartki.
- C2. Tytuł karty (`document.title`) - unikalny, nie "React App" / "Vite" / "Lovable App" / "Untitled".
- C3. OG image - wklejka w Slack/iMessage ma kadr, nie losowy wycinek. Wymiar 1200x630 albo jawny brak z ticketem.
- C4. 404 - własna strona, nie default hosta. 1 zdanie + droga home.
- C5. 500 / offline jeśli apka - choćby jedna strona; `n/d` na statycznym landingu.

**D. Demo-hygiene (nadal nie redesign)**

- D1. 375 px szerokości: zero poziomego scrolla na treść, tap nie gubi CTA. Overflow = ticket, nie nowy breakpoint system.
- D2. Stopka: każdy link otwiera to, co etykieta. Fail: `#` i "soon".
- D3. Formularz: walidacja widoczna po błędzie, przycisk nie "nic nie robi".
- D4. Hover-preview i tooltip nie ucinają się w overflow hidden (wystaje albo się zwija - ticket).
- D5. Favicon + OG + title spójne z marką (nazwa, nie nowy znak). Brak brandbooka nie uprawnia do wymyślenia logo.

## Jak ciąć do 2 h

Kolejka w timerze: C (meta, 20 min) -> B (stany, 50 min) -> A (siatka, 30 min) -> D (reszta).
Po [TIMER] przestajesz proponować. Zostaw `nie weszło do okna: [list]`.
Docisk po timerze = odwlekanie; nie dopisujesz T11 "bo jeszcze cień".

## Zakaz

- nowa paleta, nowy krój, nowy układ sekcji
- "wyrównaj karty do tej samej wysokości" jako redesign trzech feature-kafelków (to fail smaku w `recenzja-smaku-ui`, nie polish)
- animacje ozdobne
- alt "wszędzie" i certyfikat WCAG (to `recenzja-a11y-ui`)
- zmyślone OG "wygeneruj mi obraz" bez briefu - ticket: "brak OG 1200x630", nie prompt 8k

Na końcu jedna linia: `Polish, nie przebudowa.` Dywiz "-".

Zanim wkleisz

Skill vs zły prompt

Zły prompt

Przebuduj cały layout na wow, zmień siatkę i paletę.

Skill

Ekrany (URL, lista tras, screenshoty): [EKRANY].
Timer (np. 2 h): [TIMER].
Poza zakresem: [POZA_ZAKRESEM].

Jeśli [EKRANY] puste albo nadal nazwa zmiennej - dopytaj i STOP.
Puste [TIMER] = 2 h. Puste [POZA_ZAKRESEM] = nic wyłączone.
Ekran z [POZA_ZAKRESEM] pomijasz w checklistie i w ticketach.

Użyj z tym narzędziem

Lekcja: claude-start-05-claude-dla-grafika

Pytania

Jak użyć skilla "Polish pass UI" w Claude?

Uzupełnij pola w nawiasach (albo weź je z profilu Skill creator na /skille), kliknij Kopiuj i wklej treść do instrukcji projektu w Claude.ai. W Claude Code kliknij Pobierz SKILL.md i połóż plik w folderze skilli. Skill działa też w ChatGPT (Custom Instructions). Nie chowa się za paywallem: kopia jest darmowa.

Kiedy tego skilla NIE używać?

Nie w trakcie budowania. Nie do redesignu (to recenzja-smaku-ui albo grafik-startowy). Nie zamiast recenzja-a11y-ui.