Token导航 LogoToken导航TokenDH.com
中转站排行榜
研究检索需要联网github未标认证来源可访问许可证需确认审计通过

frontend-page-discovery（前端页面发现）

Agent Skill

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

总安装

1,886

周安装

81

GitHub Stars

7

下载量

661
CodexClaudeCursorGemini CLI

安装说明

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

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

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

请帮我安装这个 Agent Skill：frontend-page-discovery（前端页面发现）
来源仓库：https://github.com/zixun-github/aisdlc
仓库路径：skills/frontend-page-discovery
安装命令：
npx skills add https://github.com/zixun-github/aisdlc --skill frontend-page-discovery
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

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

skills.shnpx skills
npx skills add https://github.com/zixun-github/aisdlc --skill frontend-page-discovery

简介

遍历前端项目路由与页面结构的可视化分析。

  • 生成页面依赖图与导航树形结构。适用宿主包括 Codex、Claude、Cursor、Gemini CLI，接入前应确认版本、权限和运行环境要求。
  • 辅助 SEO 优化与代码分割策略制定。
  • SPA 项目需暴露路由配置供准确解析。
  • frontend-page-discovery 属于研究检索类 Skill，可作为该场景下的辅助能力补充。

SKILL.md

前端页面清单逆向（证据化）

概览

目标：基于代码证据生成页面清单与单页说明文档（落盘到 docs/）。

何时使用 / 何时不使用

使用时机（触发信号）

  • 你需要从前端代码得出可追溯的页面清单，并继续提炼流程/规则
  • 项目路由入口复杂：多 SPA/微前端/多框架共存、运行时注入路由、后端下发菜单
  • 团队常见问题：漏页、重复页、权限/动态路由无法落盘、规则总结缺证据

不使用时机

  • 你只需要写 PRD/原型（这不是代码逆向）
  • 你被要求“没代码也要给出你项目的真实页面清单/规则结论”（此时只能交付模板/示例，不能输出事实）

本技能的默认交付物（落盘到.aisdlc/project/frontend/）

  • .aisdlc/project/frontend/pages/index.md
  • .aisdlc/project/frontend/pages/<page_id>.md
  • .aisdlc/project/frontend/flows/index.md
  • .aisdlc/project/frontend/conflicts.md

落盘模板（最小可用，可直接复制）

本技能的输出模板已迁移到 assets/ 目录，以减少技能正文长度并保持模板可复用。

模板映射：

  • .aisdlc/project/frontend/pages/index.md ← <本SKILL.md目录>/assets/pages-index-template.md
  • .aisdlc/project/frontend/pages/<page_id>.md ← <本SKILL.md目录>/assets/page-template.md
  • .aisdlc/project/frontend/flows/index.md ← <本SKILL.md目录>/assets/flows-index-template.md
  • .aisdlc/project/frontend/conflicts.md ← <本SKILL.md目录>/assets/conflicts-template.md

硬规则（出现任一条：停止并纠正）

  1. 禁止脑补

- 任何“页面/流程/规则”必须能指向证据（见下方证据格式）；否则写入 Evidence Gaps，不得写推测性结论。

  1. 事实与示例必须物理隔离

- 若用户要求“大胆假设、不用证据”，只能输出 EXAMPLE（示例） 区块或模板；不得把示例写成项目事实，也不得与事实表格混排。

  1. 输出字段必须齐全

- 页面索引必须包含 module_name page_id page_name。 - 单页必须包含 page_name breadcrumb ascii_wireframe 核心任务 关键规则摘要。

页面线框图（ASCII）证据门禁（强制）

目标：线框图只能“复述代码已经存在的 UI”，不能“补齐一个你觉得应该有的后台页面”。

硬门禁（任一不满足：线框图不得落笔，只能写 Evidence Gaps）

  • 逐项映射：线框图里出现的每一个可见元素（标题/按钮/字段名/列头/Tab/文案/菜单项/操作）都必须能映射到至少 1 条前端代码证据（file + lines + excerpt）。
  • 不允许“常识补全”：不得因为“常见后台都这样”“看起来更完整”“负责人催交/不许说缺信息”就新增筛选条件、导出、批量操作、侧边栏菜单、统计卡片、发票下载、时间线等控件。
  • 未知要显式：证据不足时，用占位符 UNKNOWN(...) 表达未知，而不是写一个“合理猜测”的具体字段/文案；并把未知项逐条写入 Evidence Gaps。

- 重要限制：UNKNOWN(...) 只能用于“已证据化存在，但细节不全”的元素（例如：代码存在按钮但文案是 i18n key 未解析）。禁止用 UNKNOWN(...) 伪装新增控件/区域（例如：没证据也画 UNKNOWN(Export) / UNKNOWN(侧边栏菜单)）。

推荐输出结构（先证据、后画图）

  • 控件/区域清单（必做）：先列出 UI 元素清单（例如：标题、主操作按钮、搜索框、筛选项、表格列、行操作、弹窗字段、状态文案），每行都带证据。
  • 再生成 ascii_wireframe：只允许使用“清单里已证据化的元素”；没有证据的区域只能写 UNKNOWN(...)。

证据提取优先级（建议顺序）

  • 路由与页面入口：路由表/路由注入点/后端菜单适配器 → 定位 page component 文件
  • 页面标题与面包屑：页面 header 组件、<h1>、document.title/useTitle、breadcrumb 组件传参、i18n key
  • 主操作与工具栏：按钮文案（含 i18n）、icon+aria-label、onClick 跳转/打开弹窗的调用点
  • 筛选/表单：表单 schema、name/label/placeholder、校验规则、默认值
  • 列表/表格：columns 定义（title/key/render）、行操作 menu、分页参数
  • 状态文案：empty/loading/error/403 组件与文案；若只看到通用组件但无法确认本页是否使用，按 UNKNOWN 处理

常见借口 → 必须如何处理（防脑补）

借口/压力话术正确做法（强制）
“按经验补全就行 / 更像真实产品”只能输出 EXAMPLE（示例）；事实线框图仍按证据门禁。
“不能说缺信息，必须交付”交付 UNKNOWN(...) + Evidence Gaps；不得把未知写成具体字段/按钮。
“模板里有筛选区/导出/批量操作”模板只是骨架；未被代码证据覆盖的控件必须保留为 UNKNOWN(...) 或删除。
“至少把空态/加载/错误态都写上”只有在代码/组件/文案可定位时才写；否则标为 UNKNOWN(state) 并进 Evidence Gaps。

红旗清单（出现即停止纠正）

  • “我先画一个完整的，再回头找证据补”
  • “这类页面通常会有……（导出/批量/时间筛选/角色部门/统计卡片）”
  • “代码没写，但产品上应该有……”
  • “没关系，先写个大概”
  • “我用 UNKNOWN(...) 先占位，把页面画完整”

证据格式（统一可复核）

每条结论至少附 1 条证据：

  • type：page_title | route_decl | file_convention | menu_static | menu_backend | nav_call | guard | api_call | state_machine | form_validation | other
  • file：相对路径
  • lines：start-end
  • excerpt：1–3 行关键摘录（原文）

缺证据时，必须写：

  • gap：缺什么证据
  • candidate_locations：可能在哪里找到（目录/文件类型/关键词）
  • impact：对结论的影响（例如“无法确认是否存在后端下发菜单导致的隐藏页面”）

输出字段（必须出现在最终结果里）

  • 页面索引：module_name page_id page_name
  • 单页：page_name breadcrumb ascii_wireframe 核心任务 关键规则摘要

适合场景

01

用户想查找某类 Agent Skill 时

02

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

03

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

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

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

能力 4

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

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

平台分布

Codex

36.87%
按下载量换算244

Claude

30.55%
按下载量换算202

Cursor

18.77%
按下载量换算124

Gemini CLI

9.66%
按下载量换算64

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

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

来源信息

GitHub 仓库

github.com

/zixun-github/aisdlc

SKILL.md 来源

github.com

/zixun-github/aisdlc/tree/main/skills/frontend-page-discovery

skills-sh

skills.sh

/zixun-github/aisdlc/frontend-page-discovery

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

frontend-nextjs（frontend Next.js 搜索）

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

下一个 Skill

frontend-patterns（前端模式）

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