eliteforge-frontend-onboarding

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

EliteForge Frontend Onboarding

EliteForge 前端入门引导

This skill drives the first frontend development pass from a Google Stitch export. It must keep implementation incremental, auditable, and gated by user confirmation.

本技能用于驱动从Google Stitch导出文件开始的首次前端开发流程。必须确保实现过程是增量式、可审计的，且需经过用户确认才能推进。

Mandatory orchestration rule

强制编排规则

Before reading or modifying project files, activate and use

$eliteforge-task-progress-tracker

Create a top-level task named exactly:

text

frontend-onboarding

The task must contain these four steps:

Read
```
tech-stack.md
```
; initialize/create the frontend project in the current directory according to the required stack.
Read
```
design.md
```
/
```
prd.md
```
; randomly select two prototype pages containing HTML and image files; implement shared layout components and enforce page consistency such as sidebar and navigation bar.
Traverse the Google Stitch folder; implement every prototype page in sequence with mock data first while reserving backend API calls.
Check whether all prototype pages have been implemented.

For each step

, create a child task named exactly:

text

frontend-onboarding-N

Do not proceed from one step to the next until the user explicitly confirms the step result. After finishing a step, update the tracker with deliverables, touched files, validation commands, known gaps, and pending decisions, then ask for confirmation. If the tracker supports a waiting state, mark the step as waiting for user confirmation. After confirmation, mark the child task completed and start the next child task.

在读取或修改项目文件之前，需激活并使用

$eliteforge-task-progress-tracker

。

创建一个名称完全为以下内容的顶级任务：

text

frontend-onboarding

该任务必须包含以下四个步骤：

读取
```
tech-stack.md
```
；根据要求的技术栈在当前目录初始化/创建前端项目。
读取
```
design.md
```
/
```
prd.md
```
；随机选择两个包含HTML和图片文件的原型页面；实现共享布局组件，并确保侧边栏、导航栏等页面元素风格统一。
遍历Google Stitch文件夹；按顺序实现每个原型页面，先使用模拟数据，同时预留后端API调用接口。
检查所有原型页面是否已完成实现。

对于每个步骤

，创建一个名称完全为以下内容的子任务：

text

frontend-onboarding-N

在用户明确确认步骤结果之前，不得推进到下一步。完成一个步骤后，更新追踪器，记录交付物、修改的文件、验证命令、已知问题和待决策事项，然后请求用户确认。如果追踪器支持等待状态，将该步骤标记为等待用户确认。确认后，标记子任务为已完成，再启动下一个子任务。

Trigger conditions

触发条件

Use this skill when a task mentions any of these contexts:

Google Stitch prototype, Stitch export, prototype ZIP, page HTML plus screen image.
First frontend pass, frontend onboarding, frontend project initialization, UI landing from prototype.
Requirements to read
```
tech-stack.md
```
,
```
design.md
```
,
```
prd.md
```
, and implement multiple pages progressively.
Explicit use of
```
$eliteforge-task-progress-tracker
```
with confirmation-gated subtasks.

当任务提及以下任一场景时，使用本技能：

Google Stitch原型、Stitch导出文件、原型ZIP包、页面HTML加屏幕截图。
首次前端实现、前端入门引导、前端项目初始化、从原型生成UI页面。
需要读取
```
tech-stack.md
```
、
```
design.md
```
、
```
prd.md
```
并逐步实现多个页面的需求。
明确要求结合用户确认的子任务使用
```
$eliteforge-task-progress-tracker
```
。

Required inputs and discovery

必要输入与发现

Work from the current directory unless the user provided a different path.

Expected project/prototype inputs:

```
tech-stack.md
```
in the current directory.
A Google Stitch export directory or ZIP containing page directories.
Product document candidates:
```
prd.md
```
,
```
*_prd.md
```
, or similar.
Design document candidates:
```
design.md
```
,
```
DESIGN.md
```
, or a nested design markdown file.
Page prototype directories containing at least
```
code.html
```
and usually an image such as
```
screen.png
```
.

When file names differ from the canonical names, locate reasonable equivalents and record the mapping in the tracker. Do not silently ignore missing

tech-stack.md

; treat it as a blocker for step 1.

Optional helper scripts:

```
scripts/stitch_manifest.sh
```
scans a Stitch ZIP or folder and prints docs plus page prototype inventory.
```
scripts/coverage_check.sh
```
compares discovered prototype page names with an implementation tracking file.

Read references/frontend-onboarding-workflow.md for detailed step instructions. Read references/google-stitch-implementation-guide.md before translating Stitch HTML/images into frontend components.

除非用户指定了其他路径，否则在当前目录下工作。

预期的项目/原型输入：

当前目录下的
```
tech-stack.md
```
。
包含页面目录的Google Stitch导出目录或ZIP包。
产品文档候选：
```
prd.md
```
、
```
*_prd.md
```
或类似文件。
设计文档候选：
```
design.md
```
、
```
DESIGN.md
```
或嵌套的设计markdown文件。
包含至少
```
code.html
```
且通常包含
```
screen.png
```
等图片的页面原型目录。

当文件名与标准名称不同时，找到合理的等效文件，并在追踪器中记录映射关系。不得忽略缺失的

tech-stack.md

；将其视为步骤1的阻塞项。

可选辅助脚本：

```
scripts/stitch_manifest.sh
```
：扫描Stitch ZIP包或文件夹，打印文档及页面原型清单。
```
scripts/coverage_check.sh
```
：将发现的原型页面名称与实现跟踪文件进行对比。

阅读references/frontend-onboarding-workflow.md获取详细的步骤说明。在将Stitch HTML/图片转换为前端组件之前，请阅读references/google-stitch-implementation-guide.md。

Operating principles

操作原则

Respect
```
tech-stack.md
```
over all generic assumptions. Do not impose React/Vue/Next/Tailwind unless the stack document requires or permits it.
Initialize in the current directory. Avoid creating an extra nested app directory unless the stack document explicitly requires it.
Never delete existing user files to make initialization easier. If the directory is non-empty, merge carefully and record conflicts.
Use the prototype HTML as structural evidence and the image as visual evidence. When they conflict, prefer the image for visible layout and the PRD/design docs for product intent.
Build shared layout primitives before duplicating page code: app shell, sidebar, top navigation, page header, cards, tables, form controls, status badges, empty states, pagination, drawers/modals, and floating agent/help entry points when present.
Mock data is acceptable only for the first pass. API boundary functions, typed DTOs, service modules, or adapter interfaces must be present so the mock can be replaced without changing page components.
Maintain a local implementation ledger at
```
.eliteforge/frontend-onboarding/implemented-pages.txt
```
. Append one source prototype page name per line only after its route/page/component has been implemented.
Maintain
```
.eliteforge/frontend-onboarding/state.md
```
with source paths, selected seed pages, route mapping, validation commands, and decisions.

优先遵循
```
tech-stack.md
```
，而非通用假设。除非技术栈文档要求或允许，否则不得强加React/Vue/Next/Tailwind等技术。
在当前目录初始化项目。除非技术栈文档明确要求，否则避免创建额外的嵌套应用目录。
不得为了简化初始化而删除用户现有文件。如果目录非空，需谨慎合并并记录冲突。
将原型HTML作为结构依据，图片作为视觉依据。当两者冲突时，视觉布局优先参考图片，产品意图优先参考PRD/设计文档。
在复制页面代码之前，先构建共享布局基础组件：应用外壳、侧边栏、顶部导航、页面标题、卡片、表格、表单控件、状态徽章、空状态、分页、抽屉/模态框，以及存在的浮动Agent/帮助入口点。
首次实现中使用模拟数据是可接受的，但必须具备API边界函数、类型化DTO、服务模块或适配器接口，以便无需修改页面组件即可替换模拟数据。
在
```
.eliteforge/frontend-onboarding/implemented-pages.txt
```
维护本地实现记录。只有当路由/页面/组件完成实现后，才在文件中追加一行源原型页面名称。
在
```
.eliteforge/frontend-onboarding/state.md
```
中维护源路径、选定的种子页面、路由映射、验证命令和决策记录。

Step gate contract

步骤关卡约定

At the end of every step, respond with:

Tracker task/subtask updated.
Files created or modified.
Validation run and result.
What is ready for review.
Explicit request for user confirmation to continue.

Do not start the next step in the same response unless the user has already confirmed it in a prior message.

每个步骤结束时，需回复以下内容：

追踪器任务/子任务已更新。
创建或修改的文件。
验证执行结果。
可供审核的内容。
明确请求用户确认以继续推进。

除非用户在之前的消息中已确认，否则不得在同一回复中启动下一步骤。

Completion criteria

完成标准

The first pass is complete only when:

The frontend project exists in the current directory and follows
```
tech-stack.md
```
.
Shared layout and design tokens/components are extracted from docs plus two randomly selected seed pages.
Every Stitch page directory containing
```
code.html
```
has a corresponding route/page/component or documented equivalent.
Each page uses mock data through an API-ready boundary.
Coverage check shows no missing prototype pages.
The tracker contains completed child tasks
```
frontend-onboarding-1
```
through
```
frontend-onboarding-4
```
.

只有满足以下所有条件时，首次实现才算完成：

当前目录下存在符合
```
tech-stack.md
```
要求的前端项目。
从文档及两个随机选定的种子页面中提取了共享布局和设计令牌/组件。
每个包含
```
code.html
```
的Stitch页面目录都有对应的路由/页面/组件或已记录的等效实现。
每个页面通过支持API调用的边界使用模拟数据。
覆盖率检查显示没有遗漏的原型页面。

追踪器包含已完成的子任务

frontend-onboarding-1

至

frontend-onboarding-4

。