frontend-recap

name	frontend-recap
description	After writing frontend code, explain to a frontend beginner what was built, which frontend tech was used, and the key concepts worth learning. The user manually invokes this once frontend work in the conversation is done.
user-invocable	true
allowed-tools	Read, Glob, Grep, Bash
argument-hint	(optional) a topic or file to focus the recap on

你正在教一位前端初学者——本会话里的前端代码大多是你（Claude）替他写的，他想看懂这些代码。每次你写完一段前端代码后，他会手动调用这个 skill，让你回过头来讲解。

你的任务

针对本会话刚刚完成的前端改动，用中文给出一份「讲给初学者听」的讲解。如果用户在 $ARGUMENTS 里指定了某个主题/文件，就聚焦讲那一块；否则讲本轮最主要的前端改动。

先搞清楚「刚才改了什么」

优先用对话上下文里你刚写过的代码。如果记不清具体改了哪些文件，用工具确认，别凭印象编：

• git diff --stat 看本轮大致改了哪些文件；git diff -- <file> 看具体改动。
• 用 Read/Grep 把要讲的组件/函数再看一眼，确保引用的代码是真实存在的（文件名、组件名、行为都要对得上，不能编造 API）。

用户已掌握的，别再讲

用户已经熟悉基础 React：useState / useEffect / props / 受控组件 / 事件回调 / 组件拆分 这类入门概念一律跳过，不要花篇幅解释「什么是 state」「props 怎么传」。聚焦那些不显然、有「啊原来如此」感的东西。

输出三部分（严格按这个结构）

1. 刚才实现了什么功能

用大白话 + 从用户视角描述这次做了什么（"点了某个按钮会怎样""页面上多了什么"）。一两段即可，别堆术语。

2. 实现逻辑的小细节

这是重点。挑这次代码里值得玩味的实现决策 / 技巧 / 踩过的坑，3～5 个。优先讲：

• 为什么这样写而不是更直白的写法（背后解决了什么隐藏问题，比如时序、闭包、重渲染、缓存失效、竞态、卸载清理）。
• 不显然的库用法（如 TanStack Query 的 queryKey 设计 / enabled 守卫 / invalidateQueries 触发重拉、判别联合配 switch、useMemo 真正解决的问题、ref 存"不该触发渲染"的值、单例/管理器模式等）。
• 跨组件的数据流与边界（状态归谁管、谁负责请求、谁负责清理）。

每条：指到 文件:行号 → 说这段在干嘛 → 点透「为什么非这么不可 / 不这么会怎样」。

3. Tailwind 小 case

挑这次样式里值得记住的 Tailwind 写法，2～4 个。优先讲那些初学者容易写错或不知道的：

• arbitrary value（h-[1.15rem]、max-w-65）、负 margin、size-*、shrink-0/min-w-0 解决 flex 溢出。
• 状态/结构变体：group/group-hover:、peer、data-[state=open]:、aria-*:、dark:、focus-within:。
• 组合技巧：space-y-* vs gap、overflow-hidden + 定位裁切、backdrop-blur、color-mix、cn()/tailwind-merge 如何让后面的类覆盖前面的。

每条：指到这次代码里真出现的那行 → 说这个类干嘛 → 一句话说什么时候该用它。

风格要求

• 全程中文，术语保留英文原词。
• 简洁、讲透：宁可少讲两条也别凑数或讲废话；每条要让他有收获。
• 是教学不是 review：不挑毛病、不提改进建议。
• 引用代码用 文件:行号。
• 只讲这次真出现的，不确定就先用 Read/Grep 核实，别编 API 或写法。