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.

Related Resources

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