gemini-frontend

gemini-frontend - Gemini CLI 前端开发专用 Skill

Description

专注于前端和移动端开发的 skill，通过 Gemini CLI（via clink）发挥多模态和超长上下文优势。

适用场景：

• React/Vue/Angular 组件开发
• React Native/Flutter 移动端开发
• 设计稿 → 前端代码实现
• UI/UX 实现和优化
• 前端项目重构

核心优势（基于 Gemini 3.0）：

• 📷 多模态能力：直接理解设计稿、UI 截图
• 📚 超长上下文：100万 token，处理大型 monorepo
• 🎨 UI 理解：博士级推理能力，理解复杂 UI 逻辑
• 🚀 代码生成：擅长 React/Vue/Flutter 代码生成

---

⚠️ 重要说明

阶段命名澄清：

• 本 skill 的 Phase 1-5 是内部工作流阶段（Skill-level phases）
• 与 CLAUDE.md 的 P1-P4（分析问题、制定方案、执行方案、错误处理）是不同层级
• gemini-frontend 通常在 P3（执行方案） 阶段被 main-router 调用
• Phase 1-5 是在 P3 阶段内部顺序执行的子步骤

层级关系示例：

P3（执行方案） [CLAUDE.md 项目阶段]
  └─ gemini-frontend skill [由 main-router 调用]
      ├─ Phase 1: 初始化 Gemini CLI 会话
      ├─ Phase 2: 需求分析与设计
      ├─ Phase 3: 代码生成
      ├─ Phase 4: 质量检查
      └─ Phase 5: 文档生成

---

How It's Invoked（如何被调用）

调用方式： 由 main-router skill 自动路由

路由触发条件：

• 用户请求包含前端框架关键词（React, Vue, Angular, Flutter, React Native）
• 用户请求包含 UI/组件/页面 等关键词
• 用户提供设计稿/UI 截图
• frontend_score ≥ 50（参见 main-router 评分机制）

评分机制详解：

main-router 使用以下评分规则判断是否路由到 gemini-frontend：

评分项	分值	示例关键词
Tier 1 关键词	+30~35分	React, Vue, Angular, component, 组件, 页面, UI, 前端
Tier 2 关键词	+15~20分	Flutter, React Native, mobile, 移动端, iOS, Android
Tier 3 上下文	+10分	package.json 存在且包含前端依赖
图片附件	+25分	设计稿、UI 截图
后端信号抵消	-15~-25分	API, backend, database, FastAPI, Django

路由决策阈值：

• Score ≥ 80：自动路由到 gemini-frontend（高置信度）
• Score 50-79：询问用户是否使用 gemini-frontend（中置信度）
• Score < 50 且 backend_signals ≥ 2：全栈项目，建议任务分解

参数继承：

• automation_mode: 从 main-router 继承（见 CLAUDE.md 共享概念）
• coverage_target: 从 main-router 继承（默认 85%，最低 70%）

示例流程：

用户请求: "帮我开发一个 React 登录组件"
  ↓
main-router 检测:
  - "React" (Tier 1) → +35分
  - "组件" (Tier 1) → +30分
  - 总分: 65分
  ↓
路由决策: 50 ≤ 65 < 80 → 询问用户
  ↓
用户确认: "是"
  ↓
调用 gemini-frontend skill
  ↓
gemini-frontend 执行 Phase 1-5
  ↓
返回完整的 React 组件 + 文档 + 质量报告