theme-system
Use when creating or modifying UI components, styling, or visual elements in OpenChamber. All UI colors must use theme tokens - never hardcoded values or Tailwind color classes.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Use when creating or modifying UI components, styling, or visual elements in OpenChamber. All UI colors must use theme tokens - never hardcoded values or Tailwind color classes.
How to use
Zainstaluj skill theme-system w swoim projekcie OpenChamber – znajduje się w packages/ui/src/lib/theme/themes/. Skill jest kompatybilny z systemem opencode.
Gdy tworzysz lub modyfikujesz komponent UI, nigdy nie używaj hardkodowanych kolorów hex ani klas Tailwinda. Zamiast tego wybierz odpowiedni token z drzewa decyzyjnego: dla kodu użyj syntax., dla statusów (błędy, ostrzeżenia) użyj status., dla głównego przycisku akcji użyj primary., dla elementów interaktywnych użyj interactive., dla warstw tła użyj surface.*.
Pamiętaj o krytycznych regułach: surface.elevated to tokeny dla inputów, kart i paneli; interactive.hover tylko na elementach klikalne; interactive.selection dla stanów aktywnych/wybranych; kolory statusu wyłącznie do rzeczywistych informacji zwrotnych.
Jeśli tworzysz przyciski, używaj wyłącznie wspólnego komponentu Button z packages/ui/src/components/ui/button.tsx. Nie twórz własnych wariantów (ButtonLarge, ButtonSmall) ani nie hardkoduj wysokości i paddingu – wykorzystaj istniejące warianty size.
Wybierz wariant przycisku zgodnie z jego rolą: default dla akcji głównej, outline dla akcji drugorzędnej widocznej, secondary dla miękkiej akcji drugorzędnej, ghost dla akcji o niskim priorytecie w toolbarze.
Aby dodać niestandardowy motyw, umieść plik JSON w ~/.config/openchamber/themes/. System automatycznie załaduje nowe tokeny i udostępni je wszystkim komponentom.