dark-mode-check

Skill do audytu plików SCSS i TSX w projekcie Anytype-TS pod kątem poprawności dark mode'u. Wykrywa hardkodowane kolory, brakujące warianty ikon, inline'owe nadpisania tematów poza folderem theme oraz błędy w użyciu zmiennych CSS. Automatycznie weryfikuje, czy nowe komponenty i style zgodne są z systemem tematyzacji — zmienne z _vars.scss dla trybu jasnego i nadpisania z theme/dark/common.scss dla trybu ciemnego. Idealne do sprawdzenia wizualnych błędów pojawiających się tylko w dark mode'ie.

1. Aktywuj skill w Claude'a, gdy pracujesz nad komponentami lub stylami w kodzie Anytype-TS i chcesz zweryfikować poprawność dark mode'u. 2. Poproś o audyt konkretnego pliku, folderu lub komponentu — np. "Sprawdź dark mode w src/components/Button.tsx" lub "Zaudytuj style w całym folderze src/scss". 3. Skill przeanalizuje użycie zmiennych CSS — sprawdzi, czy kolory pochodzą z _vars.scss (tryb jasny) i czy dark mode'owe nadpisania znajdują się w theme/dark/common.scss. 4. Skill zidentyfikuje problemy: hardkodowane wartości kolorów zamiast zmiennych, brakujące warianty ikon dla dark mode'u, inline'owe style z selektorami html.themeDark poza folderem theme, oraz błędy w strukturze selektorów. 5. Gdy dodasz nowe style, poproś skill o weryfikację — upewni się, że nowe zmienne są zdefiniowane w odpowiednich plikach i że komponenty działają zarówno w trybie jasnym, jak i ciemnym. 6. Jeśli użytkownik zgłosi wizualny błąd widoczny tylko w dark mode'ie, skill może przeanalizować kod i wskazać przyczynę — najczęściej brakujące nadpisania zmiennych lub hardkodowane kolory.