chat-frontend-backend-debug
CommunityDebug chat frontend-backend AI response failures
Software Engineering#SSE streaming#frontend-backend integration#chat debugging#react state management#API format mismatch#mobile chat layout#file attachment handling
Authorfreedomw1987
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill resolves the common issue of WhatsApp-style chat UIs where the AI does not respond to user messages, covering root causes across the backend API, frontend state management, SSE streaming, mobile layout, and file attachment handling.
Core Features & Use Cases
- Layer-by-layer diagnosis: Guides you to test the backend API first, then isolate issues to frontend state, SSE parsing, or infrastructure (nginx/Vite) to avoid misdiagnosis.
- Comprehensive bug fixes: Includes solutions for 10+ common issues including API body format mismatches, missing React dispatch calls, SSE chunk parsing errors, Vite proxy timeouts, and SQLite base64 truncation.
- Use case: A developer building a React chat app can use this Skill to fix broken AI response streaming, resolve mobile layout issues where the input bar is hidden, and enable proper display of uploaded PDF and image attachments.
Quick Start
Use this skill to debug a chat UI where the AI does not respond to user messages, starting with testing the backend API endpoint with curl to isolate whether the issue is in the backend or frontend.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: chat-frontend-backend-debug Download link: https://github.com/freedomw1987/tree_monstor/archive/main.zip#chat-frontend-backend-debug Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 536,000+ vetted skills library on demand.