KATEGORIA · 19 POZYCJI
Frontend
React, UI, CSS, animacje i wydajność stron
web-artifacts-builder
Zestaw narzędzi do budowania rozbudowanych, wielokomponentowych artefaktów HTML z użyciem React, Tailwind i shadcn/ui. Używaj przy bardziej złożonych interaktywnych widokach niż pojedynczy plik.
Skillwebapp-testing
Testuje lokalne aplikacje webowe Playwrightem: weryfikacja frontendu, debugowanie UI i zrzuty ekranu. Przydatny jako pętla zwrotna przy vibe-codingu.
Skillfrontend-design
Uczy agenta tworzyć wyróżniające się, produkcyjne interfejsy webowe zamiast generycznej „AI-estetyki”. Włączaj przy budowie landing page'y, dashboardów i komponentów.
PluginFrontend Design (oficjalny plugin Anthropic)
Tworzy dopracowane, produkcyjne interfejsy frontendowe o wyróżniającej się estetyce, unikając generycznego wyglądu generowanego przez AI. Włączaj przy budowie stron, komponentów i dashboardów.
Skillreact-best-practices
Wytyczne wydajnościowe React/Next.js od zespołu Vercel — wzorce, których inżynierowie Vercela sami używają. Włączaj przy pisaniu i optymalizacji komponentów.
Skillweb-design-guidelines
Zasady projektowania interfejsów webowych od Vercela: typografia, odstępy, dostępność, mikrointerakcje. Podnosi jakość każdego UI generowanego przez agenta.
SkillReact Composition Patterns
Wzorce kompozycji w React, które skalują się w bibliotekach komponentów: compound components i elastyczne API zamiast mnożenia booleanowych propsów. Używaj przy refaktoryzacji i projektowaniu komponentów wielokrotnego użytku.
SkillReact View Transitions
Płynne animacje z React View Transition API: przejścia między stronami, shared elements i animacje wejścia/wyjścia, także w Next.js. Używaj zamiast zewnętrznych bibliotek animacji.
SkillReact Native Best Practices
Dobre praktyki React Native i Expo dla wydajnych aplikacji mobilnych: optymalizacja list, animacje i moduły natywne. Używaj przy budowaniu i optymalizacji komponentów RN.
SkillDeploy to Vercel
Wdraża aplikacje i strony na Vercel na proste polecenie w rodzaju "deploy my app". Używaj do szybkich preview deploymentów i publikacji projektów frontendowych.
Skillimprove-ui
Audytuje istniejący interfejs względem jego własnych wzorców, wskazuje zweryfikowane problemy UI i pisze gotowe plany poprawek dla innego agenta. Od Juliena Thibeaut (ibelick), znanego twórcy UI.
SkillRemotion Best Practices
Oficjalne dobre praktyki Remotion, czyli tworzenia wideo programistycznie w React. Używaj przy budowaniu kompozycji, animacji i renderowaniu filmów z kodu.
Skillweb-quality-audit
Audyt jakości strony w stylu Lighthouse od Addy'ego Osmaniego (zespół Chrome): wydajność, dostępność, SEO i dobre praktyki w jednym przeglądzie. Świetny do regularnych health-checków serwisu.
Skillexpo-router
Oficjalny skill zespołu Expo dot. nawigacji Expo Router w aplikacjach React Native. Używaj przy budowie i refaktoryzacji routingu w projektach Expo.
SkillWeb Performance Audit
Audyt wydajności strony przez Chrome DevTools MCP: Core Web Vitals (LCP, INP, CLS), zasoby blokujące render, layout shifty i cache. Używaj, gdy trzeba zdiagnozować i przyspieszyć ładowanie witryny.
SkillExpo UI
Budowanie natywnego UI pakietem @expo/ui: prawdziwe SwiftUI na iOS i Jetpack Compose na Androidzie renderowane z Reacta. Używaj, gdy standardowe komponenty React Native nie dają natywnego wyglądu i zachowania.
SkillExpo Tailwind Setup
Konfiguruje Tailwind CSS v4 w projekcie Expo z react-native-css i NativeWind v5 dla uniwersalnego stylowania web i native. Idealny przy starcie projektu multiplatformowego.
SkillD3.js Visualisation
Tworzenie interaktywnych wizualizacji danych w d3.js: niestandardowe wykresy, diagramy sieci, mapy i animowane SVG. Używaj, gdy standardowe biblioteki wykresów nie wystarczają, w React, Vue, Svelte lub czystym JS.
SkillUI Craft
Zasady anti-slop dla projektowania interfejsów: obowiązkowa faza discovery przed kodowaniem oraz wytyczne dla layoutu, typografii, koloru, motion i dostępności. Używaj, by UI nie wyglądało jak generyczny produkt AI.