菜单
为本项目的主流程游戏 UI 提供抽象规范与审查方法，覆盖 `GameViewportLayout` 及其场景页、共享壳组件和正文交互。Use when implementing, refactoring, or reviewing scene-page structure, typography, borders, navigation, component ownership, or interaction consistency in this repo's main game flow.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Daoyou 测试、lint、typecheck、Vitest、ESLint、质量验证与失败排障 companion skill。Use when adding or fixing tests, selecting verification commands, changing Vitest/ESLint/TypeScript config, debugging test failures, or deciding how to validate frontend, backend, shared engine, data, auth, Redis, and build changes after using the owning domain skill.
Daoyou Hono API、认证、授权、Better Auth、Turnstile、admin、internal cron、LLM header 安全和服务端输入校验指南。Use when adding or modifying src/server routes, middleware, auth, admin endpoints, cron/internal endpoints, shared contracts, LLM provider handling, API validation, or security-relevant frontend auth/admin loaders in this repo. For ordinary admin pages, navigation, and UI state, use daoyou-frontend-routing-state.
Daoyou condition 持久状态、丹药/炼丹、ConditionOperation、PillSpec、alchemy services、market listings/recycle、资源与交易一致性指南。Use when modifying condition, hp/mp current state, pill toxicity, tempering/marrow tracks, consumable specs, alchemy formulas/crafting, market refresh/buy/recycle, or market/alchemy flows that call manual draw. For standalone manual draw config/rules, use daoyou-game-core-domain.
Daoyou PostgreSQL、Drizzle schema/migrations、repositories、transactions、Better Auth schema、Redis 半持久数据、creation_products、condition 和 consumables.spec 持久化指南。Use when modifying database schema, migrations, repositories, persistence mappers, Drizzle queries, transactions, Better Auth tables, Redis-backed state, or durable game data models in this repo.
Daoyou 本地开发、环境变量、构建、Docker、compose、cron 和部署脚本操作指南。Use when starting the app, debugging build/dev-server/runtime failures, changing package scripts, Dockerfile, docker-compose, Vite build config, environment variables, health checks, cron jobs, or deployment scripts in this repo.
Daoyou React Router、game scene metadata、layout selection、frontend hooks/cache/context、admin UI 与共享组件归属指南。Use when adding or changing React routes, route loaders, route handles, game scene ids, dock navigation, document titles, frontend data hooks, Player/Cultivator/Auth providers, admin pages, or reusable UI/component placement in this repo.
| name | daoyou-game-ui |
| description | 为本项目的主流程游戏 UI 提供抽象规范与审查方法，覆盖 `GameViewportLayout` 及其场景页、共享壳组件和正文交互。Use when implementing, refactoring, or reviewing scene-page structure, typography, borders, navigation, component ownership, or interaction consistency in this repo's main game flow. |
这个 skill 不是页面清单，也不是文案约定。它定义的是一套主流程场景 UI 的抽象规范：让玩家在第一眼就分清“我在哪”“我现在能做什么”“如果要去别处该从哪里走”，同时不用先读完一份规则说明书。
主流程页必须保持单一路径：
任何让这三层重新混在一起的做法，都视为回退。
主流程页还必须控制认知负担：
任何把正文重新写成机制公告、角色面板或帮助文档的做法，也都视为回退。
本 skill 默认只约束 GameViewportLayout 主流程页。不要把这些规则强行套到战斗中流程、地图沉浸页、创角流程或后台页，除非用户明确要求统一。
身份层只回答一件事：当前场景是什么。
任务层只回答一件事：玩家现在要做什么。
导航层只回答一件事：如果玩家要离开当前任务，该从哪里走。
references/viewport-checklist.md、本文件 Review Questions 与 Validation 的审查项。在这个仓库里，先检查当前主流程壳组件与共享原语，再决定改动位置。优先关注：
src/react-app/components/game-shellsrc/react-app/components/feature/world-chatsrc/react-app/routes/gamesrc/react-app/router.tsxsrc/react-app/components/game-shell/gameNavigation.tssrc/react-app/lib/router/gameShellRegistry.tsdocs/game-layout-ownership.md优先复用现有主流程原语，而不是重新发明一套页面局部样式约定。只有当现有原语无法表达当前规则时，才新增一个职责单一的组件。
新增或迁移主流程场景时，不要只添加 route 文件。同步核对：
src/react-app/router.tsx 中的 route、handle={scene(...)} 和 document titlesrc/react-app/components/game-shell/gameNavigation.ts 中对应 scene metadata、dock label、hrefsrc/react-app/lib/router/gameShellRegistry.test.ts、src/react-app/lib/router/routeTitle.test.ts 或相邻路由测试docs/game-layout-ownership.md 是否仍准确做 UI 评审时，先问这些问题：
一旦出现这些情况，就默认需要回收：
执行 references/viewport-checklist.md 和本文件 Review Questions 的检查项。
至少确认：