frontend-bug-triage

Triage frontend bugs in wetty-chat-mobile by tracing React components and Redux slices.

17|10|Updated Feb 25, 2026
One-click install
npx skills add https://github.com/chahua-im/chahua --skill frontend-bug-triage-chahua-im
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-bug-triage
Source: https://github.com/chahua-im/chahua/tree/main/.agents/skills/frontend-bug-triage
Command: npx skills add https://github.com/chahua-im/chahua --skill frontend-bug-triage-chahua-im

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps investigate and resolve unexpected behavior in the wetty-chat-mobile frontend by tracing the user-visible symptom through routing, state, realtime events, and rendering logic until the likely root cause is found.

Core Features & Use Cases

  • Systematic Triage: Start from the reported symptom and narrow the issue to the relevant page, layout, store slice, hook, or websocket path.
  • Reproduction Guidance: Turn vague bug reports into concrete steps that a developer can follow on mobile, desktop, or installed PWA.
  • Targeted Debugging: Recommend focused logging at boundaries such as API responses, event handlers, lifecycle transitions, and route changes.
  • Root Cause Analysis: Summarize what is happening, why it is happening, who is affected, and what evidence supports the diagnosis.
  • Fix Validation: Confirm the smallest safe change and verify it with linting, type checking, and manual reproduction when needed.

Quick Start

Investigate the reported frontend issue in wetty-chat-mobile, trace the relevant user flow and state changes, and return a concise root cause analysis with a focused fix.

Frequently Asked Questions about frontend-bug-triage

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I triage a React websocket bug where realtime sync fails?

Triage a React websocket bug by tracing the realtime sync failure from the reported symptom through event handlers, Redux slices, and websocket paths. This isolates the specific lifecycle hook or API call causing the regression.

What is the best way to debug Redux state regressions in a mobile chat application?

Debugging Redux state regressions requires tracing state changes through the relevant store slice and React components. Start from the reported symptom, add focused logging at API boundaries, and validate the smallest safe fix with type checking.

How do I reproduce a vague frontend layout bug on mobile and desktop?

Reproduce a frontend layout bug by turning vague reports into concrete steps for mobile, desktop, or PWA environments. Trace the routing and rendering logic, then apply targeted logging at route changes and lifecycle transitions to confirm the issue.

Does this bug triage process work for both Ionic and React component rendering failures?

Yes, this bug triage process handles rendering failures by tracing React components and Ionic layout structures. It applies to mobile and desktop layout failures, routing problems, and notification handling within the chat application.

Why does my frontend websocket disconnect when navigating between routes?

A websocket disconnect during route navigation often stems from lifecycle transitions or routing logic unmounting components prematurely. Trace the route changes and websocket event handlers to find the regression and apply a focused fix.