Otwarty ekosystem reużywalnych "umiejętności" dla Cursor, Claude Code, Windsurf i innych. Zamiast walczyć z AI - naucz go swoich standardów.
Instaluje 10 lat doświadczenia Vercel z React i Next.js jako reużywalne skille dla Twojego agenta AI.
Znasz to uczucie. Prosisz Claude Code o komponent React, dostajesz coś co działa, ale kompletnie ignoruje Twoje konwencje. Używa useEffect gdzie nie trzeba. Importuje rzeczy których nie używasz. Tworzy własne utility zamiast używać tych z projektu.
Dotychczas były dwa rozwiązania:
Vercel Skills to trzecia opcja: proste pliki Markdown z instrukcjami i skryptami, pakowane jak paczki npm. Instalujesz raz - agent uczy się Twoich standardów.
Skills to otwarty format pakowania "umiejętności" dla AI agentów. Każdy skill to folder zawierający:
Format jest standaryzowany - ten sam skill działa w 15+ różnych agentach: Cursor, Claude Code, Windsurf, GitHub Copilot, Google Antigravity, Codex i innych.
vercel-labs/agent-skills zawiera 3 kluczowe skille oparte na 10 latach doświadczenia z React i Next.js.
40+ reguł performance dla React i Next.js. Eliminacja waterfalls, bundle size, SSR, re-rendery.
100+ reguł UX/UI. Accessibility, focus, formularze, animacje, typography, dark mode, i18n.
Deploy z agenta na Vercel. Auto-detect frameworka, preview URL, claimable link.
To nie jest generyczny "pisz czysty kod". To konkretne reguły z konkretnymi przykładami, posortowane według wpływu na performance:
Eliminacja sekwencyjnych fetch, parallel data loading
Dynamic imports, tree shaking, code splitting
SSR optimization, streaming, edge rendering
SWR patterns, cache invalidation, optimistic updates
useMemo, useCallback, React.memo prawidłowo
Virtualization, lazy loading, suspense boundaries
Event delegation, debouncing, RAF
Każda reguła zawiera anti-pattern i poprawną wersję. Agent może bezpośrednio mapować problemy w Twoim kodzie na te reguły i proponować konkretne fixy.
Przykład użycia: Mówisz do agenta: "Review this component for React performance issues". Agent sprawdza zainstalowane skille, znajduje react-best-practices i przegląda Twój kod według tych 40+ reguł.
Skille ładują się progresywnie. Możesz mieć setki bez zapychania okna kontekstowego.
Żadnych serwerów, protokołów, konfiguracji. To po prostu Markdown + skrypty w repo na GitHubie.
Instalujesz raz, działa wszędzie. Aktualizacje przez npx skills update. Git-native.
Ten sam skill działa w Cursor, Claude Code, Windsurf i 12 innych agentach.
TL;DR: MCP to protokół do komunikacji z zewnętrznymi serwisami. Skills to sposób na nauczenie agenta Twoich standardów i konwencji. Różne narzędzia do różnych problemów.
Instaluje wszystkie skille Vercel (React, Design, Deploy)
Tylko React skill, globalnie dla wszystkich projektów
Lista dostępnych skilli przed instalacją
CLI automatycznie wykrywa zainstalowane agenty i kopiuje skille do odpowiednich lokalizacji:
Vercel uruchomił też skills.sh - katalog i leaderboard dla skill packages. Możesz:
To trochę jak npm dla AI agentów - centralny registry gdzie możesz znaleźć i udostępnić best practices dla konkretnych technologii, frameworków czy workflow.
Skills działają z praktycznie każdym popularnym agentem AI do kodowania:
Jeśli budujesz własne agenty z AI SDK Vercel, możesz użyć skilli przez bash-tool:
import {
experimental_createSkillTool as createSkillTool,
createBashTool,
} from "bash-tool";
import { ToolLoopAgent } from "ai";
// Discover skills and get files to upload
const { skill, files, instructions } = await createSkillTool({
skillsDirectory: "./skills",
});
// Create bash tool with skill files
const { tools } = await createBashTool({
files,
extraInstructions: instructions,
});
// Use both tools with an agent
const agent = new ToolLoopAgent({
model,
tools: { skill, ...tools },
});To daje Twojemu agentowi dostęp do wszystkich publicznych skilli, lub możesz napisać własne prywatne skille i używać ich wewnętrznie.
Skill to po prostu folder z określoną strukturą. Możesz stworzyć własny dla:
Opublikuj na GitHubie i inni będą mogli zainstalować przez npx skills add twoj-user/my-skill
Vercel Skills rozwiązuje realny problem - AI agenty ignorują nasze konwencje. Rozwiązanie jest elegancko proste: Markdown + skrypty + git. Żadnych serwerów, protokołów, konfiguracji.
Czy to zmieni wszystko? Nie od razu. Ale to pierwszy poważny krok w kierunku standaryzacji "wiedzy" dla AI agentów. I fakt że działa z 15+ narzędziami od razu - to jest wartość.
Rekomendacja: Jeśli używasz Cursor, Claude Code lub innego agenta - zainstaluj react-best-practices i zobacz różnicę w jakości sugestii.