用途
Remix 3 是一个服务端优先的 Web 框架，构建在 Request、Response、URL、FormData 等 Web API 之上。所有软件包都从单一的 npm 包 remix 发布，并通过子路径导入，没有顶层 remix 导入。
本技能用于端到端开发和审查 Remix 应用，帮助选择正确的层次、找到合适的包，并避免 Remix 特有的常见错误。
主要能力
一个 Remix 应用有四个主要部分：
- 路由：app/routes.ts 定义类型化的 URL 契约，并驱动 href() 生成。
- 控制器：app/actions 实现该契约并返回 Response 对象。
- 中间件：组合请求生命周期行为，并通过 context.set(Key, value) 填充类型化上下文。
- 组件：使用 remix/ui 渲染 UI。这不是 React。组件接收一个 handle，从 handle.props 读取当前 props，并返回一个零参数的渲染函数。
使用方式
适用本技能的场景包括：
- 涉及路由、控制器、中间件、数据、认证、会话、UI 或测试的新功能或重构
- 审查 Remix 应用代码的正确性、架构或框架用法
- 回答“在 Remix 中应该如何组织”这类问题
- 为某个任务找到合适的包、参考文档或默认模式
使用时应先对任务分类，再加载最小的有效参考集。每个参考文件开头都有“What This Covers”小节，列出其包含的主题——先读这一节确认文件相关，再读其余内容。同时加载超过两三个文件通常意味着任务尚未被充分细化。
任务与起始参考的对应关系如下：
- 定义 URL、编写控制器和 action、返回响应：references/routing-and-controllers.md
- 组合请求生命周期、排列中间件、桥接到服务器：references/middleware-and-server.md
- 编译和提供浏览器模块、资源 URL 命名空间、预加载：references/assets-and-browser-modules.md
- 解析输入、用 schema 校验、定义表、查询、迁移：references/data-and-validation.md
- 每浏览器状态、登录流程、路由保护、身份：references/auth-and-sessions.md
- 组件设置、状态、生命周期、更新、queueTask、上下文：references/component-model.md
- 事件处理器、样式、refs、点击/键盘行为、简单动画：references/mixins-styling-events.md
- clientEntry、run、<Frame>、导航、<head>：references/hydration-frames-navigation.md
- 路由器测试、组件测试、测试隔离：references/testing-patterns.md
- 弹簧物理、补间、布局过渡：references/animate-elements.md
- 编写自定义可复用 mixin：references/create-mixins.md
常见组合：表单或 CRUD 功能使用路由、数据与校验、测试，若涉及特定用户则加上认证；受保护区域使用认证与会话、路由、测试；交互式组件使用组件模型、mixins 与样式，仅在浏览器中运行时加 hydration；浏览器资源管线使用资源与浏览器模块、hydration、中间件与服务器；文件上传使用中间件与服务器、数据与校验、测试；导航或 frame 使用 hydration、frames、导航。
适用场景
默认工作流程：先对变更分类，判断它改变的是路由契约、请求生命周期、数据模型、认证或会话行为，还是仅 UI。从服务端契约开始，在接线处理器或 UI 之前先添加或更新 app/routes.ts。把代码放在最窄的归属处，优先路由局部代码，只有在确实复用时才提升。在添加浏览器行为之前先让服务端路径正确：路由应通过 router.fetch(...) 返回正确的 Response，然后再添加 clientEntry(...)、动画或 DOM 效果。有意识地添加中间件：快速退出的中间件靠前，丰富请求的中间件靠后。在根中间件栈中导出类型化的 AppContext，并在控制器中使用。在边界处校验输入：在数据进入渲染或持久化逻辑之前，先解析并校验 Request、FormData、params、cookies 和外部载荷。仅在必要时 hydration，优先服务端渲染的 UI。测试最窄的有意义层次，路由行为优先用路由器测试。最后验证：重读路由流程，确认认证与授权边界，运行最小相关的测试与类型检查循环。
项目布局：app/ 存放运行时应用代码；db/ 存放迁移和本地数据库文件；public/ 存放按原样提供的静态资源；test/ 存放共享辅助、fixture 和集成覆盖；tmp/ 存放上传、缓存、本地会话文件和其他临时数据。在 app/ 内按职责组织：assets/ 存放客户端入口和客户端自有的浏览器行为；actions/ 存放控制器自有的路由处理器、路由局部的响应渲染以及非跨路由区域共享的路由局部 UI/辅助；data/ 存放 schema、查询、持久化设置、迁移和运行时数据初始化；middleware/ 存放认证、会话、上传、数据库注入等请求生命周期关注点；ui/ 存放共享的跨路由 UI 原语；utils/ 仅存放确实跨层且不明确归属别处的辅助代码；routes.ts 作为路由契约；router.ts 作为路由器设置与接线。