vue-pages

Vue Pages to umiejętność Claude'a do automatycznego tworzenia interfejsów frontendowych dla CatchAdmin. Generuje gotowe komponenty Vue z pełną konfiguracją tabel catch-table — listami danych, formularzami wyszukiwania, paginacją i operacjami na wierszach. Obsługuje zaawansowane funkcje: sortowanie, eksport, import, usuwanie zbiorcze, uprawnienia dostępu i dostosowanie wyglądu (rozmiar, wysokość, wyrównanie kolumn). Idealna dla deweloperów budujących panele administracyjne i systemy zarządzania danymi w Vue.js.

1. Umieść umiejętność w katalogu .claude/skills/ projektu CatchAdmin, w podfolderze 09-vue-pages. Struktura powinna odpowiadać ścieżce {projekt}/.claude/skills/09-vue-pages/.

2. Zdefiniuj strukturę modułu: przygotuj nazwę modułu (np. products, users) i określ pola danych, które chcesz wyświetlać w tabeli. Umiejętność będzie generować pliki w katalogu web/src/views/{module}/.

3. Skonfiguruj kolumny tabeli, podając dla każdej kolumny: typ (selection, expand, index, operate), etykietę, nazwę pola (wspiera zagnieżdżone pola jak category.name), szerokość i wyrównanie. Określ, które kolumny mają być sortowalne lub stałe.

4. Dodaj formularz wyszukiwania, definiując pola do filtrowania danych. Umiejętność wygeneruje konfigurację search-form z polami typu text, select, date i innymi dostępnymi w catch-table.

5. Włącz opcjonalne funkcje: paginację (domyślnie 10 wierszy na stronę), eksport danych (podaj URL endpointu), import (podaj URL endpointu), usuwanie zbiorcze,回收站 (trash) dla odzyskiwania usuniętych rekordów. Ustaw uprawnienia dostępu poprzez prefiks permission.

6. Uruchom generowanie — umiejętność utworzy dwa pliki: index.vue (strona listy z tabelą) i create.vue (formularz dodawania/edycji). Pliki będą zawierać pełną konfigurację catch-table z wszystkimi ustawionymi parametrami.