用途：这是一套描述结构与规则的前端架构技能，不绑定组件库、状态库或视觉风格，可被 Claude Code、OpenCode、Codex、Cursor、Windsurf 等读取。目标是让任何贡献者都能立刻回答三个问题：代码放在哪里、谁可以导入谁、这是服务端状态还是 UI 状态。
核心结构：源码分为 modules/（功能模块，按产品能力垂直切分，每个模块含 pages、components、hooks、stores、services、constants、types 及唯一公开 barrel index.ts）与 shared/（跨模块构件，如 components、hooks、api-client、store、utils、types）。页面/屏幕是目录而非单文件，路由文件保持薄层，仅从模块 barrel 导入并挂载页面组件。
主要规则：模块间只能通过 barrel 导入，禁止深入内部路径；状态按来源拆分，服务端数据归查询/缓存层（如 TanStack Query、RTK Query、SWR、Apollo），UI 状态归客户端 store（如 Zustand、Redux Toolkit、MobX、Jotai），二者不得混用，禁止把接口响应镜像进客户端 store，禁止在组件内直接发请求；样式与组件同目录存放，不在 JSX 或组件体内写内联样式；代码按需提升，先局部后共享，出现第二个消费者再外移。
框架适配：同一模块/页面/状态模型可映射到 Next.js App Router、React + Vite SPA、Remix 及 Expo / React Native，差异仅在最上层薄路由层。React Native 中页面即屏幕，样式可用 Tamagui、StyleSheet 或 Nativewind。面向 Web 与原生双端时，可将无框架依赖的类型、校验器、格式化函数和 API 客户端契约抽为共享包。
限制：资料未提供具体安装命令、版本要求、收费或授权信息；该技能只规定结构与规则，不规定视觉设计，需配合相应设计技能使用。