bug-report-template
스크린샷이나 관찰한 오류를 정식 버그 이슈로 정리할 때 사용합니다. 재현 상황, 기대·실제 결과와 심각도를 구조화해 ZenHub 등록을 돕습니다.
한마디로#
재현 상황, 기대·실제 결과와 심각도를 구조화해 ZenHub 등록을 돕습니다.
무엇을·언제#
-
무엇을 해 주나요
- 스크린샷에서 화면 상태와 오류 메시지를 자동으로 읽어냅니다.
- 버그가 어떤 종류인지(디자인 문제, 기능 오류, 느림, 앱 강제 종료, 데이터 오류)와 얼마나 심각한지 자동으로 분류합니다.
- 정리된 내용을 바탕으로 개발 관리 시스템(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**: TriageResult 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 123Additional Resources#
- REFERENCE.md - Bug classification system and severity guide
- TEMPLATES.md - Issue body templates