8-bit-pixel-art-patterns
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
How to use
Zainstaluj skill w swoim projekcie Claude, dodając katalog 8-bit-pixel-art-patterns do konfiguracji umiejętności agenta.
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.
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.
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.
Łą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.
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.