Search Results for "next.js"
ai-sdk
★ 4Vercel AI SDK v6 patterns for streaming chat, structured outputs, agents, and tool workflows.Load when building AI-powered features with Next.js, React, or Node.js.
backend-auth-js
★ 4Authentication library for Next.js applications (NextAuth.js v5). Use when building Next.js 14+ apps that need OAuth providers (GitHub, Google, etc.), credentials login, or session management. Provides adapters for Prisma, Drizzle, and other databases. Choose Auth.js over Passport.js for Next.js App Router projects.
backend-trpc
★ 4Type-safe API layer for TypeScript full-stack applications. Use when building APIs that need end-to-end type safety between client and server WITHOUT code generation. Ideal for Next.js, React, and Express apps where both frontend and backend are TypeScript. Choose tRPC over REST/GraphQL when you control both ends and want zero runtime overhead for type checking.
frontend-debug-linting
★ 4Quality gates for frontend code. ALWAYS use after writing React/Next.js code and before delivery. Covers: ESLint linting, TypeScript type-checking, Prettier formatting, browser console debugging. Catches errors before they reach users.
frontend-google-fonts
★ 4Typography setup with Google Fonts for Next.js + Tailwind projects. Use when choosing fonts, need font pairing recommendations (SaaS, editorial, corporate presets), or setting up optimized font loading. Includes ready-to-use configurations and performance best practices.
frontend-master
★ 4Master skill for frontend development with Next.js + React + Tailwind stack. Decision framework for choosing components, animations, assets, and tools. Routes to specialized skills for implementation details. Use as entry point for any frontend task.
frontend-shadcn
★ 4DEFAULT foundation component library for all React/Next.js UI needs. Use as the starting point for any project needing buttons, inputs, dialogs, forms, tables, navigation, modals, dropdowns, and other standard UI elements. Built on Radix UI + Tailwind CSS. Check shadcn FIRST before reaching for other libraries.
add-component
★ 4Add a new component following Next.js 15 and shadcn/ui best practices
add-feature
★ 4Add a new feature to the Next.js app following best practices
tailwind-conventions
★ 4Consistent Tailwind CSS patterns for React/Next.js applications. Use when styling components with Tailwind, adding responsive design, implementing dark mode, or organizing utility classes.
nextjs-app-router
★ 4Complete Next.js App Router fundamentals system. PROACTIVELY activate for: (1) App directory structure and conventions, (2) Layouts and templates, (3) Loading and error boundaries, (4) Route groups and organization, (5) Parallel routes setup, (6) Metadata and SEO, (7) Server vs Client Components, (8) Navigation patterns. Provides: File conventions, layout nesting, streaming UI, error handling, metadata templates. Ensures correct App Router architecture with proper component boundaries.
nextjs-data-fetching
★ 4Complete Next.js data fetching system. PROACTIVELY activate for: (1) Server Component data fetching, (2) Parallel and sequential fetching, (3) Streaming with Suspense, (4) Route Handlers (API routes), (5) Client-side fetching with SWR/TanStack Query, (6) generateStaticParams for static generation, (7) Revalidation strategies, (8) Error handling for data. Provides: Fetch patterns, caching options, streaming UI, API route handlers, client fetching setup. Ensures optimal data loading with proper caching and error handling.
ffmpeg-webassembly-workers
★ 4Complete browser-based FFmpeg system. PROACTIVELY activate for: (1) ffmpeg.wasm setup and loading, (2) Browser video transcoding, (3) React/Vue/Next.js integration, (4) SharedArrayBuffer and COOP/COEP headers, (5) Multi-threaded ffmpeg-core-mt, (6) Cloudflare Workers limitations, (7) Custom ffmpeg.wasm builds, (8) Memory management and cleanup, (9) Progress tracking and UI, (10) IndexedDB core caching. Provides: Framework-specific examples, header configuration, common operation recipes, performance optimization, troubleshooting guides. Ensures: Client-side video processing without server dependencies.
nextjs-authentication
★ 4Complete Next.js authentication system. PROACTIVELY activate for: (1) NextAuth.js (Auth.js) setup, (2) OAuth providers (GitHub, Google), (3) Credentials provider, (4) Session management (JWT/database), (5) Protected routes with middleware, (6) Role-based access control (RBAC), (7) Login/registration forms, (8) Authorization patterns, (9) Type augmentation for sessions. Provides: Auth.js configuration, middleware protection, session hooks, RBAC patterns, login forms. Ensures secure authentication with proper session handling.
nextjs-server-actions
★ 4Complete Next.js Server Actions system. PROACTIVELY activate for: (1) Defining Server Actions with 'use server', (2) Form handling with actions, (3) useActionState for form state, (4) useFormStatus for pending states, (5) Optimistic updates with useOptimistic, (6) Validation with Zod, (7) Authorization in actions, (8) File uploads, (9) Revalidation after mutations. Provides: Action patterns, form integration, validation, optimistic UI, error handling. Ensures secure server mutations with proper validation and UX.
nextjs-routing-advanced
★ 4Complete Next.js advanced routing system. PROACTIVELY activate for: (1) Dynamic routes with [slug], (2) Catch-all routes [...slug], (3) Route groups for organization, (4) Parallel routes with @slot, (5) Intercepting routes for modals, (6) Private folders with _prefix, (7) Route Handlers (API), (8) Search params handling, (9) Programmatic navigation. Provides: Dynamic routing patterns, parallel route slots, modal interception, API handlers. Ensures flexible routing with proper URL structure.
nextjs-middleware
★ 4Complete Next.js Middleware system. PROACTIVELY activate for: (1) Creating middleware.ts, (2) Matcher configuration, (3) Authentication protection, (4) Role-based access control, (5) Redirects and rewrites, (6) Internationalization (i18n), (7) Security headers (CSP, CORS), (8) Geolocation routing, (9) Bot detection, (10) Rate limiting patterns. Provides: Middleware patterns, matcher syntax, auth guards, header manipulation, cookie handling. Ensures Edge-optimized request handling with proper security.
nextjs-deployment
★ 4Complete Next.js deployment system. PROACTIVELY activate for: (1) Vercel deployment and configuration, (2) Self-hosted Node.js deployment, (3) Docker containerization, (4) Static export with output:'export', (5) Edge Runtime configuration, (6) Environment variables, (7) CI/CD with GitHub Actions, (8) Health checks and monitoring, (9) Production optimization. Provides: Dockerfile, docker-compose, PM2 config, vercel.json, GitHub Actions workflows. Ensures production-ready deployment with proper configuration.
Frequently Asked Questions
What is a Claude Skill?
It is a modular, protocol-based instruction set that enables Claude to perform specific tasks autonomously and efficiently.
How is this different from regular prompts?
Skills use the official Anthropic protocol for better token efficiency and automatic triggering compared to static prompts.
Does it support the new Claude Code CLI?
Yes, we provide specialized one-click installation commands designed specifically for Claude Code and OpenCode.
Can I use these skills in Cursor?
Absolutely, our library is fully compatible with popular IDEs and extensions including Cursor, Codex, and AntiGravity.
Are the skills on the website free to use?
Most skills in our 90,000+ database are free and open-source for the community to download and deploy.
How can I contribute my own skills?
Developers can easily share their work by submitting their own skill repositories through our community portal.