slug: fmode-skill-fmode-code-lit displayName: fmode-code-lit version: 1.0.0 name: fmode-code-lit description: "数字人开发基础规则：Lit 原生 ESM 无构建前端（零编译/零打包，浏览器直跑）。分层 core/wc/page、signals 响应式、@lit/context DI、History 路由、多标签 KeepAlive；沉淀多页面开发 light DOM 五条死线、子路径路由丢前缀、CDN 假刷新等实战教训。触发词:lit、lit 项目、lit 组件、无构建、ESM、WebComponent、importmap、signals、多页面白屏、子路径部署、keepalive、前端部署。" tags: [FmodeAgent, FmodeCode, 开发级, code-lit, 数字人基础规则] platform: Both level: 开发级 category: 开发规范 icon: 🧱 license: MPL-2.0 author: Fmode (未来飞马) homepage: https://github.com/fmodecn/skill-code-lit

npm: "@fmode/skill-code-lit"

fmode-code-lit — Lit 原生 ESM 无构建前端

这是方便数字人（FmodeAgent / FmodeCode）进行项目开发的基础规则技能。 它把踩过的坑沉淀成硬性约束，让 AI 在生成代码时不重犯同类错误。

用无构建/无打包/纯原生 ESM + Lit 3.x 开发前端：源码即产物，浏览器直跑。分层（组件 / 服务 / 工具）， @lit-labs/signals 响应式、@lit/context 依赖注入、自写 History 路由、多标签 KeepAlive。

npm 包：@fmode/skill-code-lit（npx @fmode/skill-code-lit@latest install）。完整规则见 references/RULES-INDEX.md 与其索引的 references/rules/。

触发

新建/初始化 lit 项目 · 写 lit 组件 · 无构建前端 · 原生 ESM + importmap · WebComponent · signals · context DI · 多标签 KeepAlive · 多页面白屏排查 · 子路径部署 · 部署验收。

三条铁律

源码即产物：不引入任何构建/打包器（rollup / esbuild / vite / webpack），写好的 .js 直接上线。
依赖不落地项目：lit 等运行时依赖由 importmap 从静态依赖仓解析，禁止拷进业务仓。
分层不可越界：组件（渲染）→ 服务（业务与状态）→ 工具（无状态函数）。

无构建硬约束

禁装饰器（@customElement / @property / @state / @consume），一律用 static properties + customElements.define() + ContextConsumer。

多页面开发铁律（light DOM 五条死线）

createRenderRoot(){return this} 是渲染模型切换，切完 <slot>、:host、::slotted 全部失效：

light DOM 下禁用 <slot> —— 自检：document.querySelector('main').children.length，为 0 就是投影断了。
外壳按路由自己产出页面元素，不靠投影传内容。
真需传内容的组件（卡片）用 references/light-slot.js 的 capture（渲染前）/ project（updated 后）手动搬，dataset.projected 做幂等。
自定义元素必须 display: block; min-width: 0（例外元素写 display: skip）；跑 scripts/check-elements.mjs 自检。
图表容器用 height: 100% + min-height，不用 flex: 1（父级无确定高度时算出来是 0）。

用法

# 安装到 ~/.claude/skills/
npx @fmode/skill-code-lit@latest install

# 或直接用本目录脚本
node scripts/scaffold.mjs ./my-admin --project my-admin   # 生成项目骨架
node scripts/install-rules.mjs .                          # 把规则装入已有项目 .claude/rules/
node scripts/new.mjs component user-card                  # 生成组件 / 服务 / 页面 / core / wc
node scripts/check-elements.mjs src                       # 校验自定义元素 display 声明
node scripts/smoke.mjs                                    # 自检

关键约定

组件 kebab-case.js 类 PascalCase · 页面 page-*.js · 服务 *-service.js 单例 · 相对导入带 .js · 全局 signal + SignalWatcher · DI 用 @lit/context · 子目录 <base href> · CDN History 回退 200 禁 302。

部署

依赖 → 静态依赖仓（.js 为 text/javascript、CORS 放行、HTTP/2）；业务码 → obsutil sync src/ + 刷 CDN； index.html no-cache 并先删后传。验收不能只 curl 首页：模块图爬取 + 深链接 + 真实浏览器。

诚实失败

生成前先探测目标目录；已存在文件不覆盖（除非 --force）。依赖版本无法解析时明确报错，不生成跑不起来的骨架。

SKILL.md 4.3 KB Historik Rå