backend-ui-design
Twórz spójne interfejsy backoffice'u z gotową biblioteką komponentów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do projektowania i wdrażania produkcyjnych interfejsów administracyjnych przy użyciu biblioteki @open-mercato/ui. Wykorzystaj go do budowy stron admina, formularzy CRUD, tabel danych, stron szczegółów i innych komponentów backoffice'u. Zapewnia wizualną spójność i ujednolicone wzorce UX w całej aplikacji, eliminując potrzebę tworzenia niestandardowych rozwiązań.
Jak używać
Zainstaluj skill backend-ui-design z repozytorium open-mercato i dodaj bibliotekę @open-mercato/ui do zależności projektu.
Zapoznaj się z dokumentacją komponentów dostępną w pliku references/ui-components.md oraz specyfikacją SPEC-001-2026-01-21-ui-reusable-components.md, aby poznać dostępne komponenty i ich API.
Strukturyzuj każdą stronę backoffice'u zgodnie z wzorem: Page → PageHeader (z tytułem, akcjami, breadcrumbem) → PageBody (zawartość). Importuj komponenty z @open-mercato/ui/backend/Page i AppShell.
Buduj interfejsy CRUD, tabele danych, formularze i strony szczegółów wyłącznie z istniejących komponentów biblioteki — nigdy nie twórz niestandardowych implementacji, aby zachować spójność wizualną.
Zastosuj zasady projektowania: priorytet dla użyteczności i produktywności, gęstość informacji dla użytkowników admina, obsługa nawigacji klawiaturą (Cmd/Ctrl+Enter dla akcji głównych, Escape do anulowania), jasna hierarchia treści.
Testuj interfejs pod kątem spójności z innymi modułami aplikacji i upewnij się, że wszystkie komponenty zachowują się zgodnie z dokumentacją biblioteki.