claude-code-nextjs-skills
🥈SilverClaude Code skills for building AI applications with Next.js 16, AI SDK 6, pgvector, bun, and Ralph Loop. Ideal for operations teams automating full-stack AI app development and deployment.
4700Updated 2mo ago
Intermediate30min to implementautomation
Saves ~150 min per use
Quick InstallView Source
git clone https://github.com/laguagu/claude-code-nextjs-skills.gitWorks with:
Claude
Overview
About This Skill
Claude Code AI Skills provides a curated collection of skills for building production AI applications with Next.js 16 and the Vercel AI SDK 6. The skill pack includes generators for full-stack AI apps, chatbots, and semantic search systems using pgvector, all optimized for the bun runtime. Skills cover app scaffolding, React component design with shadcn/ui, Next.js best practices, AI agent development, and PostgreSQL semantic and hybrid search. Operations teams can use these skills to automate the development and deployment of AI-powered dashboards, chatbots with human-in-the-loop workflows, and production-grade frontend interfaces.
How to Use
Copy or symlink skills to ~/.claude/skills/ (global) or .claude/skills/ (project). Start a full-stack AI app with /ai-app or use individual skills like /ai-sdk-6 or /postgres-semantic-search as needed. Optionally pair with Chrome DevTools MCP and Next.js DevTools MCP servers for enhanced browser and framework inspection.
Use Cases
Generate full-stack AI chatbots with persistence and GDPR compliance
Build semantic search systems with pgvector and hybrid ranking
Scaffold Next.js 16 applications with shadcn/ui components and bun
Implement AI agents with streaming and tool use via AI SDK 6
Tags
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/laguagu/claude-code-nextjs-skillsRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
I need to build a full-stack AI application using Next.js 16, AI SDK 6, and pgvector. The app should [DESCRIBE FUNCTIONALITY]. Here's my existing codebase: [CODEBASE]. Help me implement the following features: [FEATURES]. Also, provide a deployment plan using Bun and Ralph Loop.
Example Output
Based on your requirements, I'll outline a plan to build a document analysis AI application with the specified technologies. First, let's set up the Next.js 16 project structure with API routes for your AI endpoints. We'll use the AI SDK 6 to create a document processing pipeline that extracts text, performs semantic analysis, and stores results in pgvector for efficient similarity searches. For the frontend, we'll implement a React component that allows users to upload documents and view analysis results. The deployment plan will involve using Bun to bundle your application and Ralph Loop for continuous deployment to your preferred cloud provider. Here's the initial code structure to get started:
Apply to these tools
Browse all toolsBun
Achieve ultra-fast JavaScript execution with built-in bundling and TypeScript support.
Ralph
Meet your new AI Sales Copywriter 10x Faster and 2x Better Sales Content
Claude
AI assistant built for thoughtful, nuanced conversation
Microsoft Teams
Get more done every day with Microsoft Teams – powered by AI
Respell
Agentic AI Workflow platform
Notion
Connected workspace for docs, wikis, and projects
Compatible MCP servers
Browse all MCP servers
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan