Search everything...

Stats

Actions

Available In

nextjs-plugin

Name: nextjs-plugin
Author: aratkruglik

By AratKruglik

Next.js full-stack React framework stack provider for SDLC marketplace. Multi-aspect ownership (backend + frontend). App Router, Server Components, Server Actions, Route Handlers, ISR/SSG/SSR. Reuses TypeScript and npm skills from nodejs-plugin.

Publisher marketplacenextjs-plugin@sdlc-marketplace · marketplace and plugin share one repository (aratkruglik/claude-sdlc)

npx claudepluginhub aratkruglik/claude-sdlc --plugin nextjs-plugin

Popularity

Stars

Top 25%

Med: 0·Avg: 848

Copy clicks

Med: 0·Avg: 2

What's Inside

Agents1

nextjs-architect

/nextjs-architect

Next.js full-stack implementer. Replaces vanilla `developer`/`node-architect`/`nest-architect`/`react-architect` when `next` is in dependencies. Multi-aspect ownership — covers BOTH backend (Route Handlers, Server Actions, middleware) AND frontend (App Router, React Server Components, Client Components, Suspense, metadata). Do NOT use for: plain Node.js backends (node-architect), NestJS projects (nest-plugin), pure React SPAs (react-architect), React Native (rn-architect), tests (qa-engineer), PRs (document-writer).

Skills5

nextjs-conventions

/nextjs-conventions

Next.js project structure, App Router conventions, file-based routing primitives, layouts, error boundaries, metadata, image and font optimization, configuration. Apply when implementing or modifying Next.js features. Use this skill to: - Pick the correct file convention (page/layout/loading/error/not-found/route/template/default). - Structure a feature within the App Router tree. - Set up metadata for SEO and OpenGraph. - Configure next.config.js for headers, redirects, image domains. - Use built-in fonts and images correctly. Do NOT use this skill for: - Server vs Client component boundaries (see server-component-patterns). - Data fetching patterns (see nextjs-data-fetching). - Complex routing (parallel/intercepting routes — see nextjs-routing). - Testing (see nextjs-testing).

nextjs-data-fetching

/nextjs-data-fetching

Data fetching, caching, and revalidation patterns in Next.js App Router. Covers native fetch caching, ISR/SSG/SSR per-route choice, generateStaticParams, unstable_cache, revalidatePath/revalidateTag, Route Handlers, dynamic vs static rendering. Use this skill to: - Pick the right rendering mode (SSG / ISR / SSR / streaming) per route. - Use native fetch caching options correctly. - Build Route Handlers that match REST conventions. - Invalidate cached data after mutations. - Use generateStaticParams for dynamic SSG. Do NOT use this skill for: - RSC vs Client boundaries (see server-component-patterns). - Routing primitives (see nextjs-routing). - General conventions (see nextjs-conventions).

nextjs-routing

/nextjs-routing

Next.js App Router routing primitives: file-based routes, dynamic and catch-all segments, route groups, parallel routes, intercepting routes, middleware, programmatic navigation, link patterns. Use this skill to: - Pick the correct dynamic segment syntax for the route shape. - Use route groups to organize without affecting URLs. - Implement parallel/intercepting routes for modal-style navigation. - Build effective middleware for auth, redirects, A/B tests. - Use Link and useRouter correctly. Do NOT use this skill for: - Data fetching per route (see nextjs-data-fetching). - General file conventions (see nextjs-conventions). - RSC vs Client (see server-component-patterns).

nextjs-testing

/nextjs-testing

Testing strategies for Next.js: Server Components, Client Components, Server Actions, Route Handlers, end-to-end with Playwright. Vitest/Jest configuration, React Testing Library patterns, msw for network mocks. Use this skill to: - Pick the right test layer for what you're testing. - Configure Vitest or Jest for Next.js. - Test Server Components without running them in isolation. - Test Server Actions and Route Handlers as pure functions. - Set up Playwright for e2e and integration of RSC. Do NOT use this skill for: - General Next.js conventions (see nextjs-conventions). - RSC vs Client model (see server-component-patterns). - Plain Node.js test patterns (see nodejs-plugin equivalents).

server-component-patterns

/server-component-patterns

React Server Components vs Client Components in Next.js: the boundary discipline, "use client" / "use server" directives, Server Actions, what serializes across the boundary, common pitfalls. Use this skill to: - Decide whether a component should be RSC or Client. - Push the "use client" boundary as deep as possible. - Implement Server Actions correctly (auth, validation, revalidation). - Compose RSC and Client components without breaking the model. - Pass data across the boundary safely. Do NOT use this skill for: - General Next.js conventions (see nextjs-conventions). - Specific data-fetching APIs and caching (see nextjs-data-fetching). - Routing (see nextjs-routing).

Hooks1

Event Hooks

File writes

1 hook across 1 event

Stats

Version0.1.0

ReleasedJul 20, 2026

LanguageShell

Stars30

Forks6

MaintenanceExcellent

LicenseMIT

Last CommitJul 20, 2026

AddedJul 22, 2026

Dependencies

sdlcjs-foundation

Actions

View on GitHub View README Plugin Marketplace JSON Homepage

Own this plugin?

Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).

Available In

sdlc-marketplace30

Safety Signals

Caution

Modifies files

Hook triggers on file write and edit operations

Uses power tools

Uses Bash, Write, or Edit tools

README

SDLC Marketplace for Claude Code

Multi-stack AI-assisted SDLC pipelines built on the Stack Provider Pattern: a single core orchestrator runs the pipeline, framework plugins register themselves via declarative stack.md profiles. No core overrides, no slot registries, no copy-paste between stacks.

v1.2.0 — 26 plugins: 1 core + 5 shared libs + 7 JS/TS stacks + 5 PHP/Laravel/Symfony stacks + 3 Java/.NET stacks + 5 Python stacks. Cost-optimized: model tiering + effort per-subagent, fixed Haiku enforcement for the docs phase, file-scoped format hooks, shared architect conventions (~1,600 lines of boilerplate deduped), per-aspect QA fan-out on full-stack runs.

Quickstart

# 1. Add the marketplace
/plugin marketplace add AratKruglik/claude-sdlc

# 2. Install the stack plugin you need (sdlc core is installed automatically as a dependency)
/plugin install laravel-plugin@sdlc-marketplace
# or for JS/TS projects:
/plugin install nodejs-plugin@sdlc-marketplace   # Express/Fastify/Koa
/plugin install nestjs-plugin@sdlc-marketplace   # NestJS
/plugin install nextjs-plugin@sdlc-marketplace   # Next.js (full-stack)
/plugin install react-plugin@sdlc-marketplace    # React SPA
/plugin install vue-plugin@sdlc-marketplace      # Vue 3 SPA
/plugin install angular-plugin@sdlc-marketplace  # Angular 18-21
/plugin install react-native-plugin@sdlc-marketplace  # React Native / Expo
# or for Python projects:
/plugin install django-plugin@sdlc-marketplace   # Django + DRF
/plugin install fastapi-plugin@sdlc-marketplace  # FastAPI + SQLAlchemy 2.0
/plugin install flask-plugin@sdlc-marketplace    # Flask + Flask-Migrate
/plugin install python-plugin@sdlc-marketplace   # Plain Python (CLI/library/scripts)

# 3. Install optional plugins
/plugin marketplace add mattpocock/skills
/plugin install mattpocock-skills@skills # Enhances BA phase with interactive grilling

# 4. Verify
/sdlc:doctor
/sdlc:list-stacks

# 4. Run
/sdlc:start "Add subscription billing with Stripe"

How It Works: Stack Provider Pattern

┌─────────────────────────────────────────────────────────────┐
│                    sdlc (core)                               │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  pipeline-orchestrator (skill) — NEVER CHANGES        │  │
│  │                                                       │  │
│  │  Phase 1: BA          → core's business-analyst       │  │
│  │  Phase 2: Dev         → ⚡ DISPATCH to stack provider │  │
│  │  Phase X: extra       → ⚡ stack-specific phases      │  │
│  │  Phase N-2: QA        → core's qa-engineer            │  │
│  │  Phase N-1: Security  → core's security-analyst       │  │
│  │  Phase N: Docs/PR     → core's document-writer        │  │
│  └──────────────────────────────────────────────────────┘  │
│                            ▲                                │
│                            │ reads stack.md profiles        │
└────────────────────────────┼────────────────────────────────┘
                             │
    ┌────────────────────────┼───────────────────────────┐
    │            │           │             │             │
┌───▼───┐  ┌────▼────┐ ┌────▼────┐  ┌────▼────┐  ┌────▼────┐
│laravel│  │ nodejs  │ │  nestjs │  │ nextjs  │  │  react  │
│plugin │  │ plugin  │ │  plugin │  │ plugin  │  │  plugin │
│stack.md│ │ stack.md│ │stack.md │  │stack.md │  │stack.md │
└───────┘  └─────────┘ └─────────┘  └─────────┘  └─────────┘

Key principles:

Core never changes. Pipeline logic lives exclusively in pipeline-orchestrator/SKILL.md.
Plugins register themselves via stack.md frontmatter — they declare auto-detection rules, priority, agents per phase, and convention skills.
Per-aspect dispatch. A project can have multiple aspects (backend + frontend + database). Each aspect gets its own specialist.
Priority wins. When multiple profiles match, the highest priority takes over.

How Stack Selection Works

When /sdlc:start runs, the orchestrator needs to decide which agent handles development. The priority system is how it picks.

Each plugin has a stack.md file where it describes itself: "I handle projects that have X, and my priority is Y." The orchestrator scans all installed plugins, runs their detection rules against the current project, and picks the highest-priority match.

Step by step:

Scan ~/.claude/plugins/cache/**/stack.md — collect all registered profiles.
Each profile checks its detect rules: is there a package.json? Does it contain react? Is there a manage.py? And so on.
From those that matched — the profile with the highest priority number wins.

Example — Laravel + React (Inertia.js) project:

View full README on GitHub

Similar Plugins

react-plugin

30·

React SPA frontend stack provider for SDLC marketplace. Components, hooks, state management, routing, forms, testing. Composes with backend plugins (nodejs/nestjs/laravel) via aspect resolution. Loses to higher-priority frameworks (nextjs, react-native) on their respective project types.

v0.1.0

AratKruglik

cce-web-react

10·

React, Next.js, and TanStack Start development

3mo

v1.0.0

nodnarbnitram

nextjs-toolkit

29·

Next.js framework toolkit for rendering strategies (SSR/SSG/ISR), App Router patterns, and full-stack React development. Includes Next.js expert agent for strategic framework decisions.

7mo

v1.0.0

armanzeroeight

wshobson-nextjs-app-router-patterns

37.8k·

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.

2mo

v1.0.0

wshobson

agentic-bundle-full-stack-developer

43.6k·

Editorial "Full-Stack Developer" bundle for Claude Code from Agentic Awesome Skills.

v15.1.0

sickn33

web-dev

53·

Use this agent for expert assistance with web development tasks using React, Next.js, NestJS, and other modern web frameworks with TypeScript and Tailwind CSS. This includes code analysis, component creation, debugging, performance optimization, and architectural decisions. Examples: <example>Context: User is building a Next.js app and encounters a routing issue. user: 'My dynamic routes in Next.js are not rendering correctly' assistant: 'Let me use the web-dev agent to analyze your Next.js routing setup and provide a solution' <commentary>This is a Next.js-specific routing issue, so the web-dev agent will provide targeted guidance.</commentary></example> <example>Context: User needs a reusable React component with Tailwind CSS. user: 'I need a card component that matches my app's Tailwind-based design system' assistant: 'I'll use the web-dev agent to create a TypeScript-based React card component styled with Tailwind CSS, following your app's design patterns' <commentary>The user requires a component that aligns with their Tailwind CSS design system, so the web-dev agent ensures compatibility.</commentary></example>

4mo

v1.0.0

devsforge

More by AratKruglik

python-foundation

30·

Shared Python foundation skills for the SDLC marketplace. Contains stack-agnostic Python conventions (python-conventions — type hints, dataclasses, match, pathlib, enums, context managers, PEP 8, strict typing), python-tooling (pyproject.toml as source of truth, pip/Poetry/uv/pipenv, venv, lockfiles, ruff lint+format, mypy, console scripts), and pytest-testing (fixtures, parametrize, conftest, monkeypatch, unittest.mock, pytest-cov). No agent, no stack profile — pure shared library. Referenced by django-plugin, fastapi-plugin, flask-plugin, and python-plugin.

v0.1.0

AratKruglik

csharp-foundation

30·

Shared C#/.NET foundation skills for the SDLC marketplace. Contains stack-agnostic conventions: csharp-conventions (modern C# idioms — nullable reference types, records, pattern matching, async/await, IDisposable, naming), dotnet-tooling (dotnet CLI, NuGet, csproj/sln, central package management, dotnet format) and dotnet-testing (xUnit, Moq/NSubstitute, FluentAssertions, coverlet). Referenced cross-plugin by every .NET framework provider in the marketplace. No agent, no stack profile — pure shared library.

1mo

v0.0.1

AratKruglik

angular-plugin

30·

Angular 18-21 SPA frontend stack provider for SDLC marketplace. Standalone components + NgModule equally, signals + services + NgRx (Store/Component Store/Signals), Reactive Forms (typed), Angular Router with functional guards, TestBed + component harnesses + Angular Testing Library. Modern era (signal-first, control flow @if/@for/@switch) with legacy NgModule fallback. Angular Universal (SSR) pointer-only — SPA focus.

v0.1.0

AratKruglik

vue-plugin

30·

Vue 3 SPA frontend stack provider for SDLC marketplace. Composition API, <script setup>, Pinia, Vue Router v4, vee-validate, Vitest + @vue/test-utils. Vue 3 primary; Vue 2 fallback notes for legacy projects. Nuxt out of scope (separate plugin in roadmap).

v0.1.0

AratKruglik

react-plugin

30·

v0.1.0

AratKruglik

nextjs-plugin

Popularity

What's Inside

Confidence

README

SDLC Marketplace for Claude Code

Quickstart

How It Works: Stack Provider Pattern

How Stack Selection Works

Similar Plugins

react-plugin

cce-web-react

nextjs-toolkit

wshobson-nextjs-app-router-patterns

agentic-bundle-full-stack-developer

web-dev

More by AratKruglik

python-foundation

csharp-foundation

angular-plugin

vue-plugin

react-plugin

SDLC Marketplace for Claude Code

Quickstart

How It Works: Stack Provider Pattern

How Stack Selection Works

Popularity

Health & Quality

More by AratKruglik

python-foundation

csharp-foundation

angular-plugin

vue-plugin

react-plugin

Similar Plugins

react-plugin

cce-web-react

nextjs-toolkit

wshobson-nextjs-app-router-patterns

agentic-bundle-full-stack-developer

web-dev