docs: add frontend restyle guidance
This commit is contained in:
30
AGENTS.md
30
AGENTS.md
@@ -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`.
|
||||
|
||||
Reference in New Issue
Block a user