test-plan

0
0
Source

Generates a comprehensive testing plan based on the current branch changes or a specific PR. Use when creating QA checklists, test plans, or verifying PR readiness.

Install

mkdir -p .claude/skills/test-plan && curl -L -o skill.zip "https://mcp.directory/api/skills/download/4633" && unzip -o skill.zip -d .claude/skills/test-plan && rm skill.zip

Installs to .claude/skills/test-plan

About this skill

Generate Testing Plan for PR

Generate a comprehensive testing plan based on the current branch changes or a specific PR.

Arguments

$ARGUMENTS can be:

  • Empty: Uses current branch diff against production
  • PR number: 2732 - fetches that PR's diff

Steps

  1. Get the diff:

    • If $ARGUMENTS is empty: git diff production...HEAD
    • If $ARGUMENTS is a PR number: gh pr diff {PR_NUMBER}
  2. Read docs/COMMON_MISTAKES.md for patterns that have caused production bugs

  3. Analyze the changes:

    • Identify files changed and their types (components, hooks, utils, styles, pages)
    • Categorize the change (new feature, bug fix, refactor, styling)
    • Assess risk level based on scope and what's touched
  4. Generate the testing plan using the criteria below and output format

Testing Criteria

Critical Checks

  • Security: No hardcoded secrets, input validation, no unsanitized dangerouslySetInnerHTML
  • Error Handling: API failures have fallbacks, validate API response shape before accessing
  • Rendering Strategy: SSG for static+SEO, ISR for periodic+SEO, SSR for user-specific+SEO, CSR for private/no-SEO
  • Correctness: Code matches requirements, UI matches designs, safely revertible

Standard Checks

  • TypeScript: No unjustified any, interfaces for objects, enums for categoricals
  • React: No unnecessary useEffect, use useSWR cache directly, skeleton loaders, optimistic updates
  • i18n/RTL: All text via t(), CSS logical properties only (margin-inline-start not margin-left)
  • Performance: Lazy load non-critical components, new packages <10kb gzipped
  • A11y: Semantic elements (button/a not div onClick), images have alt, inputs have label

Regression Checks

  • Modified components still work as before
  • Shared hooks/utils don't break other consumers
  • Style changes don't affect other components
  • No race conditions, memory leaks, or unhandled promise rejections

Visual Verification

  • Themes: Light, dark, sepia
  • RTL: Arabic layout mirrors correctly
  • Responsive: Mobile, tablet, desktop breakpoints

Output Format

Generate a testing plan with sections proportional to the change. Skip sections that don't apply.

## Testing Plan

### Change Summary

- **Type:** [New Feature | Bug Fix | Refactor | Styling | Config]
- **Risk Level:** [Low | Medium | High]
- **Files Changed:** X files
- **What it does:** Brief description

---

### Critical Path Tests

<!-- Primary functionality that MUST work -->

- [ ] [Specific test based on what the PR does]
- [ ] [Another specific test]

### State Verification

<!-- Only include states relevant to the change -->

- [ ] Loading state displays correctly
- [ ] Error state displays correctly (simulate: disconnect network / return 500)
- [ ] Empty state displays correctly (no data scenario)
- [ ] Success state displays correctly

### Visual & Theme Tests

<!-- Only if UI changes -->

| Theme | Verified |
| ----- | -------- |
| Light |          |
| Dark  |          |
| Sepia |          |

| Breakpoint      | Verified |
| --------------- | -------- |
| Mobile (<768px) |          |
| Tablet          |          |
| Desktop         |          |

| Direction | Verified |
| --------- | -------- |
| LTR       |          |
| RTL (AR)  |          |

### Regression Tests

<!-- Based on what files were modified, what else might break -->

- [ ] [Component X that imports this file still works]
- [ ] [Feature Y that uses this hook still works]

### Edge Cases

<!-- Specific to this change type -->

- [ ] [Relevant edge case 1]
- [ ] [Relevant edge case 2]

### Accessibility

<!-- Only if interactive elements changed -->

- [ ] Keyboard navigation (Tab, Enter, Escape)
- [ ] Focus states visible
- [ ] Screen reader compatible

---

### Pre-Merge Checks

- [ ] `yarn lint` passes
- [ ] `yarn test` passes
- [ ] `yarn build` succeeds
- [ ] No console.log statements
- [ ] No hardcoded strings (using `t()`)

Guidelines

Be Specific, Not Generic

// Bad - too generic

- [ ] Component works correctly

// Good - specific and actionable

- [ ] Clicking "Add Bookmark" shows success toast and updates bookmark icon
- [ ] Removing bookmark while offline shows error message

Scale to Change Size

Change SizeTesting Depth
Tiny (1-2 LOC)Critical path only, 2-3 tests
Small (<50 LOC)Critical + states, 5-8 tests
MediumFull plan minus irrelevant sections
Large (>15 files)Full plan + flag for splitting

Derive from Common Mistakes

Apply patterns from docs/COMMON_MISTAKES.md:

  • Fetches data → verify loading/error/empty states
  • Uses arrays → verify empty, single item, many items
  • User input → verify validation, empty submit, error handling
  • Touches styles → verify RTL, themes, responsive
  • Modifies shared code → verify all consumers still work

Final Output

After generating the plan:

  1. Display the testing plan in markdown format
  2. Tell the user they can copy/paste it into their PR description
  3. Offer to help test any specific scenarios they're unsure about

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

282789

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

206415

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

200286

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

211231

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

169197

rust-coding-skill

UtakataKyosui

Guides Claude in writing idiomatic, efficient, well-structured Rust code using proper data modeling, traits, impl organization, macros, and build-speed best practices.

165173

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.