retro-css-architecture

Umiejętność Claude'a do organizacji CSS dla komponentów 8-bitowych. Zarządzaj niestandardowymi właściwościami, pikselowymi czcionkami i responsywnymi wzorami pixel artu. Idealna do tworzenia i modyfikacji komponentów w stylu retro — od autentycznej typografii Press Start 2P po ostre renderowanie grafik i semantyczne kolory w trybie ciemnym.

1. Zaimportuj arkusz stylów retro do każdego komponentu 8-bitowego, dodając import "@/components/ui/8bit/styles/retro.css"; na górze pliku TSX.

2. Zastosuj klasę retro do elementów tekstowych, aby uaktywnić pikselową czcionkę Press Start 2P — możesz użyć className="retro" lub właściwości font="retro" w komponentach Button i innych elementach.

3. Dla grafik pixel artu dodaj klasę pixelated (className="pixelated"), aby zapewnić ostre, niezmiękczane renderowanie obrazów — użyj właściwości CSS image-rendering: pixelated lub crisp-edges.

4. Kontroluj kolory za pomocą semantycznych nazw klas z wariantami trybu ciemnego, na przykład border-foreground dark:border-ring dla obramowań lub bg-foreground dark:bg-ring dla tła.

5. Utrzymuj spójny rozmiar pikseli w całym projekcie, korzystając z predefiniowanych wartości (np. size-1.5 dla narożnych pikseli, border-y-6 dla obramowań kart) i dostosuj je do urządzeń mobilnych za pomocą breakpointów responsywnych (h-[5px] md:h-1.5).

6. Przechowuj wszystkie style specyficzne dla retro w pliku components/ui/8bit/styles/retro.css, importując tam czcionkę z Google Fonts i definiując klasy bazowe dla spójności całego systemu designu.