frontend-style-guide

Frontend Style Guide to skill dla Claude'a, który pomaga utrzymać spójność kodu w projektach frontendowych Lightdash. Automatycznie stosuje wytyczne stylizacji przy edycji komponentów React, szczególnie podczas migracji z Mantine 6 na Mantine 8. Skill sprawdza poprawność importów, eliminuje magiczne liczby na rzecz wartości z tematu, i wymusza użycie CSS modules gdy potrzeba więcej niż 3 inline-style props. Aktywuje się automatycznie przy edycji plików TSX, naprawianiu problemów ze stylami lub gdy wspomniasz o Mantine, CSS modules czy stylizacji.

1. Zainstaluj skill w swoim środowisku Claude'a, wskazując repozytorium Lightdash i ścieżkę .claude/skills/frontend-style-guide. 2. Otwórz plik komponentu React (TSX) w pakiecie frontend, który chcesz edytować lub zaktualizować. 3. Poproś Claude'a o pomoc w stylizacji komponentu, naprawieniu błędów CSS lub migracji kodu z Mantine 6 na Mantine 8 — skill automatycznie się aktywuje. 4. Skill będzie sprawdzać, czy używasz @mantine-8/core, czy nie masz prop sx lub style, i czy stosujesz wartości z tematu zamiast liczb. 5. Jeśli potrzebujesz więcej niż 3 inline-style props, skill zasugeruje przejście na CSS modules z zmiennymi tematu (np. --mantine-color-${color}-filled). 6. Przejrzyj sugestie Claude'a zgodnie z checklist'ą komponentu i zatwierdź zmiany w swoim edytorze.