bug-report

Image analysis-based bug report generation and ZenHub issue automation

항목	내용
Invoke	/bug-report
Aliases	/br
Category	petmedi-development
MCP Servers	zenhub

/bug-report#

Bug report generation through image analysis and ZenHub issue automation

Triggers#

When a bug is found and an issue needs to be filed
When writing a bug report with screenshots
When documenting issues found during QA

Context Trigger Pattern#

/bug-report [image_path] [bug_description]

Parameters#

Parameter	Required	Description	Example
`image_path`	❌	Bug screenshot path	`/path/to/screenshot.png`
`bug_description`	✅	Brief description of the bug	`"Login button is not working"`
`--severity`	❌	Specify severity	`critical`, `high`, `medium`, `low`
`--type`	❌	Specify bug type	`ui` , `function` , `crash` , `performance` , `data`
`--no-create`	❌	Report only without issue creation	-

Behavioral Flow#

Step 1: Image Analysis (when image is provided)#

## Image Analysis

Analyze screenshot using the Read tool:

1. **Identify UI state**
   - Error dialog displayed
   - Empty State screen
   - Loading state persisting
   - Layout broken

2. **Extract text**
   - Error messages
   - Screen title
   - Button text

3. **Bug classification inference**
   - Automatic bug type classification
   - Severity recommendation
   - Impact area identification

Step 2: Information Gathering#

## Information Gathering

Collect additional information via AskUserQuestion:

1. **Reproduction steps** (required)
   - State before bug occurred
   - Actions performed
   - When bug occurred

2. **Expected result** (required)
   - Expected result during normal operation

3. **Environment information** (optional)
   - OS version
   - Device
   - App version

4. **Severity confirmation** (after presenting analysis results)
   - 🔴 Critical
   - 🟠 High
   - 🟡 Medium
   - 🟢 Low

Step 3: ZenHub Issue Creation#

## Issue Creation

Call mcp__zenhub__createGitHubIssue:

1. **Title generation**
   - Format: `[Bug] {screen_name}: {bug_summary}`
   - Crash: `[Crash] {screen_name}: {crash_situation}`

2. **Body creation**
   - Use full bug report template from TEMPLATES.md
   - Include image analysis results
   - Include reproduction steps, expected/actual results

3. **Label assignment**
   - `bug` (default)
   - `severity:{level}`
   - `area:{affected_area}`

4. **Pipeline movement**
   - Critical → In Progress
   - High → Triage
   - Medium/Low → Backlog

MCP Integration#

Action	MCP Tool	Purpose
Issue creation	`mcp__zenhub__createGitHubIssue`	Create GitHub issue
Pipeline movement	`mcp__zenhub__moveIssueToPipeline`	Manage issue status
Label lookup	`mcp__zenhub__getWorkspacePipelinesAndRepositories`	Label and pipeline info

Examples#

Basic usage (with image)#

/bug-report /tmp/error_screenshot.png  " Order details not showing after payment completion "

Text only#

/bug-report  " No response when clicking login button "

Specify severity#

/bug-report --severity critical  " Crash on app startup "

Specify bug type#

/bug-report --type ui /tmp/layout.png  " Overflow on long text "

Report only (no issue creation)#

/bug-report --no-create  " This is a test bug "

Output Format#

Image Analysis Result#

╔════════════════════════════════════════════════════════════════╗
║  Image Analysis Result                                         ║
╠════════════════════════════════════════════════════════════════╣
║                                                                ║
║  🖼️ Image: /tmp/screenshot.png                                 ║
║                                                                ║
║  📍 Detected Issues:                                           ║
║    1. Error dialog displayed                                   ║
║    2.  " Network error "   message detected                         ║
║                                                                ║
║  🏷️ Suggested Classification:                                  ║
║    - Type: Function Bug                                        ║
║    - Severity: High                                            ║
║    - Area: Backend/Network                                     ║
║                                                                ║
╚════════════════════════════════════════════════════════════════╝

Issue Creation Complete#

╔════════════════════════════════════════════════════════════════╗
║  Bug Report Created                                            ║
╠════════════════════════════════════════════════════════════════╣
║                                                                ║
║  📋 Issue: #123                                                ║
║  📝 Title: [Bug] Payment: Order details not displayed          ║
║                                                                ║
║  🏷️ Labels:                                                    ║
║    - bug                                                       ║
║    - severity:high                                             ║
║    - area:backend                                              ║
║                                                                ║
║  📊 Pipeline: Triage                                           ║
║                                                                ║
║  🔗 URL: https://github.com/coco-de/kobic/issues/123           ║
║                                                                ║
║  💡 Next Steps:                                                ║
║    /dev:bugfix 123  # Start fix cycle                          ║
║                                                                ║
╚════════════════════════════════════════════════════════════════╝

Reference Documents#

Skill: ~/.claude/skills/bug-report/SKILL.md
Reference: ~/.claude/skills/bug-report/REFERENCE.md
Templates: ~/.claude/skills/bug-report/TEMPLATES.md

Key Rules#

Image-first analysis: If an image is provided, analyze it first to understand context
User confirmation: Present analysis results for severity and bug type, then confirm with user
Structured report: Use templates to maintain consistent format
Automatic labeling: Automatically assign labels matching bug characteristics
Workflow integration: Guide to /dev:bugfix after issue creation