report-bug

tidemann's avatarfrom tidemann

Quickly report bugs and minor issues to GitHub Issues

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 5, 2026
[Testing and QA]

When & Why to Use This Skill

This Claude skill streamlines the bug reporting process by allowing users to quickly create professionally formatted GitHub Issues directly from their workspace. It automates the collection of critical metadata—such as severity, area, and priority—and supports the attachment of visual evidence like screenshots and GIF recordings to enhance developer debugging efficiency and reduce friction in the QA lifecycle.

Use Cases

  • Rapid UI Bug Reporting: Quickly capture and report visual inconsistencies or layout issues on a live site, including automated screenshots and 'frontend' labeling.
  • Standardized Issue Tracking: Ensure all team members follow a consistent bug report template, including mandatory fields for area, priority, and expected behavior.
  • Critical Incident Logging: Instantly report high-priority backend errors or API failures to specific milestones like 'MVP Launch' to ensure immediate visibility for the engineering team.
  • Complex Workflow Documentation: Use the integrated GIF recording feature to document step-by-step reproduction paths for complex bugs that are difficult to describe in text.
namereport-bug
descriptionQuickly report bugs and minor issues to GitHub Issues
user-invocabletrue
allowed-toolsBash, AskUserQuestion, mcp__claude-in-chrome__*

Bug Reporter Skill

Quick bug reporting tool that creates properly formatted GitHub issues.

Usage

/report-bug <description>

Examples:

/report-bug There is a padding around the login page that creates a white border around the background
/report-bug Task card hover effect not working in Safari
/report-bug API returns 500 when deleting a task that doesn't exist

How It Works

When invoked, this skill will:

  1. Capture the bug description from user input
  2. Ask clarifying questions (area, severity)
  3. Create a GitHub issue with proper formatting
  4. Apply appropriate labels (bug + area + priority)
  5. Add to milestone (MVP Launch)
  6. Return the issue URL

Issue Template

## Description

[User's bug description]

## Area

[Frontend/Backend/Database]

## Priority

[Severity level]

## Expected Behavior

[If provided]

Workflow

  1. User runs: /report-bug <description>
  2. Skill asks for:
    • Area (Frontend/Backend/Database)
    • Priority (MVP Blocker/Critical/High/Medium/Low)
  3. Skill creates GitHub issue with:
    • Title: "Bug: [short description]"
    • Labels: bug + area + priority
    • Milestone: "MVP Launch"
  4. Returns issue URL to user

Priority Levels

  • MVP Blocker (mvp-blocker) - Breaks core functionality, must fix before launch
  • Critical (critical) - Blocks important features
  • High (high-priority) - Should fix soon, affects UX
  • Medium (medium-priority) - Default, should fix but not urgent
  • Low (low-priority) - Nice to have

Area Labels

  • frontend - Angular UI, components, pages, styles
  • backend - Fastify API, routes, business logic
  • database - PostgreSQL schema, migrations, queries

Examples

Example 1: UI Bug

/report-bug There is a padding around the login page that creates a white border around the background

Creates:

  • Title: "Bug: Padding around login page creates white border"
  • Labels: bug, frontend, medium-priority
  • Milestone: "MVP Launch"

Example 2: Critical API Bug

/report-bug API returns 500 when deleting a task that doesn't exist

User selects: Backend, Critical

Creates:

  • Title: "Bug: API returns 500 when deleting non-existent task"
  • Labels: bug, backend, critical
  • Milestone: "MVP Launch"

Implementation

The skill should:

  1. Parse the bug description from ARGUMENTS
  2. Ask user for area and priority using AskUserQuestion
  3. Format a proper issue body
  4. Create the issue using gh issue create
  5. Return the issue URL

Keep it simple and fast - the goal is to make bug reporting frictionless.

Capturing Live Screenshots (Optional Enhancement)

For visual bugs, capture evidence from the production site at home.st44.no:

Take Screenshot

# 1. Get tab context
tabs_context_mcp(createIfEmpty: true)

# 2. Navigate to the affected page
navigate(url: "https://home.st44.no/...", tabId: <id>)

# 3. Take screenshot
computer(action: "screenshot", tabId: <id>)

# Include screenshot ID in bug report description

Record Bug Reproduction (For Complex Bugs)

# 1. Start recording
gif_creator(action: "start_recording", tabId: <id>)
computer(action: "screenshot", tabId: <id>)  # Initial frame

# 2. Reproduce the bug steps
computer(action: "left_click", coordinate: [x, y], tabId: <id>)
# ... more steps ...

# 3. Capture final state
computer(action: "screenshot", tabId: <id>)
gif_creator(action: "stop_recording", tabId: <id>)

# 4. Export GIF
gif_creator(action: "export", download: true, filename: "bug-reproduction.gif", tabId: <id>)

When to Capture Visual Evidence

  • Always for visual/UI bugs (layout, styling, positioning)
  • Recommended for UX issues (confusing flows, unexpected behavior)
  • Optional for API/backend bugs (unless UI shows error state)

Visual evidence helps developers understand and fix bugs faster.

  • Live Debug Skill: .claude/skills/live-debug/SKILL.md - Full browser debugging documentation