shadcn-vue-admin

Skill do pracy z repozytorium shadcn-vue-admin — panelem administracyjnym opartym na Vue 3, Vite i TypeScript. Pozwala na modyfikacje interfejsu, dodawanie stron, zarządzanie routingiem, konfigurację autentykacji i motywów, integrację komponentów oraz pracę z tabelami danych i walidacją formularzy. Wykorzystuje shadcn-vue, Tailwind CSS, Pinię do zarządzania stanem, Vue Router do nawigacji, i18n do wielojęzyczności oraz TanStack Query do pobierania danych.

1. Zainstaluj umiejętność w swoim środowisku agenta, wskazując repozytorium Whbbit1999/shadcn-vue-admin jako źródło. Upewnij się, że masz zainstalowany pnpm jako menedżer pakietów.

2. Przed rozpoczęciem pracy zapoznaj się ze strukturą projektu: routing znajduje się w src/router/, strony i layouty w src/pages/ i src/layouts/, komponenty w src/components/, stan aplikacji w src/stores/, a narzędzia pomocnicze w src/utils/ i src/lib/.

3. Gdy chcesz dodać nową stronę, zmienić layout lub zmodyfikować routing, przeanalizuj istniejące implementacje w docelowym katalogu i ponownie użyj ustalonych wzorców i stylów. Preferuj komponenty shadcn-vue i wspólne narzędzia, aby uniknąć duplikacji kodu.

4. Po każdej zmianie kodu uruchom pnpm lint:fix aby naprawić problemy ze stylem kodu. Jeśli modyfikujesz logikę w src/lib/, src/utils/, src/composables/, src/services/, src/router/ lub src/stores/, uruchom pnpm build aby sprawdzić, czy projekt się buduje poprawnie.

5. Jeśli w projekcie istnieją skrypty testów (np. pnpm test lub pnpm test:unit), dodaj lub zaktualizuj testy dla zmian w logice i uruchom je. Testy są opcjonalne, ale zalecane dla zmian w kodzie krytycznym.

6. Aby przetestować zmiany lokalnie, uruchom pnpm dev aby uruchomić serwer deweloperski, a następnie przejrzyj interfejs w przeglądarce.