본문으로 건너뛰기
cccskills
무료GitHub에 공개

test-plan

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md5.4 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

quran/quran.com-frontend-next1.9천2026년 4월 28일 업데이트

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

quran/quran.com-frontend-next1.9천2026년 4월 28일 업데이트

Generates audit-grade, hallucination-free documentation from codebase features with full traceability. Use when documenting features, creating technical specs, or generating verified documentation with code references.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

quran/quran.com-frontend-next1.9천2026년 4월 28일 업데이트

pdf

무료

Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

quran/quran.com-frontend-next1.9천2026년 4월 28일 업데이트

review

무료

Reviews PR(s) using comprehensive review guidelines including security, correctness, clean code, TypeScript, React patterns, i18n/RTL, performance, and accessibility. Use when reviewing pull requests or code changes.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

quran/quran.com-frontend-next1.9천2026년 4월 28일 업데이트

seo-audit

무료

When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," or "SEO health check." For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema-markup.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

quran/quran.com-frontend-next1.9천2026년 4월 28일 업데이트

quran의 스킬 모두 보기

이 스킬의 문제 신고