Toolverse
All skills

shadcn-vue-admin

by Whbbit1999

Build and maintain the shadcn-vue-admin Vue 3 + Vite + TypeScript admin dashboard with shadcn-vue, Tailwind, Pinia, Vue Router, i18n, and TanStack Query. Use for UI/layout changes, page additions, routing updates, theme/auth work, and component integration in this repo.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Frontend
Views
12

About this skill

Build and maintain the shadcn-vue-admin Vue 3 + Vite + TypeScript admin dashboard with shadcn-vue, Tailwind, Pinia, Vue Router, i18n, and TanStack Query. Use for UI/layout changes, page additions, routing updates, theme/auth work, and component integration in this repo.

How to use

  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.

Related skills