llm-react-frontend

name	llm-react-frontend
description	指导大模型聊天网页的 React 前端开发。当前端涉及聊天界面、消息流式渲染、会话列表、输入框、Markdown/代码块展示、停止生成、重试、响应式布局、API 客户端、前后端联调或用户体验打磨时使用此 Skill。每次构建前必须先产出技术文档，并在文档中列出需要用户填写或确认的内容。

大模型 React 前端 Skill

目标

用于建设一个“具有大模型回答能力的网页”的前端部分。前端默认采用 React，优先做出真实可用的聊天工作台，而不是营销首页。

开工规则

1. 开始任何前端实现前，先阅读 workflows/project-build-workflow.md。
2. 为本次前端任务新建或更新 docs/technical/ 下的技术文档。
3. 技术文档必须包含“需要用户填写/确认的内容”。
4. 技术文档至少说明目标、页面/组件范围、接口依赖、状态设计、验收标准。
5. 技术文档确认后，再开始写代码。
6. 每次只推进一层能力，避免一次性堆太多功能。

用户填写项要求

如果前端任务涉及用户需要决定的内容，必须在技术文档中写清：

• 用户要填哪个文件。
• 用户要确认哪些文案、地址或端口。
• 哪些值必须自己提供。
• 哪些值可以保持默认。

典型内容：

VITE_API_BASE_URL=http://localhost:8000
FRONTEND_ORIGIN=http://localhost:5173

前端分层

• frontend/src/api/：封装后端请求、SSE/流式读取、错误转换。
• frontend/src/components/chat/：消息列表、消息气泡、输入框、停止按钮、重试按钮。
• frontend/src/features/conversations/：会话列表、当前会话、会话标题。
• frontend/src/hooks/：聊天发送、流式消费、滚动到底部、快捷键。
• frontend/src/styles/：全局样式、主题变量、响应式约束。

如仓库已有其他约定，优先沿用已有约定。

核心体验

• 首屏就是聊天应用本身。
• 支持输入用户问题并展示大模型回答。
• 回答应优先按流式增量显示。
• 消息区域支持 Markdown、代码块、复制代码、长文本换行。
• 输入区支持多行输入、Enter 发送、Shift+Enter 换行。
• 生成中支持停止。
• 失败时保留上下文，并显示可以理解的错误状态。
• 窄屏和桌面都不能出现文本重叠或控件挤压。

API 协作

前端不要猜后端内部实现，只依赖明确契约：

• 普通发送：用户消息、会话 id、模型选项。
• 流式事件：message_start、token、message_end、error。
• 取消生成：使用 AbortController。
• 未知事件：忽略但不中断页面。

更多前端实现细节见 references/frontend-guidelines.md。

验收标准

• 能输入一句话并看到助手回复。
• 流式回答过程中 UI 不抖动、不重复追加错误内容。
• 停止生成后状态能恢复。
• 错误信息能显示给用户。
• 桌面和移动宽度下布局可用。