remix

用途

本技能用于端到端完成 Remix 3 应用的开发与评审工作，帮助开发者先选定正确的抽象层、找到正确的包，并规避最常见的 Remix 专有错误。适用场景包括：涉及路由、控制器、中间件、数据、认证、会话、UI 或测试的新功能与重构；审查 Remix 应用代码的正确性、架构或框架用法；回答“在 Remix 中应该如何组织结构”的问题；为任务寻找正确的包、参考文档或默认模式。

主要能力

Remix 3 是服务器优先的 Web 框架，构建在 Request、Response、URL、FormData 等 Web API 之上。所有包从单一 npm 包 remix 发布，并按子路径导入，不存在顶层 remix 导入。

一个 Remix 应用有四个主要部分：

• 路由：位于 app/routes.ts，定义类型化 URL 契约并驱动 href() 生成。
• 控制器：位于 app/actions，实现该契约并返回 Response 对象。
• 中间件：组合请求生命周期行为，并通过 context.set(Key, value) 填充类型化上下文。
• 组件：使用 remix/ui 渲染 UI。这不是 React。组件接收一个 handle，从 handle.props 读取当前 props，并返回一个无参渲染函数。

使用方式

先对任务分类，再加载最小的有用参考集。每个参考文件开头都有“What This Covers”部分，列出其中的主题——先读它以确认文件相关性。任务与起始参考文件的映射示例：

• 定义 URL、编写控制器与动作、返回响应 → references/routing-and-controllers.md
• 组合请求生命周期、中间件排序、桥接到服务器、开发 HMR → references/middleware-and-server.md
• 解析输入、用 schema 校验、定义表、查询、迁移 → references/data-and-validation.md
• 每浏览器状态、登录流程、路由保护、身份 → references/auth-and-sessions.md
• 组件设置、状态、生命周期、更新、queueTask、context → references/component-model.md
• 路由测试、组件测试、测试隔离 → references/testing-patterns.md

常见组合：表单或 CRUD 功能 → 路由、数据与校验、测试（若涉及用户则加认证）；受保护区域 → 认证与会话、路由、测试；交互式控件 → 组件模型、mixins 与样式（若在浏览器运行则加 hydration）。

默认工作流：分类改动；从服务器契约开始（先改 app/routes.ts）；把代码放在最窄的归属处；先让服务器路径正确，再加浏览器行为；有意识地添加中间件；在边界处校验输入；仅在必要时 hydrate；测试最窄的有意义层；最后验证。

适用场景

• 路由、控制器、中间件、数据、认证、会话、UI、测试相关的新功能与重构。
• 审查 Remix 应用代码的正确性、架构或框架用法。
• 规划新应用的目录结构（app/、db/、public/、test/、tmp/）。

限制

资料中未说明具体的收费、价格、平台支持范围与性能效果。Remix 3 不支持顶层 remix 导入，只能用子路径；Remix Component 不是 React，不能使用 hooks 或隐式重渲染；clientEntry(...) 的 props 必须可序列化。关于具体 API 的更完整文档、示例与包细节，需查看发布包中对应生成源码旁的 README（node_modules/remix/src/<subpath>/README.md），若不存在则查找最近的父级 README。