quran

test-plan

@quran/test-plan
quran
1,744
533 forks
Updated 1/18/2026
View on GitHub

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.

Installation

$skills install @quran/test-plan
Claude Code
Cursor
Copilot
Codex
Antigravity

Details

Path.agent/skills/test-plan/SKILL.md
Branchproduction
Scoped Name@quran/test-plan

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

skills list

Skill Instructions


name: test-plan description: 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.

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