Najlepsze skille frontendowe: design, React, Next.js i mobile

Skille frontendowe warte instalacji we wrześniu 2026 dzielą się na trzy zadania: skille projektowe (frontend-design, ui-ux-pro-max, design-taste-frontend, impeccable), które ustalają kierunek wizualny, zanim powstanie kod UI, skille stackowe (vercel-react-best-practices, skille Next.js w vercel/next.js, Expo, Remotion), które utrzymują kod na bieżąco, oraz web-design-guidelines, który recenzuje gotowy interfejs. Wystarczy jeden skill na zadanie.

Agent zbudował stronę cennika w cztery minuty: fioletowy gradient w hero, trzy identyczne karty, wszędzie Inter i formularz zapisu bez atrybutów autocomplete i bez widocznego stanu fokusu. Następna strona wygląda tak samo, bo nic nie powiedziało agentowi, jak wygląda twój produkt ani co znaczy „gotowe” dla interfejsu. Ta strona jest dla frontendowców, którzy chcą, żeby agent oddawał UI nadające się do wdrożenia, i dla tech leadów, którzy muszą ten wynik sprawdzać bramkami, a nie przeglądaniem każdego diffa.

Co daje ci ten przewodnik po skillach frontendowych

Krótką listę skilli frontendowych według zadania, z datowaną popularnością i właściwym repozytorium dla każdego
Polecenia instalacji dla Claude Code, Codeksa i Cursora, w tym ścieżki przez pluginy
Pełny przykład: landing page zbudowany z ui-ux-pro-max, a potem zrecenzowany przez web-design-guidelines
Czteroetapową pętlę (design system, budowa, przegląd dostępności i wydajności, ślad w Chrome DevTools) z bramką zamykającą każdy etap
Pułapki instalacji, przez które skill po cichu nic nie robi, i sposób wyjścia z nich

Które skille frontendowe warto zainstalować w 2026 roku?

Popularność na dzień 2026-09-26. „sk” to łączna liczba instalacji na skills.sh z zewnętrznego zrzutu LinklyAI/best-skills z 2026-09-26 (źródło wtórne; zanim zacytujesz liczbę, sprawdź stronę skilla na skills.sh). „Plugin” to instalacje w katalogu pluginów Anthropic (claude.com/plugins). Gwiazdki to gwiazdki na GitHubie. Tych trzech miar nie da się ze sobą porównywać.

Zadanie	Skill (repozytorium)	Co robi agent	Popularność (2026-09-26)
Kierunek wizualny	`frontend-design` (anthropics/skills)	Ustala cel, odbiorcę i estetykę przed pisaniem UI, z dala od szablonowych ustawień domyślnych	923 303 sk; plugin 1 134 112
Design system	`ui-ux-pro-max` (nextlevelbuilder/ui-ux-pro-max-skill)	Generuje palety, pary krojów i reguły UX z dołączonych danych przed kodem	371 037 sk; 130,7 tys. gwiazdek
Gust zamiast szablonu	`design-taste-frontend` (Leonxlnx/taste-skill)	Narzuca ograniczenia układu, typografii i odstępów oraz listę zakazanych wzorców „wyglądu AI”	520 147 sk; 90,2 tys. gwiazdek
Słownik i linter designu	`impeccable` (pbakaus/impeccable)	24 polecenia `/impeccable` i detektor z 61 deterministycznymi regułami	293 766 sk; 71,3 tys. gwiazdek
Wydajność Reacta	`vercel-react-best-practices` (vercel-labs/agent-skills)	70 reguł w 8 kategoriach; najpierw kaskady żądań i rozmiar bundla	744 240 sk
Przegląd UI	`web-design-guidelines` (vercel-labs/agent-skills)	Recenzuje kod UI wobec ponad 100 reguł interfejsu i dostępności, raportuje `plik:linia`	667 369 sk
Next.js	Skille Next.js (`vercel/next.js`)	Wdrażanie Cache Components i częściowego prefetchingu, pętla `next dev`	repo 142,4 tys. gwiazdek (cały projekt)
Mobile	Skille Expo (`expo/skills`)	Expo Router, natywne UI, aktualizacje SDK, buildy i aktualizacje EAS	2,6 tys. gwiazdek
Wideo	Skille Remotion (`remotion-dev/skills`)	Tworzy i renderuje kompozycje wideo w React	4,7 tys. gwiazdek

Z tabeli wynikają dwie rzeczy. Po pierwsze, skille projektowe się pokrywają: wszystkie cztery odciągają agenta od generycznego UI, więc zainstaluj jeden, nie cztery (zob. jak wybrać jeden skill projektowy). Po drugie, tylko web-design-guidelines i impeccable sprawdzają pracę po jej napisaniu. Pozostałe kształtują generowanie, a to właśnie wynik, który nadal musisz zweryfikować.

Jak zainstalować skille frontendowe w Claude Code, Codeksie i Cursorze?

CLI skills (npm skills 1.7.0) instaluje te same foldery SKILL.md w każdym agencie; flagi poniżej pochodzą z jego --help. CLI dopasowuje --skill do pola name we frontmatterze skilla, a nie do nazwy folderu, i po --skill wymaga spacji, a nie =. Uruchom te polecenia w terminalu w katalogu głównym repozytorium, żeby skille trafiły do zakresu projektu i do systemu kontroli wersji.

# Katalog pluginów Anthropic (jeśli marketplace'u brakuje: claude plugin marketplace add anthropics/claude-plugins-official)
claude plugin install frontend-design@claude-plugins-official

# Skille Vercela do Reacta i przeglądu, do .claude/skills
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices web-design-guidelines -a claude-code

# ui-ux-pro-max jako plugin, z jego własnego marketplace'u
claude plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
claude plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Skille z pluginów mają przestrzeń nazw: skill pluginu uruchamia się jako /frontend-design:frontend-design, a sam odpala się też wtedy, gdy prosisz o UI. Claude Code ma również wbudowany skill /design (research preview); wypróbuj go, zanim dodasz zewnętrzny do tego samego zadania.

# CLI skills zapisuje projektowe skille Codeksa w .agents/skills
npx skills add anthropics/skills --skill frontend-design -a codex
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices web-design-guidelines -a codex

# ui-ux-pro-max ma własny instalator
npx ui-ux-pro-max-cli init --ai codex

Zanim zaczniesz na nich polegać, uruchom /skills w sesji Codeksa i sprawdź, czy nowe skille są na liście.

# CLI skills zapisuje projektowe skille Cursora w .agents/skills
npx skills add anthropics/skills --skill frontend-design -a cursor
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices web-design-guidelines -a cursor

# ui-ux-pro-max ma własny instalator
npx ui-ux-pro-max-cli init --ai cursor

Na potrzeby tej strony nie sprawdzaliśmy ponownie, jak skille zachowują się w Cursorze; powyższe ścieżki to te, które zapisuje CLI skills 1.7.0.

Pozostałe pozycje z tabeli instalujesz tak samo w każdym agencie. Dodaj -a claude-code, -a codex albo -a cursor, żeby wskazać cel:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
npx impeccable install            # potem uruchom /impeccable init w agencie
npx skills add vercel/next.js
npx skills add expo/skills --skill '*'
npx skills add remotion-dev/skills

W Claude Code Expo jest też pluginem: claude plugin install expo@claude-plugins-official. W Codeksie impeccable instaluje hook projektu, który zatwierdzasz w /hooks po instalacji i ponownie po każdej aktualizacji zmieniającej .codex/hooks.json.

Koszt kontekstu. Skill kosztuje tylko swoją nazwę i opis, dopóki się nie odpali. Po instalacji pluginu polecenie claude plugin details frontend-design@claude-plugins-official wypisuje jego stały koszt w tokenach (dla tego pluginu około 78 tokenów, zmierzone w Claude Code 2.1.283 dnia 2026-09-26); sprawdź też /context w sesji. Serwery MCP, takie jak Chrome DevTools, dodają narzędzia do każdej sesji. Claude Code i Codex odkładają ładowanie schematów narzędzi dzięki wyszukiwaniu narzędzi (tool search), które w obu jest domyślnie włączone (Claude Code 2.1.283, Codex 0.157.1), więc koszt jest niższy niż pełny schemat, ale nie zerowy; dodawaj te serwery w zakresie projektu tylko w repozytoriach frontendowych.

Jak zbudować landing page z ui-ux-pro-max i zrecenzować go przez web-design-guidelines?

To przykład, który reszta strony uogólnia. Produkt to hipotetyczny SaaS z narzędziami dla programistów, z frontendem na Next.js App Router.

Wygeneruj i zapisz design system przed jakimkolwiek kodem strony. ui-ux-pro-max potrafi utrwalić go w design-system/<project>/MASTER.md, a ten plik agent czyta potem przy każdej kolejnej stronie.

Use the ui-ux-pro-max skill to generate a design system for a developer-tools SaaS
landing page: technical audience, dark theme, dense information, no stock illustrations.
Persist it as design-system/devtools/MASTER.md with colour tokens, a type scale,
spacing scale, component rules and an explicit anti-patterns list.
Do not write any page code yet. Show me the palette with WCAG contrast ratios for
every text/background pair and stop for my approval.

Przejrzyj design system, nie kod. Sprawdź współczynniki kontrastu, skalę typograficzną i listę antywzorców. To jedyny artefakt, który człowiek zatwierdza linijka po linijce, bo dziedziczy go każda kolejna strona.

Zbuduj stronę na podstawie zatwierdzonego pliku.

Read design-system/devtools/MASTER.md and build app/(marketing)/page.tsx:
hero, three-tier pricing with an annual toggle, a logo strip and an email signup form.
Use only tokens from MASTER.md; no hard-coded colours or font sizes.
Keep everything a Server Component except the pricing toggle.
Apply vercel-react-best-practices. When done, run the type check and lint,
and list every place where you deviated from MASTER.md and why.

Zrecenzuj wynik przez web-design-guidelines. Skill przed każdym przeglądem pobiera najnowsze wytyczne i raportuje zwięzłe uwagi w formacie plik:linia.

Use the web-design-guidelines skill to review app/(marketing)/ and components/marketing/.
Report findings as file:line with the rule name, grouped by severity.
Then fix every accessibility and form finding, re-run the review, and paste the
before/after finding counts. Do not change the visual design while fixing.

Spodziewaj się uwag w rodzaju SignupForm.tsx:42 input missing autocomplete="email" albo braku stylu fokusu na przełączniku cennika. Przegląd jest zakończony, gdy drugi przebieg zgłasza zero uwag dotyczących dostępności, a pozostałe uwagi projektowe są spisane jako zaakceptowane.

Jak wygląda pętla frontendowa od design systemu do śladu wydajności?

Powyższy przykład obejmuje projekt i przegląd. Zmiana frontendowa gotowa do wdrożenia potrzebuje jeszcze dwóch kontroli, których skille same nie wykonają: automatycznej bramki dostępności i designu oraz pomiaru działającej strony. Pętla ma cztery etapy, a każdy kończy się artefaktem, który sprawdzisz bez czytania kodu komponentów.

Etap	Skill lub narzędzie	Bramka zamykająca etap	Kto zatwierdza
1. Design system	`ui-ux-pro-max` albo `frontend-design` (albo `/impeccable init`, który zapisuje `PRODUCT.md`)	Zatwierdzony `MASTER.md` lub opis kierunku ze współczynnikami kontrastu	Projektant albo tech lead
2. Budowa	`vercel-react-best-practices`, skille `vercel/next.js`, skille Expo dla mobile	Zielony type check, lint i testy jednostkowe; żadnych surowych kolorów poza tokenami	CI
3. Przegląd dostępności i designu	`web-design-guidelines`, `/impeccable audit`, `npx impeccable detect`	Zero otwartych uwag dotyczących dostępności; wynik detektora dołączony do pull requesta	CI plus osoba przeglądająca listę uwag
4. Ślad w runtime	Chrome DevTools MCP (`performance_start_trace`, `performance_analyze_insight`, `lighthouse_audit`)	LCP, CLS i wynik dostępności w Lighthouse w ramach ustalonego budżetu	Osoba przeglądająca podsumowanie śladu

Etap 3 to miejsce, w którym deterministyczna kontrola zastępuje ocenę na oko. Detektor impeccable uruchamia swoje 61 reguł bez modelu i bez klucza API, więc to samo wejście daje w CI te same wyniki:

npx impeccable detect --json src/            # wynik JSON przyjazny dla CI
npx impeccable detect http://localhost:3000   # wyrenderowana strona, przez zainstalowanego Chrome'a

Detektor kończy się kodem 2, gdy znajdzie uwagi główne (primary findings), i kodem 1, gdy nie da się przeskanować celu, więc krok CI nie przechodzi w obu przypadkach; kod 0 oznacza czysty skan (impeccable 4.1.0).

Etap 4 wymaga serwera Chrome DevTools MCP (npm chrome-devtools-mcp, 1.10.1 z 2026-09-23; 52,6 tys. gwiazdek na GitHubie na dzień 2026-09-26). Domyślnie wysyła on statystyki użycia do Google, a jego narzędzia wydajnościowe mogą wysyłać adresy URL śladów do API Chrome UX Report (CrUX). Poniższe polecenia wyłączają oba kanały flagami --no-usage-statistics i --no-performance-crux:

claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux

Możesz też zainstalować plugin, który dodaje siedem skilli, m.in. debug-optimize-lcp i a11y-debugging, ale przypina starszą wersję serwera (1.9.0): claude plugin install chrome-devtools-mcp@claude-plugins-official. Plugin uruchamia serwer z domyślną telemetrią i nie daje miejsca na flagi rezygnacji, więc powyższych flag nie da się przekazać. Statystyki użycia nadal wyłączysz, eksportując CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1 przed uruchomieniem Claude Code (są też wyłączone, gdy ustawiona jest zmienna CI). Zapytania do CrUX nie mają przełącznika w zmiennej środowiskowej, więc jeśli to ma dla ciebie znaczenie, użyj powyższego polecenia claude mcp add (sprawdzone w chrome-devtools-mcp 1.10.1).

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --no-usage-statistics --no-performance-crux

Dodaj serwer do .cursor/mcp.json:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics", "--no-performance-crux"]
    }
  }
}

Start the dev server, then use the chrome-devtools MCP server to record a performance
trace of http://localhost:3000/ while emulating a mid-range phone.
Use performance_analyze_insight to name the LCP element and everything that delays it,
then run lighthouse_audit. Fix the top LCP cause only, re-record the trace, and report
LCP, CLS and the Lighthouse accessibility score before and after as a table.

Ślad laboratoryjny z jednej maszyny to test dymny, a nie budżet wydajności. Wpisz liczby do pull requesta, a kontrolę regresji trzymaj w CI zgodnie z podejściem z testów wydajności. Dla obsługi klawiatury i czytników ekranu, których statyczny przegląd nie widzi, dodaj kontrole Playwright i axe z testów dostępności.

Który skill projektowy wybrać?

Wszystkie cztery skille projektowe atakują ten sam problem, czyli generyczny „wygląd AI”, z różnych stron. Kilka naraz daje agentowi sprzeczne instrukcje.

Twoja sytuacja	Wybierz	Dlaczego
Nowe UI, brak design systemu, chcesz, żeby agent zdecydował się na kierunek	`frontend-design`	Najmniejszy narzut; własny plugin Anthropic w Claude Code
Nowy produkt, który najpierw potrzebuje spisanych tokenów i reguł UX	`ui-ux-pro-max`	Tworzy utrwalony plik design systemu, który agent czyta przy każdej stronie; do skryptu wyszukiwania potrzebuje Pythona 3
Powierzchnie marketingowe: landing pages, portfolio, redesigny	`design-taste-frontend`	Stanowcza lista zakazów i warianty; zob. Taste Skill
Zespół, który chce wspólnych czasowników projektowych i kontroli w stylu lintera	`impeccable`	`/impeccable audit`, `polish` i `critique` plus deterministyczny detektor; zob. Impeccable
Istniejący design system w Figmie albo shadcn/ui	żaden z powyższych na początek	Użyj serwera Figma MCP albo serwera shadcn/ui MCP, żeby agent korzystał z twoich komponentów

web-design-guidelines nie ma w tej tabeli, bo recenzuje, a nie projektuje. Pasuje do każdego z nich.

Które skille stackowe utrzymują aktualny kod w React, Next.js i mobile?

React. vercel-react-best-practices odpala się przy pobieraniu danych i pracy nad wydajnością i najpierw stosuje reguły dotyczące kaskad żądań. W tym samym repozytorium są vercel-composition-patterns (komponenty złożone, zmiany API w React 19) i vercel-react-view-transitions.

Apply vercel-react-best-practices to app/dashboard/. Find every sequential await that
could run in parallel and every client component that only fetches data.
For each, show the change and the rule it follows. Then run the tests and the build,
and list which components moved from the client to the server.

Next.js. Skille Next.js przeniosły się do repozytorium frameworka: npx skills add vercel/next.js instaluje next-cache-components-adoption, next-cache-components-optimizer, next-dev-loop i skille częściowego prefetchingu. Wycofane repozytorium vercel-labs/next-skills i jego skille next-best-practices oraz next-upgrade już nie istnieją; ta wiedza trafia teraz do dołączonej dokumentacji i do AGENTS.md lub CLAUDE.md, które next dev generuje w Next.js 16.3 i nowszych. Next.js 16.2 zawiera tę samą dokumentację dopasowaną do wersji w node_modules/next/dist/docs/, ale nie zapisuje instrukcji, więc dodaj do AGENTS.md zdanie, które każe agentowi czytać ten katalog. W Next.js 16.1 lub starszym uruchom npx @next/codemod@canary agents-md, żeby pobrać dokumentację dopasowaną do wersji do .next-docs/ i zaindeksować ją w AGENTS.md. Pracę z działającym serwerem deweloperskim opisuje strona serwery MCP dla narzędzi deweloperskich frameworków.

Mobile. expo/skills ma 26 skilli (24 w pluginie Expo oraz expo-skill-eval i expo-migrate-module), w tym router expo-overview, expo-router, expo-native-ui, expo-upgrade i skille EAS, takie jak eas-update i eas-workflows. expo-skill-feedback steruje ich telemetrią. Dla React Native bez Expo dodaj vercel-react-native-skills z vercel-labs/agent-skills albo react-native-best-practices od Callstack (callstackincubator/agent-skills), czyli społecznościowy zestaw firmy konsultingowej, a nie dostawcy.

Wideo. remotion-dev/skills zawiera 12 skilli. /remotion-create Make a promo video for a record store tworzy kompozycję, a /remotion-render ją renderuje.

Vue, Angular i Svelte. Te kolekcje sprawdziliśmy poleceniem npx skills add <repo> --list (CLI skills 1.7.0):

Stack	Instalacja	Znalezione skille
Vue, Nuxt, Vite, Vitest	`npx skills add antfu/skills`	`vue`, `nuxt`, `pinia`, `vite`, `vitest`, `unocss`, `nitro` i 4 inne (11)
Angular	`npx skills add angular/skills`	`angular-developer`, `angular-new-app` (2)
Svelte	`npx skills add sveltejs/ai-tools`	`svelte-code-writer`, `svelte-core-bestpractices`

Oficjalne kolekcje dostawców spoza frontendu (Stripe, Supabase, Cloudflare i inne) znajdziesz w oficjalnych skillach dostawców.

--skill react-best-practices niczego nie dopasowuje: CLI porównuje nazwę z frontmattera, czyli vercel-react-best-practices. To samo dotyczy vercel-composition-patterns i vercel-react-native-skills.
--skill=web-design-guidelines jest ignorowane bez błędu; z -y instaluje wszystkie skille z repozytorium. Użyj spacji.
vercel-labs/next-skills, next-best-practices i next-upgrade są wycofane. Użyj vercel/next.js.
Skille Expo building-native-ui i upgrading-expo zwracają 404; aktualne nazwy to expo-native-ui i expo-upgrade.
analogjs/angular-skills jest przestarzałe na rzecz angular/skills: w CLI skills 1.7.0 każdy jego skill opisuje się jako nieutrzymywany.
vercel/react-best-practices i vercel/agent-skills nie istnieją. Skille Vercela są pod vercel-labs.
ui-ux-pro-max-cli i uipro-cli instalują polecenie o tej samej nazwie, uipro. README wskazuje ui-ux-pro-max-cli, a uipro-cli nazywa nieaktualnym.
Hook edycji w impeccable i jego tryb live uruchamiają kod poza promptem uprawnień agenta. Tryb live wykonuje skrypt z package.json w powłoce. Przeczytaj oba, zanim włączysz je w nieznanym repozytorium.

Kiedy skille frontendowe zawodzą i jak z tego wyjść?

Skill w ogóle się nie odpala. Prosisz o stronę i dostajesz stary, generyczny wynik. Zwykle instalacja niczego nie dopasowała (zob. pułapki powyżej) albo skill trafił do katalogu, którego twój agent nie czyta. Wyjście: uruchom npx skills list, a potem sprawdź /skills w Codeksie albo listę skilli w Claude Code. Zainstaluj ponownie z nazwą z frontmattera i jawnym celem -a. W przypadku skilla z pluginu wywołaj go raz pełną nazwą z przestrzenią nazw, żeby potwierdzić, że się ładuje.

Dwa skille projektowe walczą ze sobą. Agent miesza listę zakazów z taste-skill z paletą z ui-ux-pro-max i nie dostarcza ani jednego, ani drugiego. Wyjście: usuń wszystkie skille projektowe poza jednym (npx skills remove <name>) i wpisz ścieżkę wybranego pliku design systemu do CLAUDE.md albo AGENTS.md, żeby każda sesja od niego startowała.

Skill uczy złej wersji frameworka. Wskazówki Next.js ze starej kopii skilla przeczą zainstalowanej wersji. Wyjście: npx skills update dla kopii skilli; w Next.js wybieraj AGENTS.md generowane przez next dev, bo jest dopasowane do zainstalowanej wersji.

Przegląd przechodzi, a użytkownicy nadal mają problemy. web-design-guidelines czyta kod; nie widzi kolejności fokusu w runtime, kontrastu tekstu na zdjęciach ani wolnego skryptu zewnętrznego. Wyjście: dodaj ślad z Chrome DevTools oraz test Playwright z axe dla strony i traktuj statyczny przegląd jako jedną z trzech bramek.

Agent „naprawia” uwagi, usuwając funkcje. Poproszony o wyczyszczenie detektora, usuwa animację albo formularz. Wyjście: napisz w prompcie, że wygląd i zachowanie nie mogą się zmienić, wymagaj liczby uwag przed i po, a w diffie przeglądaj podsumowanie usuniętych komponentów zamiast każdej linii.

Porady mobilne i webowe się zderzają. Monorepo z aplikacją Next.js i aplikacją Expo dostaje porady React Native w plikach webowych. Wyjście: instaluj skille webowe w pakiecie webowym, a mobilne w pakiecie mobilnym (zakres projektu w każdym katalogu), a nie w katalogu głównym monorepo.

Jak sprawdzić skrypty i hooki skilla przed wdrożeniem w zespole, opisuje bezpieczeństwo łańcucha dostaw skilli.

Dokąd dalej ze skillami frontendowymi

Instalowanie i zarządzanie skillami CLI skills, pluginy, zakres projektu i rutyna aktualizacji.

Automatyzacja przeglądarki dla agentów Playwright, Chrome DevTools i agent-browser: który sterownik do którego zadania.

Testy dostępności Zamień etap przeglądu w automatyczne kontrole w CI.

Przepisy frontendowe Prompty do pracy z React, Next.js, Vue i Angularem.

Najlepsze skille backendowe Ten sam wybór dla API, baz danych i infrastruktury.

Najlepsze pluginy Pluginy łączące skille z serwerami MCP, z ich kosztem kontekstu.