菜单
在 Forsion 的 Coding Space 里构建网页/前端应用时**必须先读**。讲清本环境的即时预览规则——importmap + esm.sh 拉任意 npm 包、可直接写 JSX/TSX(预览端自动转译)、无构建步骤、无 npm install、多文件结构、index.html 入口。写任何 web 代码前遵循本约定。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | Forsion 网页构建约定 |
| description | 在 Forsion 的 Coding Space 里构建网页/前端应用时**必须先读**。讲清本环境的即时预览规则——importmap + esm.sh 拉任意 npm 包、可直接写 JSX/TSX(预览端自动转译)、无构建步骤、无 npm install、多文件结构、index.html 入口。写任何 web 代码前遵循本约定。 |
| version | 1.0.0 |
| category | Forsion |
Coding Space 的预览 = 一个本地 dev-server:把项目目录整挂到 http://127.0.0.1,用 <iframe> 展示。它像 Vite dev 一样按需转译 .ts/.tsx/.jsx(逐文件、不打包、不 typecheck),裸依赖(react 等)由页面 importmap 从 CDN 解析。
因此:不要 npm install、不要写构建脚本、不要 package.json 依赖当真实依赖装。 你产出的是浏览器可直接跑的文件,写完即时刷新预览。
index.html。它声明 importmap(列出你用到的每个 npm 包)+ 加载入口模块。index.tsx / App.tsx / components/*.tsx / styles.css,用相对路径互相 import。别把所有东西塞进一个文件。https://esm.sh/<包名>@<版本> 引入。react/jsx-runtime。<link rel="stylesheet"> 挂在 index.html,不要在 JS 里 import "./x.css"(那不是合法 ESM)。write_file / edit_file 后预览自动刷新;迭代就直接改文件。index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./styles.css" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18",
"react-dom/client": "https://esm.sh/react-dom@18/client",
"react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime"
}
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.tsx"></script>
</body>
</html>
index.tsx:
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(<App />)
App.tsx:
export default function App() {
return <h1>Hello Forsion</h1>
}
只需在 importmap 里加一行,再正常 import:
<script type="importmap">
{ "imports": {
"react": "https://esm.sh/react@18",
"react-dom/client": "https://esm.sh/react-dom@18/client",
"react/jsx-runtime": "https://esm.sh/react@18/jsx-runtime",
"zustand": "https://esm.sh/zustand@4",
"lucide-react": "https://esm.sh/lucide-react@0.400.0?deps=react@18"
}}
</script>
import { create } from 'zustand'
import { Heart } from 'lucide-react'
lucide-react 依赖 react)时,用 ?deps=react@18 让 esm.sh 复用同一份 React,避免「两个 React 实例」报错。@18、@4),别用裸包名不带版本。原生多文件也行:index.html + app.js(<script type="module" src="./app.js">)+ styles.css。同样可 import ESM 包与相对模块。
react/jsx-runtime),或包有 peer 依赖没加 ?deps=。先看预览控制台报错。import "./x.css" 报错:CSS 不能当模块 import,改用 <link>。package.json / node_modules:预览不读它们,写了也不会被安装。当在 Forsion Coding Space 里编写 React/前端组件、hooks、状态管理,或排查重渲染、数据获取、内存泄漏、陈旧闭包类 bug 时使用。提供 hooks 依赖数组、useEffect 竞态与清理、组件组合、状态选型(useState/Context/zustand)、数据获取三态(loading/error/取消)、列表 key、受控/非受控、memo/useMemo/useCallback 的可复制正反例(均适配 importmap+esm.sh 无构建环境)。
当需要用 Python/pandas 分析数据文件、做统计聚合或绘制图表时使用,提供标准代码模式与 run_python 使用规范。
当需要提交代码、创建分支、rebase/merge、处理冲突或回滚改动时使用,提供规范的 Git 操作流程与安全红线。
当用户想新建 / 配置 / 修改 / 删除 Tangu 本地 Agent(Normal Agent),或想把一种好用的角色 / 工作方式沉淀成可复用的 agent 时使用。讲解 manage_agent 工具与 agent 的文件夹结构(config.toml / SOUL.md / MEMORY.md / LOG / Library)。