quran/quran.com-frontend-next

Overview

This skill generates a comprehensive testing plan for the current branch diff or a specific PR. It produces actionable QA checklists tailored to the scope and risk of changes in a Next.js TypeScript frontend. Use it to verify PR readiness, create QA tasks, or drive manual and automated tests.

How this skill works

The skill fetches the diff (current branch vs production or a given PR) and inspects changed files to classify them by type and scope. It applies project-specific testing criteria—critical, standard, regression, visual, and accessibility checks—plus patterns from common past mistakes to produce a focused, proportionate testing plan. The output is a ready-to-copy markdown checklist sized to the change.

When to use it

• Preparing a PR for review and merge
• Creating QA checklists for manual testers
• Verifying regression risk when shared hooks or components changed
• Building acceptance criteria for feature work
• Running pre-merge readiness audits (lint/test/build)

Best practices

• Run against the current branch diff or pass the PR number for exact changes
• Scale test depth to change size: tiny→critical checks, medium/large→full plan
• Be specific: translate generic checks into concrete user actions and expected outcomes
• Include loading/error/empty states when data fetching is involved
• Add theme/RTL/responsive checks when styles or pages are modified

Example use cases

• New feature page added: generate critical path tests, SSG/SSR guidance, responsive and theme checks
• Bug fix in shared hook: create regression tests for all consumers and edge cases
• Styling-only change: focus on visual verification across themes, breakpoints, and RTL
• Small refactor touching utilities: run TypeScript/contract checks and runtime error handling tests