frontend-architecture

# Frontend Architecture Skill ## 定位 本 Skill 负责前端架构 Owner 视角。它把 UI/交互需求落实到渲染策略、组件边界、状态模型、异步数据、缓存、错误恢复、性能与验证路线，避免页面在返回、刷新或接口抖动时变成空白。 ## 触发条件 | 场景 | 是否触发 | |------|:--------:| | 首页、列表、详情、表单、后台、文档站或任意前端页面开发/修复 | 必须 | | 涉及接口数据、缓存、异步请求、SSE、SSR、runtime config、i18n、路由返回 | 必须 | | 用户指出空白页、loading-only、同步请求、缓存缺失、页面还原差或交互断点 | 必须 | | 仅后端内部逻辑且无前端消费 | N/A + skipReason | ## 核心门禁 | Gate | 要求 | 证据 | |------|------|------| | `FrontendArchitectureOwnerGate` | 前端方案必须覆盖渲染策略、状态模型、异步缓存和验证路线 | 源码、运行截图、组件测试、E2E、API mock | | `FrontendAsyncCacheRenderGate` | 首页、详情、列表有旧数据时先显示旧数据，异步刷新替换 | cache policy、store、route transition evidence | | `StaleWhileRevalidateGate` | 不得把 loading-only 当主路径；网络慢或失败时保留可用状态 | fallback / stale data / retry | | `BlankPagePreventionGate` | 返回、刷新、错误、权限、空数据、SSR hydration 不能出现无解释空白 | route guard、error boundary、empty state | | `RuntimeConfigI18nGate` | runtime config、环境变量、i18n、时区和文案不得写死破坏多环境 | config evidence | | `FrontendVerificationBudgetGate` | 未被明确要求打开浏览器时，按风险选择静态/组件/API/E2E；高风险或用户要求才浏览器验证 | test-router evidence | ## 执行步骤 1. 确定渲染策略：CSR、SSR、SSG、island、client-only、suspense 或 hydration 边界。 2. 建立状态模型：server state、client state、表单草稿、缓存键、失效策略和路由返回恢复。 3. 设计异步数据：先渲染旧缓存或骨架的条件、刷新、错误、重试、取消和竞态处理。 4. 检查 runtime config、i18n、SSE、长连接、权限和鉴权状态对页面的影响。 5. 定义组件边界：复用条件、props contract、事件、可访问性和布局稳定性。 6. 选择验证路线：静态检查、单元/组件、API mock、E2E、截图或浏览器交互；记录跳过浏览器的理由。 ## 输出字段 ```markdown ## FrontendArchitectureOwnerGate | 字段 | 内容 | |------|------| | renderingStrategy | CSR / SSR / SSG / hydration / client-onl...