nextjs-claude-code

Vercel AI SDK expert guidance. Use when building AI-powered features — chat interfaces, text generation, structured output, tool calling, agents, MCP integration, streaming, embeddings, reranking, image generation, or working with any LLM provider.

Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI optimization, environment variables, internal packages, monorepo structure/best practices, and boundaries. Use when user: configures tasks/workflows/pipelines, creates packages, sets up monorepo, shares code between apps, runs changed/affected packages, debugs cache, or has apps/packages directories.

Implement a feature. Supports resuming interrupted work and team mode (--team flag). Reads spec/feature/[name]/spec.md and design.md, generates PLAN.md inside the feature directory, waits for user confirmation, then implements and verifies the feature.

Generate or update MSW mock handlers and fixtures from feature spec API contracts. Use to set up mock infrastructure, generate feature-specific mocks, or check mock status.

AI-driven browser testing against feature specs. Default mode reads spec REQs and autonomously tests in a real browser via Playwright MCP. Also supports running existing Playwright test files, visual regression, and accessibility audits.

Check how well the current implementation matches the feature spec and evaluate code quality. Runs spec compliance review followed by code quality review. Optionally runs unit/integration test audit, logging audit, and security audit when strategy files exist. Does not modify code.

Run tests for a feature based on TEST_STRATEGY.md and feature-level TEST.md. Handles unit/integration test workflows. Use --setup to configure test strategy. Use /qa for browser, visual, and accessibility testing.

Ideation-to-validation pipeline. Asks forcing questions in the user's language, generates alternative approaches, runs C-level review (CEO/CTO/CPO/CMO/CDO), and produces validated concept documents. Optionally converts to /spec input.

Transform an existing project into spec-driven development. Analyzes a legacy codebase from an external folder, accepts change specifications, and generates feature specs (spec.md + design.md) that blend existing logic with requested modifications. Auto-runs /init if needed.

Run NCC plugin E2E tests. Supports quick (4 projects), full (4+monorepo+modifications), install-test (npx vs marketplace with non-spec-dev focus), or custom test modes. Validates spec→dev flow, skills, hooks, code quality, security, a11y, and token efficiency.

Structured brainstorming and design process. Enforces exploration and user approval before any implementation. Covers project context analysis, approach proposals, design documentation, and spec review.

Write persuasive marketing copy for web pages. Covers homepage, landing page, pricing page, and feature page copy with frameworks for headlines, CTAs, and conversion-focused structure.

Product strategy frameworks for startup and product teams. Covers vision, competitive analysis (Porter, PESTLE), market sizing, SWOT, personas, BMC, Lean Canvas, pricing, PRD, and user stories.

Audit and improve logging practices. Review logging for a specific feature, audit the entire project, or set up logging infrastructure.

Audit project security posture. Review for OWASP Top 10 vulnerabilities, secrets, injection flaws, and auth gaps. Use --setup to configure security strategy.

Define or update a feature specification. Provide a feature name and description with optional Figma link. Updates spec/feature/[name]/spec.md and design.md without touching source code.

Report a bug or feature request for the NCC plugin to GitHub. Sanitizes all project-specific and personal information before submission. Always asks for user confirmation before creating the issue. Use when encountering NCC plugin issues, bugs, or wanting to request new features.

Run NCC plugin E2E tests. Supports quick (4 projects), full (4+monorepo+modifications), or custom test modes. Installs from current dev branch, validates spec→dev flow, skills, hooks, code quality, security, a11y, and token efficiency.

Reference guide for major Claude Code plugins and spec-driven development tools. Covers GSD, gstack, Everything Claude Code, Oh My OpenAgent, Superpowers, Vercel Plugin, Spec Kit, and OpenSpec. Use this skill when the user asks about Claude Code plugins, plugin comparisons, spec-driven development (SDD), workflow tools, or wants to learn features from other plugins. Also trigger on keywords like "plugin reference", "GSD", "gstack", "ECC", "superpowers", "spec-kit", "openspec", "SDD", "spec-driven", "plugin comparison".

Advanced Claude Code usage guide covering token optimization, memory/context management, subagent architecture, parallelization strategies, verification loops, continuous learning, environment setup, workflow patterns, and agentic security. Use this skill whenever the user asks about Claude Code tips, best practices, workflows, optimization, context management, subagents, parallel work, efficient development setup, CLAUDE.md, hooks, skills creation, session management, or agent security. Also trigger on keywords like "Claude Code tips", "save tokens", "context management", "subagent", "parallel work", "workflow optimization", "CLAUDE.md", "memory persistence", "agent security", "prompt injection", "sandboxing".

Explore and validate feature design before writing specs. Uses Socratic questioning to refine the idea, compares 2-3 approaches with trade-offs, and produces a design summary approved by the user before handing off to /spec.

Create production-ready GitHub Actions workflows for automated testing, building, and deploying applications. Use when setting up CI/CD with GitHub Actions, automating development workflows, or creating reusable workflow templates.

Analyze application logs to identify errors, performance issues, and security anomalies. Use when debugging issues, monitoring system health, or investigating incidents. Handles various log formats including Apache, Nginx, application logs, and JSON logs.

Systematically analyze and fix a bug. Uses hypothesis-driven debugging, records the process in spec/DEBUG.md, and updates spec/STATE.md on resolution.

Set up or update CI/CD pipeline. Analyzes project stack, git strategy, and test strategy to generate deployment configurations. Uses find-skills for platform-specific guidance.

Analyze changes and create a commit with auto-generated message following the project's commit convention. Links to feature spec REQ numbers when a feature name is provided.

Force-complete a feature by looping until all REQs in spec.md are satisfied. Runs reviewer → targeted lead-engineer → re-review cycle. Use after /dev when you want guaranteed spec compliance.

Create a pull request with auto-generated body from feature spec. Auto-detects target branch from GIT_STRATEGY.md. Optionally updates changelog and bumps version.

Build type-safe validated forms in React using React Hook Form and Zod schema validation. Single schema works on both client and server for DRY validation with full TypeScript type inference via z.infer. Use when: building forms with validation, integrating shadcn/ui Form components, implementing multi-step wizards, handling dynamic field arrays with useFieldArray, or fixing uncontrolled to controlled warnings, resolver errors, async validation issues.

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

Architecture pattern reference for Next.js & React projects. Covers Flat, Feature-Based, FSD, and Monorepo patterns with core principles, file placement, and import boundaries.

Optimize images to WebP format. Scans a directory, converts jpg/png/gif/bmp/tiff to WebP using sharp, reports compression results. Run with input/output path arguments.

UI component library reference guide. Use when building UI without a design, choosing a component library, or looking for animation/effect inspiration. Covers headless, styled, animation, and chart libraries with llms.txt links for AI-readable documentation.