backend-ui-design
Design and implement consistent, production-grade backend/backoffice interfaces using the @open-mercato/ui component library. Use this skill when building admin pages, CRUD interfaces, data tables, forms, detail pages, or any backoffice UI components. Ensures visual consistency
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Design and implement consistent, production-grade backend/backoffice interfaces using the @open-mercato/ui component library. Use this skill when building admin pages, CRUD interfaces, data tables, forms, detail pages, or any backoffice UI components. Ensures visual consistency and UX patterns across all application modules.
How to use
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.