By AratKruglik
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.
React component structure, hooks rules, file naming, project layout, composition patterns, performance idioms, and effects discipline. Apply when implementing or modifying React SPA code. Use this skill to: - Structure a new component or feature folder. - Apply hooks correctly (rules, naming, dependency arrays). - Compose components via children, render props, or compound patterns. - Write effects only when needed (and avoid common misuses). - Pick performance escape hatches (memo, useMemo, useCallback) when justified. Do NOT use this skill for: - State management lib choice (see react-state-management). - Routing primitives (see react-routing). - Form patterns (see react-forms). - Testing (see react-testing).
Form patterns for React: react-hook-form (most common), Formik (legacy/stable), TanStack Form (newer). Validation via zod / yup / valibot. Controlled vs uncontrolled inputs, field arrays, multi-step wizards. Use this skill to: - Wire react-hook-form with a validation schema. - Pick between controlled and uncontrolled patterns. - Build multi-step forms with state preservation. - Handle async validation (e.g., username availability). - Integrate forms with TanStack Query mutations. Do NOT use this skill for: - General state management (see react-state-management). - Routing (see react-routing). - Component conventions (see react-conventions). - Testing forms (see react-testing).
Routing libraries for React SPAs: React Router v6/v7 (most common), TanStack Router (typed, modern), wouter (minimal). Detect what's installed and apply matching patterns. Lazy loading, navigation guards, typed params. Use this skill to: - Configure routes (declarative or file-based). - Use navigation hooks (useNavigate, useParams, useSearchParams). - Lazy-load routes for code splitting. - Implement protected routes / auth guards. - Type-safe params via Zod or framework's built-ins. Do NOT use this skill for: - General React conventions (see react-conventions). - State management (see react-state-management). - Form handling (see react-forms). - Next.js routing (different model — see nextjs-plugin).
State management decision tree for React SPAs: useState/useReducer, Context API, Zustand, Jotai, Redux Toolkit, TanStack Query, SWR. Detect what's installed and apply matching patterns. Use this skill to: - Pick the right state tool for the data shape (local / shared UI / server / form). - Use Context correctly (and know when to switch to Zustand/Jotai). - Implement a Zustand or Jotai store. - Set up TanStack Query for server state with caching, pagination, mutations. - Avoid common mistakes (overusing Redux, prop drilling, forgetting query invalidation). Do NOT use this skill for: - General hook conventions (see react-conventions). - Form state specifically (see react-forms). - Routing state (see react-routing). - Testing stores/queries (see react-testing).
Testing React SPAs: React Testing Library + Vitest/Jest for components and hooks, msw for network mocks, Playwright/Cypress for e2e. Query priority, user events, async assertions, mocking patterns. Use this skill to: - Pick the right runner (Vitest vs Jest) and setup. - Write component tests with RTL using accessible queries. - Test custom hooks via renderHook. - Mock network with msw at the boundary. - Set up Playwright or Cypress for end-to-end coverage. Do NOT use this skill for: - General React conventions (see react-conventions). - State management testing patterns specific to a store lib (see react-state-management). - Form-specific testing (apply react-forms patterns inside test).
Modifies files
Hook triggers on file write and edit operations
Uses power tools
Uses Bash, Write, or Edit tools
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
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.
# 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"
┌─────────────────────────────────────────────────────────────┐
│ 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:
pipeline-orchestrator/SKILL.md.stack.md frontmatter — they declare auto-detection rules, priority, agents per phase, and convention skills.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:
~/.claude/plugins/cache/**/stack.md — collect all registered profiles.detect rules: is there a package.json? Does it contain react? Is there a manage.py? And so on.Example — Laravel + React (Inertia.js) project:
npx claudepluginhub aratkruglik/claude-sdlc --plugin react-pluginShared 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.
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.
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.
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).
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.
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.
Skills + Subagents for fullstack development (backend + React/TypeScript) - Use skills for coding guidance, or run recipe workflows for full orchestrated agentic coding with specialized agents
Complete fullstack development toolkit: React, Express/FastAPI, PostgreSQL scaffolding with AI agents
Editorial "Full-Stack Developer" bundle for Claude Code from Agentic Awesome Skills.
Evidence-gated AI coding workflow: scan → analyze → plan → TDD → execute → fix → verify → review, powered by Codebase Memory MCP >= 0.9.0 with optional Serena LSP intelligence. Includes blast-radius planning, test/cycle gates, independent review, and Windows Git Bash hook auto-resolution.
Comprehensive SEO analysis plugin for Claude Code. 25 sub-skills (21 core + 1 orchestrator + 1 framework + 2 extension mirrors) and 18 sub-agents cover technical SEO, content quality, schema, sitemaps, Core Web Vitals, local SEO, backlinks, AI/GEO, ecommerce, hreflang, SXO, clustering, drift monitoring, and Google APIs. Includes optional MCP extensions, SPA-aware rendering, portability, and hardened SSRF/DNS-rebinding safe fetchers.