Imported from furutachiKurea/meal-card (.agents/skills/frontend-page-recorder/SKILL.md). Install upstream with npx skills add furutachiKurea/meal-card --skill frontend-page-recorder. Copyright stays with the author.

Purpose

Name: frontend-page-recorder
Author: furutachiKurea

记录页面、组件、交互、状态变化这些前端信息，避免后面只能靠翻代码回忆。

When to use

在这些情况下使用：

新增页面
页面结构明显变化
核心组件新增或重构
页面跳转关系变化
用户操作流程被明确
页面状态流被明确
某个交互细节值得沉淀

Output location

统一写到：

frontend/docs/course-docs/pages/
frontend/docs/course-docs/components/
frontend/docs/course-docs/ui/

如果目录不存在，先创建。

What to record

页面

页面是干什么的
页面有哪些主要区域
用户在页面上能做什么
页面会调用哪些接口
页面有哪些状态
页面之间怎么跳

组件

组件负责什么
接收什么输入
触发什么输出
依赖什么状态或其他组件

交互

用户操作后发生什么
前端做了什么校验
页面反馈是什么
状态如何变化

Workflow

先判断这次变化属于页面、组件还是交互。
重点记职责、边界、状态、跳转。
单纯样式微调可以不记。
不强行要求截图。
不写"页面更美观了"这类废话。

File suggestion

frontend/docs/course-docs/pages/<page-name>.md
frontend/docs/course-docs/components/<component-name>.md
frontend/docs/course-docs/ui/<feature-name>.md

Output template

# <名称>

## 作用
- ...

## 结构
- ...
- ...

## 用户操作
- ...
- ...

## 状态变化
- ...
- ...

## 接口依赖
- ...
- ...

## 备注 / 待确认
- ...

Rules

只写前端关键信息。
不写编号、参与者、频率。
不写纯视觉评价。
以"这个页面/组件到底怎么工作"为核心。

{ "ocm": "1", "id": "furutachikurea-meal-card-frontend-page-recorder", "kind": "skill", "name": "frontend-page-recorder", "description": "当新增页面、调整页面结构、修改组件职责、补充交互流程、梳理前端状态变化时使用。只处理前端内容，并把文档写到 frontend/docs/course-docs 下。这个是为我们课设服务的，你必须及时的调用这个 skill", "publisher": "furutachiKurea", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "当新增页面、调整页面结构、修改组件职责、补充交互流程、梳理前端状态变化时使用。只处理前端内容，并把文档写到 frontend/docs/course-docs 下。这个是为我们课设服务的，你必须及时的调用这个 skill" ], "primary": false, "metadata": { "source": { "provider": "github", "repository": "https://github.com/furutachiKurea/meal-card", "path": ".agents/skills/frontend-page-recorder/SKILL.md", "ref": "8d99df7e8dd5cb14246fc926f5d655efa5f9539c", "url": "https://github.com/furutachiKurea/meal-card/blob/8d99df7e8dd5cb14246fc926f5d655efa5f9539c/.agents/skills/frontend-page-recorder/SKILL.md", "key": "furutachiKurea/meal-card/.agents/skills/frontend-page-recorder/SKILL.md" } }, "instructions": "# Purpose\n\n记录页面、组件、交互、状态变化这些前端信息，避免后面只能靠翻代码回忆。\n\n# When to use\n\n在这些情况下使用：\n\n1. 新增页面\n2. 页面结构明显变化\n3. 核心组件新增或重构\n4. 页面跳转关系变化\n5. 用户操作流程被明确\n6. 页面状态流被明确\n7. 某个交互细节值得沉淀\n\n# Output location\n\n统一写到：\n\n- `frontend/docs/course-docs/pages/`\n- `frontend/docs/course-docs/components/`\n- `frontend/docs/course-docs/ui/`\n\n如果目录不存在，先创建。\n\n# What to record\n\n## 页面\n- 页面是干什么的\n- 页面有哪些主要区域\n- 用户在页面上能做什么\n- 页面会调用哪些接口\n- 页面有哪些状态\n- 页面之间怎么跳\n\n## 组件\n- 组件负责什么\n- 接收什么输入\n- 触发什么输出\n- 依赖什么状态或其他组件\n\n## 交互\n- 用户操作后发生什么\n- 前端做了什么校验\n- 页面反馈是什么\n- 状态如何变化\n\n# Workflow\n\n1. 先判断这次变化属于页面、组件还是交互。\n2. 重点记职责、边界、状态、跳转。\n3. 单纯样式微调可以不记。\n4. 不强行要求截图。\n5. 不写\"页面更美观了\"这类废话", "cost": { "context_tokens": 252 } }

frontend-page-recorder

About

Purpose

When to use

Output location

What to record

页面

组件

交互

Workflow

File suggestion

Output template

Rules

Use it

Manifest

Reviews