bug-report-template

이미지 분석 기반 버그 리포트 생성과 ZenHub 이슈 자동화. 스크린샷이나 버그 관찰 내용을 구조화된 ZenHub 이슈로 변환할 때 사용합니다.

Bug Report#

한마디로#

화면을 캡처해서 "여기 뭔가 이상해요"라고 말하면, 그 스크린샷을 분석해서 정식 버그 신고서로 깔끔하게 정리해 주는 도구입니다. 마치 고장 난 물건을 사진 찍어 A/S 센터 접수증을 자동으로 작성해 주는 것과 비슷합니다. 사람이 직접 양식을 채울 필요 없이, 어떤 문제인지·얼마나 심각한지까지 알아서 분류해 줍니다.

무엇을·언제#

무엇을 해 주나요
- 스크린샷에서 화면 상태와 오류 메시지를 자동으로 읽어냅니다.
- 버그가 어떤 종류인지(디자인 문제, 기능 오류, 느림, 앱 강제 종료, 데이터 오류)와 얼마나 심각한지 자동으로 분류합니다.
- 정리된 내용을 바탕으로 개발 관리 시스템(ZenHub/GitHub)에 버그 접수 항목(이슈)을 자동으로 만들어 줍니다.
- 버그 성격에 맞는 꼬리표(라벨)도 자동으로 붙여 줍니다.
언제 작동하나요
- 스크린샷이나 버그 목격 내용을 정식 버그 신고서로 바꾸고 싶을 때 사용합니다.
- 사진과 함께 신고할 수도 있고, 글만으로도 신고할 수 있으며, 심각도를 직접 지정할 수도 있습니다.

핵심 용어#

용어	쉬운 설명
버그(Bug)	프로그램이 의도대로 동작하지 않는 오류, 즉 고장
이슈(Issue)	버그나 할 일을 기록해 두는 접수 항목, 일종의 접수증
ZenHub / GitHub	개발 작업과 버그를 관리하고 추적하는 온라인 협업 시스템
UI/UX	화면 디자인과 사용 경험 (버튼·배치·색 등 눈에 보이는 부분)
심각도(Severity)	버그가 얼마나 치명적인지 나타내는 등급 (예: critical = 매우 심각)
크래시(Crash) / ANR	앱이 갑자기 꺼지거나(강제 종료) 멈춰서 응답하지 않는 상태
스택 트레이스(Stack trace)	오류가 발생한 지점을 추적해 보여 주는 기술적 기록
라벨(Label)	이슈에 붙이는 분류용 꼬리표 (예: bug, ui)
파이프라인(Pipeline) / Triage	이슈가 거쳐 가는 처리 단계, Triage는 처음 검토하는 분류 대기 단계

A skill for bug report generation through image analysis and ZenHub issue automation.

Scope and Capabilities#

Core Features#

Feature	Description
Image analysis	Auto-extract UI state and error messages from screenshots
Bug classification	Automatic severity and bug type classification
Issue creation	Automatic ZenHub/GitHub issue creation
Labeling	Automatic label assignment based on bug characteristics

Supported Bug Types#

Type	Icon	Description
UI/UX	🎨	Layout broken, style errors
Functional	⚙️	Button not working, logic errors
Performance	⚡	Slow loading, frame drops
Crash	💥	ANR, app force close
Data	📊	Wrong data, sync errors

Quick Start#

Bug report with image#

/cc-quality:bug-report /path/to/screenshot.png  " Login button is not working "

Text-only bug report#

/cc-quality:bug-report  " Order details not showing after payment completion "

Specify severity#

/cc-quality:bug-report --severity critical  " App crashes on startup "

Bug Report Process#

Step 1: Image Analysis#

When a screenshot is provided:

Identify UI state (error dialog, empty screen, loading state)
Extract error message text
Infer bug type automatically
Identify affected components

Step 2: Information Gathering#

## Gathered Information

1. **Reproduction steps**: Steps to reproduce the bug
2. **Expected result**: Expected result during normal operation
3. **Actual result**: Current problem occurring
4. **Environment information**: OS, device, app version
5. **Additional information**: Logs, stack traces, etc.

Step 3: Issue Creation#

## ZenHub Issue Creation

- **Title**: [Bug] {bug summary}
- **Body**: Structured bug report
- **Labels**: bug, severity:{level}, area:{affected_area}
- **Pipeline**: Triage

Result Format#

Issue Creation Complete#

╔════════════════════════════════════════════════════════════════╗
║  Bug Report Created                                            ║
╠════════════════════════════════════════════════════════════════╣
║                                                                ║
║  📋 Issue: #123                                                ║
║  📝 Title: [Bug] Login button not working                      ║
║                                                                ║
║  🏷️ Labels:                                                    ║
║    - bug                                                       ║
║    - severity:high                                             ║
║    - area:ui                                                   ║
║                                                                ║
║  📊 Pipeline: Triage                                           ║
║                                                                ║
║  🔗 URL: https://github.com/owner/repo/issues/123              ║
║                                                                ║
╚════════════════════════════════════════════════════════════════╝

Workflow Integration#

To automate through to bug fix:

# Start fix cycle right after bug report creation
/cc-dev:bugfix --new /path/to/screenshot.png  " Bug description " 

 # Or start fix cycle from existing issue
/cc-dev:bugfix 123

Additional Resources#

REFERENCE.md - Bug classification system and severity guide
TEMPLATES.md - Issue body templates