claude-code-nextjs-skills

In the author's own words, from each skill's SKILL.md.

• ai-app

  Builds full-stack Next.js AI applications with the AI SDK and ai-elements. Use when creating a chatbot, agent dashboard or custom AI application.

  skills/ai-app/SKILL.md on GitHub (opens in a new tab)

• ai-elements

  Builds AI chat interfaces with AI Elements components copied into the project. Use when adding or composing conversations, messages, prompt inputs, attachments, reasoning, tool output or sources in an AI SDK application.

  skills/ai-elements/SKILL.md on GitHub (opens in a new tab)

• ai-sdk-6

  Vercel AI SDK v6 development, for projects already on ai@6. Use when building or maintaining AI agents, chatbots, tool integrations, streaming apps, or structured output in a v6 codebase. New projects and ai@7 code use ai-sdk-7; an unknown version goes through ai-sdk. Covers ToolLoopAgent, useChat, generateText, streamText, tool approval, smoothStream, provider tools, MCP integration, and Output…

  skills/ai-sdk-6/SKILL.md on GitHub (opens in a new tab)

• ai-sdk-7

  Vercel AI SDK v7 development and migration. Use when building or upgrading AI SDK 7 apps, especially ToolLoopAgent, WorkflowAgent, HarnessAgent, Claude Code/Codex/Pi harnesses, runtimeContext, toolsContext, toolApproval, telemetry, reasoning, file or skill uploads, realtime, video generation, or v6-to-v7 breaking changes. For AI SDK v6 code use ai-sdk-6; for version discovery and general doc look…

  skills/ai-sdk-7/SKILL.md on GitHub (opens in a new tab)

• ai-sdk

  Answer questions about the AI SDK and help build AI-powered features. Use when developers ask about Vercel AI SDK, generateText, streamText, ToolLoopAgent, useChat, providers, tools, structured output, embeddings, streaming, or adding AI to an app. First identify the installed major version and route version-specific work: use ai-sdk-7 for AI SDK 7 features/migrations such as WorkflowAgent, Harne…

  skills/ai-sdk/SKILL.md on GitHub (opens in a new tab)

• cache-components

  Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). Use when implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, instant navigation validation, 'use cache: private', pass-through/interleaving patterns, GE…

  skills/cache-components/SKILL.md on GitHub (opens in a new tab)

• chrome-devtools

  Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance (LCP/CLS/INP), or verify visual output with real runtime data. Complements Playwright — use this for live debugging and performance work, Playwright for stable E2E test suites.

  skills/chrome-devtools/SKILL.md on GitHub (opens in a new tab)

• frontend-design

  Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

  skills/frontend-design/SKILL.md on GitHub (opens in a new tab)

• go

  Opens the running app in a browser and verifies that recent UI changes actually work. Use for any quick smoke test of recent work — "go", "test in browser", "check in browser", "make sure it works", "verify it works", "did it work", "works on mobile" — including when the user appends "...and make sure it works" to a UI request. For design critique, use go-ui or web-design-guidelines.

  skills/go/SKILL.md on GitHub (opens in a new tab)

• handoff

  Write or update a HANDOFF.md so a fresh agent can continue this work. Use when the user says "handoff", "compact this", "context is full", or "/clear and continue".

  skills/handoff/SKILL.md on GitHub (opens in a new tab)

• hetzner-cloud

  Manage Hetzner Cloud infrastructure with the `hcloud` CLI — servers, networks, firewalls, load balancers, volumes, DNS zones, SSH keys, primary/floating IPs, snapshots, certificates, placement groups, storage boxes. Use whenever the user mentions Hetzner, hcloud, VPS provisioning, or Hetzner location codes (fsn1, hel1, nbg1, ash, hil, sin) — even if they don't say "hcloud". CLI-only; does NOT cov…

  skills/hetzner-cloud/SKILL.md on GitHub (opens in a new tab)

• icons

  Sources icons, country flags, file-type marks and brand logos that fit the app's existing visual language. Use when adding an icon, finding an official logo, building a language switcher, or the project's icon library has no match. Covers Iconify and svgl; use frontend-design for overall visual direction and shadcn for general component installation.

  skills/icons/SKILL.md on GitHub (opens in a new tab)

• next-best-practices

  Next.js App Router best practices covering file conventions, RSC boundaries, async APIs, data patterns, hydration errors, metadata, route handlers, image/font optimization, and bundling. Use when writing or reviewing Next.js code to prevent hydration errors, RSC violations, data waterfalls, and configuration mistakes.

  skills/next-best-practices/SKILL.md on GitHub (opens in a new tab)

• nextjs-chatbot

  Production Next.js web-chat integration: tool approval, persisted conversations, tool result UI, grounded retrieval, follow-up suggestions and embedded widgets. Use when building or debugging a web chatbot that needs these features. Use ai-app for scaffolding and ai-sdk for general SDK APIs; multi-platform bots use Chat SDK.

  skills/nextjs-chatbot/SKILL.md on GitHub (opens in a new tab)

• nextjs-seo

  Next.js App Router SEO implementation and audits. Use for metadata and social images, sitemap/robots, canonicals and localization, structured data, Core Web Vitals evidence, AI crawler policy or search-indexing diagnosis. Not for general Next.js feature work unrelated to SEO.

  skills/nextjs-seo/SKILL.md on GitHub (opens in a new tab)

• nextjs-shadcn

  Builds distinctive Next.js interfaces with shadcn/ui, choosing typography, styling and purposeful visual effects for the product. Use when creating or polishing a Next.js + shadcn app, page or component, including themes, presets, backgrounds and design-system lint. Uses frontend-design for substantial visual direction and icons for asset sourcing.

  skills/nextjs-shadcn/SKILL.md on GitHub (opens in a new tab)

• openai-agents-sdk

  OpenAI Agents SDK (Python) development. Use when building AI agents, multi-agent handoffs, function tools, guardrails, sessions, streaming, or tracing with the `openai-agents` / `agents` Python package — including Azure OpenAI via LiteLLM. Triggers on imports from `agents`, uses of `Runner.run_sync`/`Runner.run_streamed`, `@function_tool`, `AgentOutputSchema`, `SQLiteSession`, or questions about…

  skills/openai-agents-sdk/SKILL.md on GitHub (opens in a new tab)

• postgres-semantic-search

  Builds and tunes PostgreSQL retrieval with pgvector, full-text search, pg_trgm, hybrid fusion, ParadeDB BM25 and reranking. Use for search/RAG implementation, weak results, filtered ANN scans, non-English corpora or retrieval evaluation. For general schema, RLS and query tuning unrelated to retrieval, use supabase-postgres-best-practices.

  skills/postgres-semantic-search/SKILL.md on GitHub (opens in a new tab)

• react-best-practices

  React and Next.js performance optimization guide from Vercel Engineering (70 rules in 8 categories). Use when writing, reviewing, or refactoring React/Next.js code to eliminate waterfalls, reduce bundle size, prevent re-renders, optimize Server Components, or fix performance bottlenecks. Triggers on data fetching, Promise.all, Suspense, useMemo, dynamic imports, bundle analysis, code-splitting, a…

  skills/react-best-practices/SKILL.md on GitHub (opens in a new tab)

• shadcn

  Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch t…

  skills/shadcn/SKILL.md on GitHub (opens in a new tab)

• skill-creator

  Creates new skills, modifies and improves existing skills, and measures skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.

  skills/skill-creator/SKILL.md on GitHub (opens in a new tab)

• supabase-postgres-best-practices

  Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill BEFORE writing or changing anything that lives in a Postgres database: creating or altering tables and columns (including choosing column types), schema design, migrations and declarative schema files, RLS policies and the tests that verify them, indexes, triggers, database functions, queues and schedul…

  skills/supabase-postgres-best-practices/SKILL.md on GitHub (opens in a new tab)

• vercel-react-view-transitions

  Guide for implementing smooth, native-feeling animations using React's View Transition API (the `ViewTransition` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back…

  skills/vercel-react-view-transitions/SKILL.md on GitHub (opens in a new tab)

• web-design-guidelines

  Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

  skills/web-design-guidelines/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod… 280k stars · 30 skills
• ponytailby DietrichGebert Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote. 164k stars · 6 skills
• ui-ux-pro-max-skillby nextlevelbuilder An AI skill that provides design intelligence for building professional UI/UX across multiple platforms. 136k stars · 7 skills
• cavemanby JuliusBrussee 🪨 why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman. 113k stars · 20 skills
• awesome-claude-skillsby ComposioHQ A curated list of awesome Claude Skills, resources, and tools for customizing Claude AI workflows 77.2k stars
• last30days-skillby mvanhorn AI agent skill that researches any topic across Reddit, X, YouTube, HN, Polymarket, and the web - then synthesizes a grounded summary 64.4k stars · 1 skill