8-bit-pixel-art-patterns

Skill do tworzenia pixelowanych obramowań, cieni i efektów dla komponentów UI w stylu 8-bitowym. Używaj go gdy budujesz interfejsy retro, które wymagają autentycznego wyglądu pixel artu. Opiera się na absolutnie pozycjonowanych elementach div, które tworzą charakterystyczne piksele w narożnikach, na krawędziach i jako efekty cienia. Idealne do projektów nawiązujących do estetyki starych gier i systemów.

1. Zainstaluj skill w swoim projekcie Claude, dodając katalog 8-bit-pixel-art-patterns do konfiguracji umiejętności agenta.

2. Gdy projektujesz komponent UI w stylu retro, poproś Claude o zastosowanie wzoru pixelowanego obramowania. Skill automatycznie wygeneruje strukturę 9 elementów div – cztery narożniki, cztery segmenty krawędzi oraz boki – każdy z odpowiednimi klasami Tailwind CSS do pozycjonowania i kolorowania.

3. Dla komponentów wymagających głębi wizualnej, zastosuj wzór pixelowanego cienia. Skill doda warstwy cienia na górze i dole elementu, tworząc efekt 3D charakterystyczny dla grafiki 8-bitowej.

4. Dostosuj rozmiary pikseli i kolory poprzez modyfikację klas CSS (size-1.5, bg-foreground) do swoich potrzeb projektowych – skill dostarcza szablon, który łatwo się skaluje.

5. Łącz obramowania i cienie w jednym komponencie, aby uzyskać pełny retro efekt. Skill obsługuje warianty takie jak outline, pozwalając na warunkowe renderowanie efektów cienia.

6. Testuj komponenty w przeglądarce – pixelowane elementy powinny wyrenderować się jako ostre, geometryczne kształty tworzące autentyczną estetykę pixel artu z lat 80. i 90.