workshop-local-run

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Workshop local-run

Workshop本地运行

Open the student's local HTML or Next.js prototype in a browser. The student does not use the terminal.

This skill does not write PRDs, change MVP functions, edit product code, or deploy (no GitHub / Vercel / Supabase).

When a product skill is already running, keep that product skill in charge of stages. This skill only checks and starts the local prototype.

在浏览器中打开学员的本地HTML或Next.js原型。学员无需使用终端。

本skill不负责撰写PRD、修改MVP功能、编辑产品代码或部署（不涉及GitHub / Vercel / Supabase）。

若已有产品skill在运行，仍由该产品skill负责各阶段流程。本skill仅负责检查并启动本地原型。

Required references

必要参考资料

Before running commands, read:

```
references/checks.md
```
— OS detect, Node, folder, port, install, open browser
```
references/errors.md
```
— error text → one student sentence

执行命令前，请阅读：

```
references/checks.md
```
— 系统检测、Node、文件夹、端口、安装、打开浏览器
```
references/errors.md
```
— 错误文本 → 转化为学员易懂的单句表述

Caller handshake

调用方交互约定

If invoked from

hr-workshop-mvp-flow

or a Group wrapper, use what they passed:

Field	Meaning	If missing
`mode`	`preflight` or `repair`	Detect: student confirmed a plan → `preflight` ; student said it will not run → `repair`
`kind`	`html` or `nextjs`	Detect from files (below)
`projectDir`	Folder that contains the app	Search from `pwd` for `package.json` with a `dev` script, or a workshop `.html`
`successPath`	Path to open after Next.js starts (e.g. `/login` )	`/` unless the running app's routes show a better first page

Do not assume Group 6 paths (

talent-mapping-next

/login

) unless that instructor wrapper is explicitly active.

若由

hr-workshop-mvp-flow

或Group包装器调用，请使用其传入的参数：

字段	含义	缺失时处理方式
`mode`	`preflight` （预检）或 `repair` （修复）	检测逻辑：学员确认了计划 → `preflight` ；学员反馈无法运行 → `repair`
`kind`	`html` 或 `nextjs`	根据文件检测（见下文）
`projectDir`	包含应用的文件夹	从当前目录 `pwd` 搜索带有 `dev` 脚本的 `package.json` ，或workshop对应的 `.html` 文件
`successPath`	Next.js启动后要打开的路径（例如 `/login` ）	除非运行中应用的路由显示更合适的初始页面，否则默认使用 `/`

除非明确激活了Group 6的包装器，否则不要默认使用Group 6的路径（

talent-mapping-next

、

/login

）。

Two entry points, one core

两个入口，一套核心逻辑

Preflight — student confirmed the HTML or Next.js plan. Run the core loop before writing app files or running

npm

. If class is

Ready

, say one sentence that they can start, then return to the product skill.

Repair — student says it will not open, nothing happens, terminal error, or blank page. Same core loop; then open the page.

Standalone prompts such as

Node 沒裝

npm run dev 不行

use Repair.

预检（Preflight） — 学员确认了HTML或Next.js的运行计划。在编写应用文件或执行

npm

命令前先运行核心循环。若判定为

Ready

状态，告知学员可以开始，然后返回产品skill。

修复（Repair） — 学员反馈无法打开页面、无响应、终端报错或页面空白。执行相同的核心循环，然后打开页面。

诸如「Node 沒裝」或「npm run dev 不行」的独立求助请求，使用**修复（Repair）**模式。

Core loop

核心循环

Read-only checks from
```
references/checks.md
```
. Do not change the computer yet.
Detect OS. Ask which computer only if detection is unreliable.
Detect
```
kind
```
(HTML vs Next.js).
Classify the machine (below).
Explain in plain language. Ask permission before any install, long download, admin prompt, or
```
npm install
```
.
Agent runs the command. Never ask the student to type terminal commands.
Verify by opening the page. Success is the page, not exit code 0.

从
```
references/checks.md
```
执行只读检查。暂不修改电脑设置。
检测操作系统。仅当检测结果不可靠时，才询问学员使用的电脑类型。
检测类型
```
kind
```
（HTML还是Next.js）。
对当前机器进行分类（见下文）。
用通俗易懂的语言解释情况。在执行任何安装、长时间下载、权限提示或
```
npm install
```
前，需征得学员许可。
由Agent执行命令。绝不要让学员手动输入终端命令。
通过打开页面验证是否成功。成功的标志是页面正常加载，而非命令返回退出码0。

Detect kind

类型检测

```
package.json
```
with a
```
dev
```
script →
```
nextjs
```
Workshop single
```
.html
```
and no Node app to run for this step →
```
html
```
Both → one question: which to open now
Neither → class
```
Wrong folder
```
. Stop. Tell the student to use File → Open Folder on the project folder. Do not invent a project.

带有
```
dev
```
脚本的
```
package.json
```
→
```
nextjs
```
Workshop对应的单个
```
.html
```
文件，且此步骤无需运行Node应用 →
```
html
```
两者都存在 → 询问学员：现在要打开哪一个
两者都不存在 → 归类为
```
Wrong folder
```
（错误文件夹）。停止操作。告知学员通过「文件→打开文件夹」选择项目文件夹。不要凭空创建项目。

Classification

机器分类

Label exactly one:

Class	When
Ready	HTML file exists, or Next.js has Node 20+, correct folder, `node_modules` (or install not needed yet in preflight), and no blocking error
Missing Node	`nextjs` and `node` is missing or too old
Wrong folder	`pwd` is not the app folder; no `package.json` / no target `.html`
No admin / company-locked	Needed install failed without admin, and user-level install also failed
Port in use	A dev server is already listening
Network / proxy	`npm install` failed with network errors
Unknown	Anything else. Stop. Send to instructor

Do not give every student the same

npm install

script. Branch on the class.

必须且只能选择以下分类之一：

分类	适用场景
Ready（就绪）	HTML文件存在，或Next.js已安装Node 20+、处于正确文件夹、存在 `node_modules` （或预检阶段暂无需安装）且无阻塞性错误
Missing Node（缺失Node）	`nextjs` 场景下， `node` 缺失或版本过旧
Wrong folder（错误文件夹）	当前目录 `pwd` 不是应用文件夹；无 `package.json` / 无目标 `.html` 文件
No admin / company-locked（无权限/公司设备锁定）	需要的安装因无管理员权限失败，且用户级安装也失败
Port in use（端口被占用）	开发服务器已在监听该端口
Network / proxy（网络/代理问题）	`npm install` 因网络错误失败
Unknown（未知问题）	其他所有情况。停止操作。转交 instructor 处理

不要给所有学员使用相同的

npm install

脚本。需根据分类分支处理。

HTML success

HTML运行成功标准

Agent finds the correct

.html

and opens it (

checks.md

). Not blank, not file-not-found. Do not ask the student to hunt in Finder. Node is not required.

Agent找到正确的

.html

文件并打开（参考

checks.md

）。页面非空白、无文件未找到提示。不要让学员在Finder中手动查找文件。无需Node环境。

Next.js success

Next.js运行成功标准

All of:

Node 20 or newer
Working directory is the folder that contains
```
package.json
```
(not the course parent)
```
node_modules
```
present, or Agent ran
```
npm install
```
after permission
Dev server running — reuse if already up; never start a second one
Browser opens
```
http://localhost:<port><successPath>
```
using the port printed in the terminal (
```
3000
```
or
```
3001
```
, not hard-coded if the log differs)

需满足以下所有条件：

Node版本为20或更高
工作目录是包含
```
package.json
```
的文件夹（不是课程父文件夹）
存在
```
node_modules
```
，或Agent已征得许可后执行了
```
npm install
```
开发服务器正在运行 — 若已启动则复用；绝不要启动第二个服务器
浏览器打开
```
http://localhost:<port><successPath>
```
，其中端口使用终端中打印的端口（
```
3000
```
或
```
3001
```
，若日志显示不同则不要硬编码）

Missing Node

缺失Node的处理流程

Explain: "Node is the tool that lets this web app run on your computer." Ask permission.

Admin available → official installer in
```
checks.md
```
No admin → user-level install in
```
checks.md
```
After install → new shell, re-check
```
node -v
```
Still failing → class
```
No admin / company-locked
```
. Stop. Name that class. Ask them to get the instructor. Do not pretend
```
npm run dev
```
worked.

解释："Node是让这个Web应用在你的电脑上运行的工具。"然后征得学员许可。

有管理员权限 → 使用
```
checks.md
```
中的官方安装程序
无管理员权限 → 使用
```
checks.md
```
中的用户级安装方式
安装完成后 → 打开新终端，重新检查
```
node -v
```
仍失败 → 归类为
```
No admin / company-locked
```
（无权限/公司设备锁定）。停止操作。明确告知分类结果，让学员联系instructor。不要谎称
```
npm run dev
```
已成功。

Interaction

交互规范

One question at a time. Prefer choices. Do not ask what you can detect.
Exception to "Agent runs commands": a system permission window. Explain what they will see and which button to press. Wait until they say they clicked it. Never collect the computer password in chat. Never ask for API keys.
Pause before Node install, multi-minute download, admin prompt, long
```
npm install
```
.
Summarize command output. Do not ask them to paste the terminal.
Translate errors with
```
references/errors.md
```
.
Define Node, npm, folder, port, dependency in one sentence when first used.
On success, only the next student action: open this URL, or "The HTML file is open in your browser."
Mirror the student's language.
Repair failed → name the class, send to instructor, stop. Do not edit MVP code.

一次只提一个问题。优先提供选项。不要询问可自动检测的信息。
「Agent执行命令」规则的例外：系统权限弹窗。需向学员解释他们会看到什么提示，以及要点击哪个按钮。等待学员确认已点击后再继续。绝不要在聊天中收集电脑密码。绝不要索要API密钥。
在执行Node安装、长时间下载、权限提示、耗时较长的
```
npm install
```
前，需暂停并告知学员。
总结命令输出。不要让学员粘贴终端内容。
使用
```
references/errors.md
```
翻译错误信息。
首次使用Node、npm、文件夹、端口、依赖等术语时，用一句话定义。
成功后，仅告知学员下一步操作：打开该URL，或「HTML文件已在你的浏览器中打开」。
匹配学员的语言风格。
修复失败 → 明确分类结果，转交instructor处理，停止操作。不要修改MVP代码。

Do not

禁止操作

Do not write or revise a PRD
Change the 5 MVP functions
Change product code to make the environment work
Deploy, push to GitHub, or configure Vercel/Supabase
Install Docker, Homebrew as a bundle, or tools this prototype does not need
Start a second
```
npm run dev
```

不要撰写或修订PRD
不要修改5项MVP功能
不要修改产品代码以适配运行环境
不要部署、推送到GitHub或配置Vercel/Supabase
不要安装Docker、Homebrew等捆绑工具，或本原型不需要的其他工具
不要启动第二个
```
npm run dev
```
进程