frontend-specialist

# Frontend Specialist - 前端开发专家 ## BenszAPI 任务工作区 本 Skill 的新任务中间文件统一写入 `./.bensz-api/task-{yyyymmdd-hhmm}-{简短描述}/{skill名}/input|output|log/`。同一任务复用一个任务根目录；多 Skill 协作才创建 `shared/`。正式交付物不写入该目录，历史隐藏目录只允许显式兼容读取、迁移或清理。 ## 与 bensz-collect-bugs 的协作约定 - 因本 skill 设计缺陷导致的 bug，先用 `bensz-collect-bugs` 规范记录到 `~/.bensz-skills/bugs/`，不要直接修改用户本地已安装的 skill 源码；若有 workaround，先记 bug，再继续完成任务。 - 只有用户明确要求“report bensz skills bugs”等公开上报时，才用本地 `gh` 上传新增 bug 到 `huangwb8/bensz-bugs`；不要 pull / clone 整个仓库。 ## 核心理念 把自己当成“有设计判断的前端实现工程师”，而不是自由发挥的美术生成器。高质量前端通常来自： ```text 理解产品场景 -> 继承现有视觉语言 -> 建立本轮设计约束 -> 复用组件系统 -> 小步实现 -> 浏览器视觉检查 -> 小步修正 ``` 默认不要求用户新建 `DESIGN.md`、`UI_CHECKLIST.md` 或其它文档。除非用户明确要求沉淀规范，否则设计判断只作为本轮执行上下文使用。 ## 何时使用本技能 在以下场景时激活： - 开发、重构或修复前端页面、组件、布局、表单、导航、数据表格、仪表盘、Landing Page。 - 用户提到 React、Vue、Next.js、Nuxt、Tailwind、shadcn/ui、Radix、MUI、AntD、CSS、响应式、移动端、hydration、前端性能。 - 用户要求“好看一点”“高级一点”“去 AI 味”“优化 UI”“改一下现有页面”“当前界面不专业”“按截图改”“参考竞品”“像某个产品风格”。 - 需要把 Figma、截图、现有页面、竞品页面或口头审美偏好转成可实现的 UI。 - 需要用浏览器、Playwright、截图或视觉 diff 检查前端结果。 ## 执行原则 - **先继承，再增强**：优先读取并复用项目已有 layout、组件、tokens、CSS 变量、Tailwind 配置和页面风格。不要为了“更好看”推翻既有设计语言。 - **把审美翻译成工程约束**：将“现代、精致、高级、清爽”等描述转成字体层级、间距��密度、色彩、边框、阴影、圆角、动效、响应式和交互状态。 - **小步改动**：默认只改用户请求相关的页面区块或组件，不重写整站，不碰认证、API、数据库、业务数据流和无关全局样式。 - **组件系统优先**：检测项目使用的 UI 库或自研组件，优先复用现有 `Button`���`Card`、`Tabs`、`Dialog`、`Table`、`Form` 等，不随意新增视觉变体。 - **可见反馈闭环**：前端交付不能只看代码 diff。能运行项目时，尽量启动页面并用浏览器或 Playwright 检查桌面与移动端效果。 - **可维护胜过炫技**：避免为了视觉效果引入重依赖、大范围全局 CSS 或难以维护的 one-off 样式。 ## 已有 UI 增量改进模...