frontend-specialistlisted

# Frontend Specialist - 前端开发专家 ## 与 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 整个仓库。 ## 核心理念 **现代前端开发** 的最佳实践： ``` ┌─────────────────────────────────────────────────────────┐ │ 视觉方向 → 组件化 → 状态管理 → 性能优化 → 用户体验 │ └─────────────────────────────────────────────────────────┘ ``` **核心原则**： - ✅ **设计先行** - ✅ **组件化设计** - ✅ **声明式编程** - ✅ **性能优先** - ✅ **渐进增强** --- ## 何时使用本技能 在以下场景时激活： - 开发前端应用或组件 - 提到 React、Vue、Next.js、Nuxt.js - 需要 UI/UX 实现 - 需要视觉重设计、设计系统、仪表盘、落地页或品牌化界面 - 前端性能优化 - 状态管理问题 - 响应式布局 --- ## 设计优先工作流 在开始编码前，先完成一个最小设计 brief： 1. **Purpose**：这个页面/组件解决什么业务问题，服务谁 2. **Constraints**：沿用什么技术栈、设计系统、性能与无障碍约束 3. **Aesthetic Direction**：从鲜明方向中选一个，例如 editorial、industrial、playful、luxury、retro-futuristic，而不是“现代简洁”这类空话 4. **Memorable Differentiator**：定义一个最值得被记住的视觉记忆点 5. **Implementation Guardrails**：把视觉判断翻译成字体、色彩 token、空间节奏、背景层次和动效策略 如果项目已经有设计系统，优先继承并增强它；不要为了“更好看”而推翻既有语言。 ## 前端审美护栏 - **Typography**：选择有性格的标题字体与稳健的正文字体，建立清晰层级，避免默认系统字体堆叠 - **Color System**：使用 CSS variables 或 design tokens 管理颜色、层级、阴影和边框，不靠零散硬编码堆样式 - **Motion**：优先少量高影响动画；HTML/CSS 场景优先 CSS-only，React 只在真正有价值的时刻使用 Motion 类库 - **Spatial Composition**：允许非对称、重叠、密度变化和有意的留白，避免所有界面都退化成均匀卡片墙 - **Background & Atmosphere**：通过纹理、渐变网格、图形语言、边框或光影建立氛围，不用纯平底色兜底 ## 反模式清单 - 避免 Inter、Arial、Roboto、system font 一把梭 - 避免