docs: add frontend restyle guidance

This commit is contained in:
zv
2026-06-04 19:40:06 +02:00
parent f5bd719a0f
commit 2aaa93e03f

View File

@@ -60,6 +60,36 @@ Obsługa błędów:
- Fetchery w `lib/` rzucają `Error`, a komponenty prezentują czytelny stan błędu i retry.
- Projekt nie ma warstwy logowania aplikacyjnego. Nie dodawaj przypadkowych `console.log`.
## Zmiany frontendowe
To jest istniejąca aplikacja produktowa. Nie przebudowuj frontendu od zera, jeśli celem jest poprawa wyglądu. Zachowuj routing, przepływ danych, strukturę komponentów i logikę biznesową. Restyle powinien najpierw przechodzić przez globalne style, theme, tokeny, layout oraz komponenty współdzielone, a dopiero później przez pojedyncze widoki.
Docelowy kierunek wizualny:
- spokojny, praktyczny i produktowy;
- nowoczesny, ale bez efektów modnych na siłę;
- neutralna baza kolorystyczna i jeden konsekwentny kolor akcentu;
- czytelna hierarchia, przewidywalne odstępy i spójne karty;
- wygląd nudny w dobrym sensie: dopracowany, czytelny, bez dekoracyjnego szumu.
Unikaj:
- neonowych kolorów, fioletowo-cyjanowych gradientów i świecących cieni;
- losowych dekoracyjnych blobów, nadmiaru blurów i efektów bez funkcji;
- przesadnie dużych zaokrągleń oraz niespójnych radiusów między sekcjami;
- generycznych sekcji typu SaaS landing page;
- arbitralnych kolorów `bg-[#...]`, `text-[#...]`, `border-[#...]` w komponentach;
- lokalnych wyjątków stylistycznych, które powodują inny wygląd `/`, `/warnings`, `/hydro` i modali.
Przy zmianach UI:
- nie dodawaj nowych zależności bez wyraźnego powodu;
- nie zmieniaj UX ani przepływu interakcji, chyba że problem jest oczywisty i opiszesz go przed zmianą;
- preferuj tokeny Tailwind/theme, klasy użytkowe z `app/globals.css`, `Card`, `Button` i komponenty współdzielone;
- ogranicz zakres do najmniejszego zestawu plików potrzebnych do poprawy spójności;
- po zmianie sprawdź, czy nie pojawiły się hardcodowane kolory, nowe gradienty, neonowe akcenty, niespójne karty ani zmiany logiki biznesowej;
- sprawdź responsywność co najmniej mentalnie dla mobile, tablet i desktop, a przy większych zmianach uruchom aplikację lokalnie.
## Instrukcje dla agenta
- Przed zmianą przeczytaj pliki w obszarze funkcji i sprawdź `git status`.