Updated 3d ago
by laguagu
claude-code-nextjs-skills
Claude Code skills for AI apps • Next.js 16 • AI SDK 7 • pgvector • bun
72 GitHub stars (72)
+5 in 30 days
| Period | New stars |
|---|---|
| Oct 1 | 0 |
| Oct 2 | 0 |
| Oct 3 | 0 |
| Oct 4 | 0 |
| Oct 5 | 0 |
| Oct 6 | 0 |
| Oct 7 | 0 |
| Oct 8 | 0 |
| Oct 9 | +1 |
| Oct 10 | 0 |
| Oct 11 | 0 |
| Oct 12 | 0 |
| Oct 13 | 0 |
| Oct 14 | 0 |
| Oct 15 | 0 |
| Oct 16 | 0 |
| Oct 17 | 0 |
| Oct 18 | 0 |
| Oct 19 | +2 |
| Oct 20 | 0 |
| Oct 21 | +1 |
| Oct 22 | 0 |
| Oct 23 | 0 |
| Oct 24 | −1 |
| Oct 25 | 0 |
| Oct 26 | 0 |
| Oct 27 | 0 |
| Oct 28 | 0 |
| Oct 29 | 0 |
| Oct 30 | 0 |
| Oct 31 | 0 |
| Nov 1 | +1 |
| Nov 2 | 0 |
| Nov 3 | +1 |
| Nov 4 | 0 |
| Nov 5 | 0 |
- 23 skills (23 skills found in its SKILL.md files)
- 18 forks (18 forks)
- 3d ago last update (Last updated 3d ago)
Install
Skills CLI
npx skills add laguagu/claude-code-nextjs-skills
Asks which skills and agents to install. Just one: npx skills add laguagu/claude-code-nextjs-skills --skill agent-harness-review — add -g for every project.
Claude Code
git clone https://github.com/laguagu/claude-code-nextjs-skillscp -r "claude-code-nextjs-skills/skills/agent-harness-review" ~/.claude/skills/
Copies the agent-harness-review skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add laguagu/claude-code-nextjs-skills
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
agent-harness-review
Reviews an agent harness or agent design against Anthropic's agent and Claude Opus 5.5 guidance, Cognition's context principles and 2026 research on skill routing and skill-induced failures. Covers when subagents or parallel agents pay off, how to brief them, how many skills, plugins, MCP servers and hooks load every session, tool design and proportionate verification. Use when auditing a Claude…
skills/agent-harness-review/ on GitHub (opens in a new tab)SKILL.md -
ai-app
Builds full-stack Next.js AI applications with the AI SDK and the shadcn/ui AI Elements patterns. Use when creating a chatbot, agent dashboard or custom AI application.
skills/ai-app/ on GitHub (opens in a new tab)SKILL.md -
ai-elements
Maintains AI chat UI built from elements.ai-sdk.dev AI Elements components already copied into the project. Use when changing or debugging those components (conversations, messages, prompt inputs, attachments, reasoning, tool output, sources). New chat UI uses the shadcn/ui AI Elements patterns (`shadcn` skill).
skills/ai-elements/ on GitHub (opens in a new tab)SKILL.md -
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, provider tools, MCP integration, and Output patterns.
skills/ai-sdk-6/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
chrome-devtools
Tests in real browsers via Chrome DevTools MCP. Use when debugging live browser behavior — 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/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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 web-design-guidelines.
skills/go/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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 through its native client or LiteLLM. Triggers on imports from `agents`, uses of `Runner.run_sync`/`Runner.run_streamed`, `@function_tool`, `AgentOutputSchema`, `SQLiteSess…
skills/openai-agents-sdk/ on GitHub (opens in a new tab)SKILL.md -
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's supabase-postgres-best-practices skill.
skills/postgres-semantic-search/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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", "switch to -…
skills/shadcn/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md -
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/ on GitHub (opens in a new tab)SKILL.md
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.