# Testable Next.js Skill Plugin for Claude Code

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Next.js](https://img.shields.io/badge/Next.js-13+-black?logo=next.js)](https://nextjs.org/)

A Claude Code plugin that provides expert-level guidance for writing testable Next.js applications with minimal test deltas and stability-first design.

---

## Features

- **Testable by design**: Clear seams, deterministic behavior, dependency injection
- **Minimal test delta**: Smallest meaningful automated test for each change
- **Stability tactics**: Reduce flaky tests with proven patterns
- **Framework-aware**: Covers App Router, RSC, Server Actions, Route Handlers, Proxy/middleware
- **Multi-stack support**: Jest, Vitest, Playwright, Cypress, MSW

---

## What's Included

```
skills/writing-testable-nextjs/
├── SKILL.md              # Main instructions (loaded by Claude Code)
├── README.md             # Skill overview
├── EVALS.md              # Evaluation prompts for testing the skill
├── CHANGELOG.md          # Version history
├── VERSION               # Current version
├── PLAYBOOK_README.md    # Playbook overview
├── reference/            # Deep documentation (loaded on demand)
├── templates/            # Test file templates
├── checklists/           # Pre-flight checklists
└── snippets/             # Copy-paste code snippets
```

---

## Installation

### Option A: As a Claude Code plugin (recommended)

```bash
git clone https://github.com/kndoshn/testable-nextjs-skill-plugin.git
```

Then register the plugin in Claude Code:

```bash
claude plugins:add /path/to/testable-nextjs-skill-plugin
```

Or add to your Claude Code settings manually.

### Option B: Copy into your project

```bash
mkdir -p .claude/skills
cp -R skills/writing-testable-nextjs .claude/skills/
```

### Option C: Personal installation

```bash
cp -R skills/writing-testable-nextjs ~/.claude/skills/
```

---

## Usage

After installation, ask Claude Code for Next.js testing tasks. The Skill activates automatically when your request matches its scope.

### Example Prompts

```
"Add tests for this Server Action."
"How should I test this RSC component?"
"Make this route handler testable."
"Review my test for flakiness."
"What's the minimal test delta for this change?"
```

---

## Documentation

See the Skill's own documentation for details:

- [SKILL.md](skills/writing-testable-nextjs/SKILL.md) - Main instructions
- [README.md](skills/writing-testable-nextjs/README.md) - Skill overview
- [EVALS.md](skills/writing-testable-nextjs/EVALS.md) - Evaluation prompts
- [PLAYBOOK_README.md](skills/writing-testable-nextjs/PLAYBOOK_README.md) - Playbook overview

---

## Compatibility

- **Next.js**: 13+ (App Router), Pages Router also supported
- **Test frameworks**: Jest, Vitest, Playwright, Cypress
- **Mocking**: MSW, native mocks

---

## License

MIT