القائمة
前端架构专家 Owner — 当任务涉及页面、组件、状态管理、数据获取、异步缓存、SSR/Nuxt、runtime config、i18n、SSE、空白页、性能、可访问性或前端验证路线时使用；要求优先保证旧数据可见、异步刷新、渲染稳定和用户主路径不断线。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/devcodex-labs/devcodex --skill frontend-architectureيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | frontend-architecture |
| description | 前端架构专家 Owner — 当任务涉及页面、组件、状态管理、数据获取、异步缓存、SSR/Nuxt、runtime config、i18n、SSE、空白页、性能、可访问性或前端验证路线时使用；要求优先保证旧数据可见、异步刷新、渲染稳定和用户主路径不断线。 |
本 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 |
## FrontendArchitectureOwnerGate
| 字段 | 内容 |
|------|------|
| renderingStrategy | CSR / SSR / SSG / hydration / client-only 边界 |
| stateModel | server state、client state、draft、cache key 和 invalidation |
| asyncCachePolicy | stale-while-revalidate、旧数据展示、刷新、错误和重试 |
| runtimeConfig | 环境、baseURL、feature flag、权限、i18n、时区 |
| i18nSseHandling | i18n、SSE/stream、长连接和订阅生命周期 |
| blankPagePrevention | 空态、错误边界、返回恢复、权限和无数据展示 |
| verificationRoute | 静态/组件/API/E2E/截图/浏览器验证与 skipReason |
| 反模式 | 修正 |
|---|---|
| 详情页请求未完成前直接清空页面 | 先显示缓存或 last-known-good 数据，再异步刷新 |
| 把接口请求写成阻塞同步流程 | 改成异步请求、取消竞态和状态机 |
| 浏览器验证无条件触发，消耗大量时间 | 由风险和用户要求决定，低风险可用静态/组件/API 证据 |
| 只按截图还原颜色，不检查交互状态 | 结合 UX 状态反馈、缓存和错误恢复验证 |
ux-interaction-architecture：提供任务流、状态反馈和恢复要求。developer-experience-architecture：前端示例、文档站和组件 API 面向开发者时叠加。audit-project / test-router：负责把前端风险映射到测试路线。expert-output-quality：前端方案和示例必须区分推荐架构与临时 demo。