Nextjs

Das nextjs-turbopack Skill hilft dir, Turbopack in Next.js 16+ für schnellere lokale Entwicklung, HMR und Entscheidungen rund um den Bundler einzusetzen. Nutze es als praxisnahen nextjs-turbopack Leitfaden für Installation, Nutzung und die Frage, wann du in Frontend-Development-Workflows wieder zu webpack wechseln solltest.

frontend-patterns ist eine praxisnahe Skill für die Frontend-Entwicklung mit React und Next.js und hilft dir dabei, wartbare Muster für Komponenten, State, Formulare, Routing, Barrierefreiheit und Performance auszuwählen. Nutze den frontend-patterns-Leitfaden, wenn du klare Umsetzungsanleitungen und eine fundierte Musterwahl brauchst – nicht nur allgemeine Best Practices.

backend-patterns ist eine Skill für Backend-Entwicklung mit Node.js, Express und Next.js API-Routen. Sie unterstützt bei API-Design, Repository-/Service-/Controller-Schichten, Validierung, Caching, Background Jobs und Datenbankoptimierung, damit du sauberere serverseitige Systeme mit weniger Rätselraten bauen kannst.

Nutze den shadcn-Skill, um den Projektkontext zu prüfen, die passenden CLI-Befehle auszuführen, Komponenten zu installieren und UI anhand dokumentierter Muster für base vs radix, Formulare, Theming und Registries zusammenzustellen.

Die fullstack-developer Skill ist ein wiederverwendbares Prompt-Paket für moderne JavaScript- und TypeScript-Web-App-Arbeit rund um React, Next.js, Node.js, APIs, Datenbanken, Auth und Deployment. Sie eignet sich besonders für Planung und Umsetzung über mehrere Schichten hinweg und setzt auf eine einzelne `SKILL.md`, die Umfang und Workflow definiert, statt Scripts oder Vorlagen mitzuliefern.

ui-ux-pro-max ist eine umfassende KI-Unterstützung für UI/UX-Design. Die Skill bietet strukturierte Empfehlungen zu Layouts, Stilen, Farbsystemen, Typografie und UX-Regeln für Web- und Mobile-Projekte. Ideal für Entwickler und Teams, die praxisnahe Designentscheidungen für React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, React Native, Flutter und HTML/CSS treffen möchten. Perfekt zum Planen, Überprüfen und Optimieren von UIs mit kuratiertem Designwissen.

nextjs-app-router-patterns unterstützt Entwickler bei der Planung von Next.js-14+-App-Router-Architekturen, einschließlich Server Components, Streaming, Caching, Route Handlers und Server Actions für Full-Stack-Entwicklung und Migrationen vom Pages Router.

vercel-react-best-practices ist ein Vercel-Engineering-Skill, der KI-Agenten mit priorisierten Regeln zu Waterfalls, Bundle-Größe und Rendering hilft, React- und Next.js-Performance zu optimieren.

deploy-to-vercel ist eine Skill für Vercel-Deployments, die Repo-Status, lokale Projektverknüpfung, CLI-Authentifizierung und Team-Scope vor dem Deploy prüft. Standardmäßig nutzt sie Preview-Deployments, unterstützt Hilfsskripte und hilft dabei, die Deployment-URL mit weniger Rätselraten zurückzugeben.

Die source-driven-development Skill verankert frameworkspezifische Entwicklung in offiziellen Dokumentationen und hilft dabei, Patterns vor der Implementierung zu verifizieren. Sie eignet sich besonders für den Einsatz von source-driven-development in React, Vue, Next.js, Svelte, Angular und ähnlichen Stacks, wenn Korrektheit, belastbare Quellen und versionssensible Entscheidungen wichtig sind.

frontend-dev ist ein frontend-dev Skill zum Erstellen hochwertiger, produktionsreifer Webpages mit erstklassiger UI, cineastischer Motion, KI-generierten Medien, überzeugenden Texten und generativer Kunst. Verwende ihn für Landingpages, Marketingseiten, Produktseiten, Dashboards und andere Frontend-Aufgaben, bei denen Design, Inhalte und Implementierungsdetails eng aufeinander abgestimmt bleiben müssen.

fullstack-dev ist ein praxisnaher Leitfaden für die Full-Stack-Entwicklung. Er hilft dir, Backend-Architektur, API-Design, Authentifizierung, Datenfluss und die Frontend-Integration zu planen, bevor du mit dem Code beginnst. Er eignet sich für CRUD-Apps, Dashboards, Chat-Anwendungen und API-first-Umsetzungen und legt Wert auf den richtigen Ablauf, klare Rahmenbedingungen und entscheidungsreife Ergebnisse.

gsap-react ist der offizielle GSAP Skill für React und Next.js. Er behandelt useGSAP(), refs, gsap.context(), scoped selectors und Cleanup, damit du React-sichere Animationen ohne Re-render- oder Unmount-Bugs bauen kannst. Nutze diesen gsap-react-Guide, wenn du Hilfe bei Installation und Anwendung für die Frontend-Entwicklung brauchst.

next-best-practices ist eine praxisnahe Next.js-Skill für die Arbeit mit dem App Router. Sie behandelt Dateikonventionen, RSC-Grenzen, asynchrone APIs, Datenmuster, Route Handler, Bundling und Fehlerbehandlung.

next-cache-components erklärt Cache Components in Next.js 16: `cacheComponents` aktivieren, `use cache` nutzen, `cacheLife` setzen, `cacheTag` anwenden und dynamische Bereiche mit Suspense streamen.

Die Skill next-upgrade unterstützt beim Upgrade echter Next.js-Projekte mit offiziellen Migrationsleitfäden, Codemods, schrittweisen Versionssprüngen und abgestimmten Dependency-Updates.

Die Medusa-Skill hilft dir, Medusa für die Backend-Entwicklung einzurichten und zu erweitern. Nutze sie für ein Headless-Commerce-Backend, Admin-Tools, Module, API-Routen und praktische Medusa-Guide-Schritte für Installation, Setup und Nutzung mit Node.js und PostgreSQL.

netlify-frameworks ist ein Deployment-Guide, um Vite/React, Astro, TanStack Start, Next.js, Nuxt, SvelteKit und Remix auf Netlify zum Laufen zu bringen. Verwende ihn für netlify-frameworks bei Deployment, Adapter- und Plugin-Setup, SSR, API-Routen, Middleware und bei der Fehlersuche rund um frameworkspezifische Netlify-Integrationen.

supabase-nextjs unterstützt beim Aufbau von Next.js App Router-Apps mit Supabase-Auth, Storage und Realtime, während für typisierte Datenbankabfragen Drizzle ORM genutzt wird. Es passt zu Backend-Workflows, die geschützte Routen, serverseitiges Session-Handling und eine klare Trennung zwischen Server und Client benötigen.

posthog-analytics hilft Teams dabei, PostHog-Event-Tracking, Feature Flags und Dashboards für Frontend-Apps umzusetzen. Nutze diese posthog-analytics-Skill als praxisnahen Leitfaden für Installation, Nutzung und saubere Instrumentierung in Next.js-App-Router- oder React-Projekten.

vercel-react-best-practices ist ein leistungsorientierter Leitfaden für React- und Next.js-Arbeiten von Vercel Engineering. Nutzen Sie die vercel-react-best-practices-Skill, wenn Sie Komponenten, Routen oder das Data Fetching refaktorisieren, um Waterfalls zu reduzieren, Bundles zu verkleinern, das Rendering zu verbessern und Frontend-Code schneller auszuliefern.

vercel-deploy hilft dir, Apps und Websites mit minimalem Setup auf Vercel bereitzustellen. Die Skill ist auf Preview-first-Deployments, klare Installations- und Nutzungsschritte sowie einen verlässlichen Fallback ausgelegt, wenn die CLI nicht verfügbar ist oder die Authentifizierung fehlt. Nutze sie für schnelle, teilbare Links und veröffentliche Produktion nur dann, wenn es ausdrücklich verlangt wird.

render-deploy hilft dabei, eine Codebasis in einen Render-fähigen Deployment-Plan zu überführen – inklusive `render.yaml`-Blueprints oder direkter Service-Einrichtung. Verwende die render-deploy-Skill, wenn du eine praxisnahe Anleitung für Installation, Nutzung, Service-Auswahl, Umgebungsvariablen und Deployment-Prüfungen auf Render brauchst.

netlify-deploy ist eine auf Deployments ausgerichtete Skill für das Veröffentlichen von Webprojekten auf Netlify mit der Netlify CLI. Sie führt durch Authentifizierung, Site-Verknüpfung, Preview-Deployments, Production-Deployments und Prüfungen von netlify.toml, damit Nutzer vom lokalen Repo zur Live-URL mit weniger Rätselraten gelangen.