frontend-enhancer

This skill should be used when enhancing the visual design and aesthetics of Next.js web applications. It provides modern UI components, design patterns, color palettes, animations, and layout templates. Use this skill for tasks like improving styling, creating responsive designs, implementing modern UI patterns, adding animations, selecting color schemes, or building aesthetically pleasing frontend interfaces.

1. Zainstaluj skill frontend-enhancer w swoim projekcie Claude lub Copilot, dodając go do listy dostępnych umiejętności agenta.

2. Gdy pracujesz nad Next.js, wyzwól skill, gdy chcesz ulepszyć wygląd interfejsu — na przykład podczas tworzenia nowych komponentów, wyboru kolorów lub dodawania animacji.

3. Poproś o konkretny komponent z biblioteki: przyciski w wariantach (primary, secondary, outline, ghost, danger), karty z podkomponentami (CardHeader, CardTitle, CardContent, CardFooter) lub pola wejścia z walidacją. Skill dostarczy kod TypeScript gotowy do użycia.

4. Użyj szablonów layoutów i sekcji (hero, feature grid, landing page) jako podstawy responsywnych stron. Skill zasugeruje strukturę HTML i klasy Tailwind CSS dostosowane do różnych rozmiarów ekranu.

5. Wybierz paletę kolorów z kuratowanych zestawów lub poproś o dostosowanie istniejącej. Skill zwróci zmienne CSS i konfigurację Tailwind do spójnego stosowania w całej aplikacji.

6. Dodaj animacje i przejścia, wskazując, gdzie chcesz efekty (hover, scroll, load). Skill dostarczy gotowe klasy CSS lub komponenty React z animacjami.