frontend-design-extractor

Extract reusable UI/UX design systems from frontend codebases: design tokens, global styles, components, interaction patterns, and page templates. Use when analyzing any frontend repo (React/Vue/Angular/Next/Vite/etc.) to document or migrate UI/UX for reuse across projects. Focus on UI/UX only; explicitly ignore business logic and domain workflows.

1. Określ tryb pracy: czy tworzysz nowy projekt od zera (greenfield), czy analizujesz istniejący kod. Upewnij się, że logika biznesowa jest poza zakresem – skill skupia się wyłącznie na warstwie designu.

2. Dla istniejącego repozytorium uruchom skrypt skanujący: scripts/scan_ui_sources.sh z katalogu głównego projektu. Skrypt automatycznie przeszuka pliki, ignorując typowe foldery build i cache.

3. Jeśli struktura projektu jest niestandardowa, dostosuj skan za pomocą dodatkowych parametrów: scripts/scan_ui_sources.sh /ścieżka/do/repo [plik_wyjścia] [dodatkowe_globy] lub flagi --root, --out, --ignore.

4. Wygeneruj strukturę wyjściową poleceniem scripts/generate_output_skeleton.sh, które utworzy folder ./ui-ux-spec (lub wskazany katalog) do przechowywania wyników ekstrakcji.

5. Skill wyprodukuje kompletny spec UI/UX zawierający: design tokeny (kolory, typografia, spacing, promienie, cienie, animacje), globalne style, katalog komponentów, wzorce interakcji oraz szablony stron. Dla trybu greenfield otrzymasz również rekomendacje implementacyjne dla wybranego frameworka.

6. Przejrzyj wygenerowany spec i dostosuj go do potrzeb – możesz go następnie wykorzystać do migracji designu między projektami lub jako podstawę nowego design systemu.