Token导航 LogoToken导航TokenDH.com
效率只读clawhub未标认证来源可访问clear审计通过

frontend-tech-doc-guide前端技术文档指南

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码,整理组件结构,或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式,避免只生成孤立片段;涉及页面改动时,应配合本地预览和构建检查确认视觉效果。

总安装

3,189

周安装

137

GitHub Stars

公开资料未说明

下载量

1,118
OpenClaw

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

2

许可证

MIT-0

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:frontend-tech-doc-guide(前端技术文档指南)
来源仓库:https://github.com/kelaner/frontend-tech-doc-guide
安装命令:
openclaw skills install frontend-tech-doc-guide
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 OpenClaw 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

ClawHubOpenClaw
openclaw skills install frontend-tech-doc-guide

简介

规范 AI 生成飞书技术文档结构,确保 Markdown 层级正确、章节顺序稳定、可读性高。

SKILL.md

name
frontend-tech-doc-guide
description
规范 AI 生成飞书技术文档结构,确保 Markdown 层级正确、章节顺序稳定、可读性高。
metadata
{"openclaw":{"emoji":"📚","auto":true}}

一、文档结构规则(必须严格遵守)

1. 标题层级规则

文档标题层级 必须严格按以下结构生成,不允许跳级

# 文档标题

# 一、需求认知
需求 PRD:xx
飞书项目:xx
后端文档:xx
UI 设计稿:xx

- 需求背景
- 需求目标
- 核心/特殊改动点

# 二、项目排期
<!-- 评估需求开发内容量,根据复杂度和时间成本,合理分配项目排期。 -->

# 三、功能流程
<!-- 全部使用 mermaid 流程图 表示 -->
## 1. 页面流程
## 2. 功能流程
## ...其他流程

# 四、需求拆分
<!-- 详细描述需求功能模块,包括前端需求点以及所对应的后端接口。 -->
<!-- 需要考虑到边界情况以及异常处理。 -->

# 五、业务埋点 & Sentry 监控
<!-- 埋点信息从需求 PRD 中获得,关注参数,触发时机 -->
<!-- 埋点需要生成 mermaid 操作路径 -->
<!-- 特殊报错需要使用 Sentry 监控输出 -->

# 六、数据链路
<!-- 使用 mermaid 绘制用户在页面的活动链路 -->


# 七、提测信息
<!-- 使用表格格式,表头:模块、内容、备注 -->
<!-- 第一列:提测项目,提测环境 -->

# 八、验收与上线
<!-- 使用表格格式,表头:项目,上线 TAG -->


# 九、待确认问题
<!-- 使用表格格式,表头:问题,结论 -->

二、章节生成顺序(防止内容错位)

AI 必须严格按以下顺序生成内容

  1. 需求认知
  2. 项目排期
  3. 功能流程
  4. 需求拆分
  5. 业务埋点 & Sentry 监控
  6. 数据链路
  7. 提测信息
  8. 验收上线
  9. 待确认问题

关键约束

生成时必须遵守:

  • 不得提前生成后续章节内容
  • 不得回写前文
  • 不得复制后文内容到前文

例如禁止出现:

开头出现:
第7章内容
第8章内容

若模型生成时出现重复章节,必须:

  • 删除重复段
  • 保留第一次出现的位置

三、段落排版规则(提升可读性)

AI 生成内容时 禁止连续长文本块

每段说明 必须拆分为以下结构之一

1 优先使用列表

错误示例:

系统需要完成登录、鉴权、资格校验、任务获取、抽奖逻辑等功能。

正确示例:

系统主要流程包括:

- 登录
- 身份鉴权
- 资格校验
- 任务获取
- 抽奖执行

2 技术描述必须结构化

统一使用 模块结构

模块名称

- 功能说明
- 接口
- 关键逻辑
- 依赖

示例:

### 积分活动模块

功能:

- 展示用户积分
- 提供抽奖入口

接口:

- getUserPoints
- drawLottery

关键逻辑:

- 未登录先触发登录
- 积分不足提示

四、流程章节规范(必须包含 Mermaid)

流程章节 必须包含 Mermaid 图

示例:

flowchart TD
  Entry[活动入口] --> Login{是否登录}
  Login -- 否 --> Auth[手机号授权]
  Login -- 是 --> Check[资格校验]
  Check --> Task[任务列表]
  Task --> Draw[抽奖]
  Draw --> Result[结果弹窗]

生成规则:

  • Mermaid 只允许出现一次代码块
  • 使用 <br/> 换行
  • 不允许使用 `\

`


五、模块拆分规则

模块章节必须按以下格式生成:

## 模块名称

功能:

- xxx
- xxx

核心逻辑:

- xxx
- xxx

接口:

| 接口 | 说明 |
|----|----|
| getTask | 获取任务 |
| drawLottery | 抽奖 |

依赖:

- 风控接口
- 奖品接口

禁止生成 长段技术说明文字


六、埋点章节格式

必须使用表格。

示例:

事件code触发时机参数
页面曝光page_view页面加载...
抽奖点击draw_click点击抽奖...
抽奖成功draw_success返回中奖中奖结果

七、提测信息格式

表格结构

八、AI 生成质量规则(重点)

AI 在生成文档前必须执行:

1 章节检查

确认存在以下章节:

  • 需求认知
  • 项目排期
  • 功能流程
  • 需求拆分
  • 业务埋点 & Sentry 监控
  • 数据链路
  • 提测信息
  • 验收上线
  • 待确认问题

缺一不可。


2 排版检查

确保:

  • 无连续超过 5 行纯文本段落
  • 必须包含

* 列表 * 表格 * Mermaid


九、AI 输出限制

AI 输出文档时必须遵守:

1 不输出解释

只输出 Markdown 文档

2 不输出多版本

只输出最终版本

3 不输出空章节

无内容时写:

待补充

十、推荐文档标题格式

【YYMMDD】活动简称-前端技术方案

示例:

【260320】春季直播活动-前端技术方案

十一、生成目标

AI 生成的文档必须达到:

  • Markdown 层级正确
  • 飞书渲染结构稳定
  • 章节顺序正确
  • 信息结构化
  • 可读性高

否则视为生成失败。

适合场景

01

OpenClaw 用户查找和安装 Skill 时

02

用户想查找某类 Agent Skill 时

03

需要根据任务场景推荐可安装能力包时

04

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

能力 5

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

OpenClaw

94.19%
按下载量换算1,053

安全审计

VirusTotal

通过

ClawScan

通过

Static analysis

通过

权限和风险

只读

该 Skill 主要提供规则、说明或参考内容,本身偏只读;真正读写文件、联网或执行命令仍取决于宿主 Agent 的任务。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源,正式发布前建议补源仓库或其他目录站核验。

来源信息

继续浏览同类 Skills