前端生成

Name: 前端生成
Author: foryourhealth111-pixel

其他社区

作者仓库星标 2,226
作者更新于实时读取
作者仓库 Vibe-Skills

流狐档案事实层信息：领域、Agent、信任分、运行环境、权限与网络

领域: 通用
兼容 Agent: Claude Code
Cursor
Cline
Codex
Windsurf
Gemini CLI

+20
信任分: 88 / 100 · 社区维护
作者 / 版本 / 许可: @foryourhealth111-pixel · 未声明 license
Token 消耗评级: 低消耗
接入复杂程度: 需简单配置
是否需要外部 API Key: 不需要
兼容的系统: macOS · Linux · Windows
底层运行要求: 无特殊要求
文件与系统权限: 只读
允许写入 / 修改
Shell 执行
网络行为: 仅限本地
安装命令数: 26 条

档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。

需要注意： 未限定 allowed-tools，默认拥有全部工具权限。

输出预览 report-generator.preview

---
name: report-generator
description: 高级报告生成专家，支持多格式输出、数据可视化和交互式报告生成。 你是高级报告生成专家，专注于创建专业、美观、交互式的 SEO 和 GEO 分析报告。 输入：报告类型、数据源、目标受众 📄 M…
category: 通用
runtime: 无特殊运行时
---

# report-generator 输出预览

## PART A: 任务判断
- 适用问题：通用任务拆解、检查和交付。
- 输入要求：目标材料、限制条件、期望输出和验收方式。
- 证据边界：围绕“核心职责 / 工作流程 / 1. 报告类型识别”读取原文规则，不把推断写成作者承诺。

## PART B: 执行结果
- **01** 任务判断：确认你的需求是否属于通用任务拆解、检查和交付，并标出输入、限制和预期结果。
- **02** 执行计划：优先按“核心职责 / 工作流程 / 1. 报告类型识别”拆成步骤，说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果：给出可复制的命令、文件改动、检查清单或内容草稿，并说明如何继续迭代。
- **04** 风险边界：结合 读取文件、写入/修改文件、执行终端命令、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。

## Running Rules
- 读取文件、写入/修改文件、执行终端命令；主要在本地完成；通常不需要额外 API Key。
- 先小样例验证，再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。

SKILL.md SKILL.md

---
name: report-generator
description: 高级报告生成专家，支持多格式输出、数据可视化和交互式报告生成。 你是高级报告生成专家，专注于创建专业、美观、交互式的 SEO 和 GEO 分析报告。 输入：报告类型、数据源、目标受众 📄 M…
category: 通用
source: foryourhealth111-pixel/Vibe-Skills
---

# report-generator

## 什么时候使用
- 把通用方向的常用动作沉淀成 Agent 可调用的技能 适合处理通用任务拆解、检查、交付和复盘，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。 把任务拆成可执行、可检查、可继续迭代的步骤；通常不需要额外…
- 面向通用任务拆解、检查和交付，优先处理能明确输入、步骤和验收标准的工作。

## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。

## 执行规则
- 围绕「核心职责 / 工作流程 / 1. 报告类型识别」组织步骤，不把推断写成作者事实。
- 读取文件、写入/修改文件、执行终端命令；主要在本地完成；通常不需要额外 API Key。
- 先跑小样例，确认结果可检查后再扩大任务范围。

## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown，不编造命令、平台或依赖。

证据边界与执行链路

作者原文负责流程事实；仓库文件负责来源和命令；流狐只补充适用场景、限制和质量判断。

skill "report-generator" {
  输入层     -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
  上下文层   -> 核心职责 / 工作流程 / 1. 报告类型识别
  规则层     -> SKILL.md 触发条件 / 执行顺序 / 输出格式
  运行层     -> 无特殊运行时 | 读取文件、写入/修改文件、执行终端命令 | 主要在本地完成
  安全层     -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
  输出层     -> 可复制结果 + 检查清单 + 下一步迭代
}

解读按原文结构重写，命令、链接、术语均保留；右侧可核对作者原始 SKILL.md

先判断是否适合

核心用途：把通用方向的常用动作沉淀成 Agent 可调用的技能适合处理通用任务拆解、检查、交付和复盘，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。把任务拆成可执行、可检查、可继续迭代的步骤；通常不需要额外 API Key，适…
适用任务：更适合通用任务拆解、检查、交付和复盘，尤其是输入、步骤、验收口径可以反复复用的场景。
不宜硬套：如果任务只有一次性问答、来源材料很少，或需要作者没有说明的命令和外部服务，应先降级为普通对话。

作者设计意图

触发依据：使用时机、上下文收集、输出格式和失败处理共同决定它是否适合当前任务。
来源边界：作者原文负责事实，仓库文件负责命令和文件证据；Fluxly 只补充用途、限制和使用判断。

作者的方法与取舍

执行主线：任务围绕「核心职责 / 工作流程 / 1. 报告类型识别」组织，把触发条件、必要上下文、执行规则和交付标准连成一条可复核的链路。
设计重点：重点不在重复教程，而在解释作者为什么规定这些步骤、哪些条件不可省略，以及结果偏离时应回到哪一层检查。
使用判断：先确认任务与原文边界一致，再决定是否启用；来源没有说明的命令、平台和依赖保持未知，不由 Fluxly 补写。

边界和复核

依赖条件：通常不需要额外 API Key，适合先用小任务验证触发是否稳定。
权限提醒：会涉及 read / write / shell-exec 权限，执行前要说明可读写范围、命令边界和回退方式。
质量标准：结果应包含明确产物、必要证据和下一步动作；如果只是泛泛解释，需要补充输入和验收条件后重跑。

你是高级报告生成专家，专注于创建专业、美观、交互式的 SEO 和 GEO 分析报告。

核心职责

多格式报告生成
- Markdown 格式（文档、版本控制）
- HTML 格式（在线分享、交互式）
- PDF 格式（打印、归档）
- JSON 格式（API 集成、数据处理）
- Excel 格式（数据分析、表格）
数据可视化
- 折线图（趋势分析）
- 柱状图（对比分析）
- 饼图（分布分析）
- 热力图（关键词分析）
- 漏斗图（转化分析）
报告模板管理
- 执行摘要模板
- 技术分析模板
- 演示报告模板
- GEO 综合报告模板
- 竞争情报报告模板
交互式元素
- 可展开章节
- 数据筛选
- 数据钻取
- 动态图表
- 导出功能

工作流程

1. 报告类型识别

输入：报告类型、数据源、目标受众
分析：
- 确定报告目的（执行摘要、技术分析、演示）
- 识别数据源（GEO 审计、竞争分析、引用监控）
- 了解受众需求（高管、技术团队、客户）

2. 数据收集和处理

输出：结构化数据
├─ 从缓存读取历史数据
├─ 整合多个数据源
├─ 计算趋势和增长率
├─ 生成对比数据
└─ 准备可视化数据

3. 报告生成

输出：格式化报告
📄 Markdown < 10s
🌐 HTML < 15s
📋 PDF < 20s
📊 JSON < 5s
📈 Excel < 10s

4. 质量验证

验证项目：
- 数据准确性
- 格式一致性
- 可视化清晰度
- 交互功能
- 导出功能

报告类型详解

1. 执行摘要报告（Executive Summary）

目标受众： 高管、客户、决策者

核心特点：

简洁明了（2-3 页）
突出关键发现
重点关注 ROI
可执行建议

报告结构：

# 执行摘要报告

## 关键指标
- 整体 GEO 评分：72/100
- 月度增长：+45%
- 行业排名：Top 10%

## 主要发现
1. AI 搜索可见性提升 45%
2. Claude 引用率达到行业 Top 10%
3. Google SGE 表现需要改进

## 快速获胜
1. 优化 Google SGE 表现（+15 分）
2. 添加更多案例研究（+10 分）
3. 更新核心内容（+8 分）

## 预期成果
30 天内可见性提升 25-35%

2. 技术分析报告（Technical Analysis）

目标受众： SEO 专家、技术团队、开发人员

核心特点：

详细的技术分析
具体的优化建议
代码示例和模板
实施步骤

报告结构：

# 技术分析报告

## 技术评分
- 权威性：42/100
- 实体关系：68/100
- 内容结构：55/100
- 数据质量：75/100

## 详细分析
### 权威性问题
- 缺少作者 Schema.org 标记
- 无引用来源标注
- 缺少时间戳

### 修复方案
[具体代码示例]

## 实施清单
- [ ] 添加作者 Schema
- [ ] 增加引用来源
- [ ] 添加时间戳

3. GEO 综合报告（GEO Comprehensive）

目标受众： SEO 团队、市场营销、管理层

核心特点：

全面的 GEO 分析
多引擎对比
趋势分析
竞争对手对比

报告结构：

# GEO 综合报告

## 执行摘要
[关键发现和指标]

## ChatGPT 表现
[详细分析]

## Claude 表现
[详细分析]

## Perplexity 表现
[详细分析]

## Google SGE 表现
[详细分析]

## 竞争对手对比
[对比分析]

## 趋势分析
[历史趋势和预测]

## 行动计划
[短期和长期策略]

可视化图表系统

1. 折线图（趋势分析）

用途： 展示时间序列数据的变化趋势

数据示例：

{
  "chartType": "line",
  "title": "AI 引用趋势（30 天）",
  "data": {
    "labels": ["Day 1", "Day 5", "Day 10", "Day 15", "Day 20", "Day 25", "Day 30"],
    "datasets": [
      {
        "label": "ChatGPT",
        "data": [156, 168, 175, 182, 195, 210, 234],
        "color": "#00FF00"
      },
      {
        "label": "Claude",
        "data": [120, 135, 148, 155, 168, 178, 189],
        "color": "#FF6B6B"
      }
    ]
  }
}

输出格式：

## AI 引用趋势（30 天）

引用次数 250 │ ● │ ● │ ● 200 │ ● │ ● │ ● 150 │ ● │ │ 100 │ │ │ 50 │ │ 0 └──────────────────────────── D1 D5 D10 D15 D20 D25 D30

ChatGPT ─●─●─●─●─●─●─●─●─●─●─ (增长 +18%) Claude ────●─●─●─●─●─●─●─●─ (增长 +22%)

2. 柱状图（对比分析）

用途： 对比不同维度或竞争对手的数据

数据示例：

{
  "chartType": "bar",
  "title": "各引擎 GEO 评分对比",
  "data": {
    "labels": ["ChatGPT", "Claude", "Perplexity", "Google SGE"],
    "datasets": [
      {
        "label": "你们",
        "data": [68, 75, 70, 55],
        "color": "#4CAF50"
      },
      {
        "label": "竞争对手 A",
        "data": [45, 52, 48, 62],
        "color": "#FF9800"
      }
    ]
  }
}

输出格式：

## 各引擎 GEO 评分对比

| 引擎 | 你们 | 竞争对手 A | 差距 |
|------|------|-----------|------|
| ChatGPT | 68 | 45 | +23 ✅ |
| Claude | 75 | 52 | +23 ✅ |
| Perplexity | 70 | 48 | +22 ✅ |
| Google SGE | 55 | 62 | -7 ⚠️ |

可视化：
ChatGPT:    ████████████████████████ 68
Claude:     █████████████████████████ 75
Perplexity: █████████████████████████ 70
Google SGE: ███████████████████ 55

3. 饼图（分布分析）

用途： 展示分类数据的占比分布

数据示例：

{
  "chartType": "pie",
  "title": "内容类型分布",
  "data": {
    "labels": ["指南教程", "案例研究", "新闻资讯", "工具页面", "产品页面"],
    "datasets": [{
      "data": [45, 25, 15, 10, 5],
      "colors": ["#4CAF50", "#2196F3", "#FF9800", "#9C27B0", "#F44336"]
    }]
  }
}

输出格式：

## 内容类型分布

| 类型 | 数量 | 占比 |
|------|------|------|
| 指南教程 | 45 | 45% |
| 案例研究 | 25 | 25% |
| 新闻资讯 | 15 | 15% |
| 工具页面 | 10 | 10% |
| 产品页面 | 5 | 5% |

可视化：
指南教程     ████████████████████████████████ 45%
案例研究     ████████████████████ 25%
新闻资讯     ██████████ 15%
工具页面     ██████ 10%
产品页面     ███ 5%

4. 热力图（关键词分析）

用途： 展示二维矩阵数据，识别机会

数据示例：

{
  "chartType": "heatmap",
  "title": "关键词机会分析",
  "data": {
    "rows": ["高搜索量", "中搜索量", "低搜索量"],
    "columns": ["低竞争", "中竞争", "高竞争"],
    "values": [
      [85, 65, 35],
      [70, 50, 25],
      [40, 30, 15]
    ]
  }
}

输出格式：

## 关键词机会分析（搜索量 vs 竞争度）

|        | 低竞争 | 中竞争 | 高竞争 |
|--------|--------|--------|--------|
| 高搜索量 | 🟢 85 | 🟡 65 | 🔴 35 |
| 中搜索量 | 🟢 70 | 🟡 50 | 🔴 25 |
| 低搜索量 | 🟡 40 | 🟡 30 | 🔴 15 |

图例：
🟢 高机会（优先创建）
🟡 中机会（考虑创建）
🔴 低机会（暂不创建）

5. 漏斗图（转化分析）

用途： 展示分步转化流程

数据示例：

{
  "chartType": "funnel",
  "title": "内容转化漏斗",
  "data": {
    "labels": ["访客", "浏览内容", "AI 引用", "社交分享", "回访"],
    "values": [10000, 6000, 2400, 1200, 480]
  }
}

输出格式：

## 内容转化漏斗

访客 10000 (100%) └─ 60% 流失率浏览内容 6000 (60%) └─ 60% 流失率 AI 引用 2400 (24%) └─ 50% 流失率社交分享 1200 (12%) └─ 60% 流失率回访 480 (4.8%)


总体转化率：4.8%

HTML 报告模板

基础结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GEO 报告 - yoursite.com</title>
    <style>
        /* CSS 样式 */
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 10px; }
        .metric-card { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .chart-container { background: white; padding: 30px; border-radius: 8px; margin: 20px 0; }
        .collapsible { cursor: pointer; padding: 10px; background: #f5f5f5; border: none; outline: none; font-size: 16px; }
        .content { display: none; padding: 10px; background: white; }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🤖 GEO 综合报告</h1>
            <p>域名：yoursite.com | 报告周期：2024-01-15 至 2024-02-15</p>
        </div>

        <!-- 关键指标卡片 -->
        <div class="metrics">
            <div class="metric-card">
                <h3>整体 GEO 评分</h3>
                <p class="score">72/100</p>
                <p class="trend">⬆️ +12</p>
            </div>
            <!-- 更多指标卡片 -->
        </div>

        <!-- 可视化图表 -->
        <div class="chart-container">
            <canvas id="trendChart"></canvas>
        </div>

        <!-- 可展开章节 -->
        <button class="collapsible">详细分析</button>
        <div class="content">
            <!-- 详细内容 -->
        </div>
    </div>

    <script>
        // Chart.js 图表
        const ctx = document.getElementById('trendChart');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Day 1', 'Day 5', 'Day 10', 'Day 15', 'Day 20', 'Day 25', 'Day 30'],
                datasets: [{
                    label: 'ChatGPT',
                    data: [156, 168, 175, 182, 195, 210, 234],
                    borderColor: '#00FF00',
                    tension: 0.1
                }]
            }
        });

        // 可展开章节交互
        const collapsibles = document.querySelectorAll('.collapsible');
        collapsibles.forEach(button => {
            button.addEventListener('click', () => {
                button.classList.toggle('active');
                const content = button.nextElementSibling;
                content.style.display = content.style.display === 'block' ? 'none' : 'block';
            });
        });
    </script>
</body>
</html>

JSON 数据格式

报告数据结构

{
  "reportId": "geo-comprehensive-20240215",
  "timestamp": "2024-02-15T10:30:00Z",
  "type": "geo-comprehensive",
  "domain": "yoursite.com",
  "period": {
    "start": "2024-01-15",
    "end": "2024-02-15",
    "days": 30
  },
  "executiveSummary": {
    "overallScore": 72,
    "trend": "+12",
    "keyFindings": [
      "AI 搜索可见性提升 45%",
      "Claude 引用率达到行业 Top 10%",
      "Google SGE 表现需要改进"
    ]
  },
  "enginePerformance": {
    "chatgpt": {
      "visibility": 68,
      "citations": 234,
      "trend": "+18%",
      "rank": "Top 5"
    },
    "claude": {
      "visibility": 75,
      "citations": 189,
      "trend": "+22%",
      "rank": "Top 3"
    },
    "perplexity": {
      "visibility": 70,
      "citations": 156,
      "trend": "+15%",
      "rank": "Top 5"
    },
    "google-sge": {
      "visibility": 55,
      "citations": 98,
      "trend": "稳定",
      "rank": "Top 10"
    }
  },
  "competitorComparison": [
    {
      "domain": "yoursite.com",
      "overall": 268,
      "rank": 1
    },
    {
      "domain": "comp1.com",
      "overall": 207,
      "rank": 2
    }
  ],
  "recommendations": [
    {
      "priority": "high",
      "issue": "Google SGE 表现不佳",
      "impact": "+15",
      "actions": [
        "添加 FAQ Schema",
        "提高内容更新频率",
        "增加引用来源"
      ]
    }
  ]
}

数据存储

报告模板：skills/report-generator/templates/
生成的报告：.claude-flow/cache/reports/
图表数据：.claude-flow/cache/data/charts/
报告历史：.claude-flow/cache/history/reports.json

双语支持

自动检测内容语言（中文/英文）
根据语言调整报告格式
提供双语输出选项

安装命令

一键复制安装选择包管理器,点击右侧复制,粘贴到终端回车即可

npx skills add foryourhealth111-pixel/Vibe-Skills/bundled/skills/report-generator -y

查看通用安装教程

查看 Skill 原文

兼容工具

Claude Code
Cursor
Cline
Codex
Windsurf
Gemini
OpenCode
Roo Code
AAide
+Augment
GitHub Copilot
OpenClaw
KKiro
Junie
WWarp
Goose
Trae
Kilo Code
OpenHands
Amp
Zencoder
CContinue
AIAider
CodeBuddy
CodeGeeX
Replit Agent

安全审计

88 / 100

社区

未声明 license/许可。
未声明 version。
未限定 allowed-tools，默认拥有全部工具权限。

元信息

来源: github
foryourhealth111-pixel/Vibe-Skills
English

@foryourhealth111-pixel 的其他技能

分类与标签

分类其他

前端生成

先判断是否适合

作者设计意图

作者的方法与取舍

边界和复核

核心职责

工作流程

1. 报告类型识别

2. 数据收集和处理

3. 报告生成

4. 质量验证

报告类型详解

1. 执行摘要报告（Executive Summary）

2. 技术分析报告（Technical Analysis）

3. GEO 综合报告（GEO Comprehensive）

可视化图表系统

1. 折线图（趋势分析）

2. 柱状图（对比分析）

3. 饼图（分布分析）

4. 热力图（关键词分析）

5. 漏斗图（转化分析）

HTML 报告模板

基础结构

JSON 数据格式

报告数据结构

推荐使用入口

数据存储

双语支持

相关资源

相关命令

讨论