用途:在 Remix 仓库中创建或修订 demos/ 下的演示。演示不是一次性原型,而是可被读者和其他代理学习 Remix 写法的长期代码制品。
主要能力与要求:演示需真实地体现框架行为,覆盖边界情况与组合点,结构、命名与可访问性需清晰,代码应能被改写为真实应用。使用 Remix 库包实现框架行为,不引入无关路由、组件框架、状态管理器或中间件。每个演示作为独立的 pnpm workspace 消费者,拥有正常 package.json 并以 remix 为依赖,从 remix/component 等包导出导入,不要相对导入回 packages/。非 Remix 依赖仅限运行环境所需。
使用方式:先阅读目标 API 与一两个现有演示,选择聚焦场景,在 demos/<name>/ 下按约定构建,本地验证。典型结构含 package.json、tsconfig.json、server.ts、可选 hmr.ts、README.md、app/、public/。应用型演示采用统一布局:app/、db/、test/、public/、tmp/;app/ 下分 actions/、data/、middleware/、ui/、utils/。控制器保持精简,actions/controller.tsx 管理顶层叶子路由,嵌套路由映射各自建 actions/<route-key>/controller.tsx。
限制与细节:使用 remix/component 时 tsconfig 设 jsx: react-jsx 与 jsxImportSource: remix/component,不设 preserveSymlinks 或指向 packages/remix/src 的 paths。node-tsx 演示不要启用 erasableSyntaxOnly。HMR 仅限开发,server.ts 为真实服务器,hmr.ts 提供可选脚本。演示服务器统一使用 44100 端口,处理 SIGINT 与 SIGTERM。验证方式:有脚本时运行 pnpm -C demos/<name> typecheck 与 test,按需冒烟测试,最后运行 pnpm run lint。
本技能未提供收费、价格或平台信息,具体以仓库文档为准。