Toolverse
All skills

dark-mode-check

by anyproto

Audit SCSS and TSX files for dark mode issues — missing variable usage, hardcoded colors, icon gaps, selector misuse, and inline dark overrides outside the theme folder

Installation

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

Installation

Quick info

Author
anyproto
Category
Frontend

About this skill

Audit SCSS and TSX files for dark mode issues — missing variable usage, hardcoded colors, icon gaps, selector misuse, and inline dark overrides outside the theme folder

How to use

  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.

Related skills