Home / devcodex-labs / devcodex · GitHub

frontend-architecture SKILL.md skillA

frontend-architecture from devcodex-labs/devcodex is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

Install it, pinned

mdr add devcodex-labs/devcodex/frontend-architecture@git:20260730.6ee304a

Pins git:20260730.6ee304a in mdr.lock. Pin the fingerprint instead.

Audit grade: A, 17 of 17 checks passed
Kind: SKILL.md skill
Repository: devcodex-labs/devcodex
Path: content/skills/frontend-architecture/SKILL.md
Versions recorded: 1
Latest version: git:20260730.6ee304a, committed Jul 30, 2026
Size: 4,371 bytes
Repository stars: 432
License: AGPL-3.0

前端架构专家 Owner — 当任务涉及页面、组件、状态管理、数据获取、异步缓存、SSR/Nuxt、runtime config、i18n、SSE、空白页、性能、可访问性或前端验证路线时使用；要求优先保证旧数据可见、异步刷新、渲染稳定和用户主路径不断线。.

Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.

What the file says

# 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、表单草稿、缓存键、失效策略和路由返回恢复。
…

Read the whole file at its exact version.

How to install

The exact contents, by fingerprint

mdr add devcodex-labs/devcodex/frontend-architecture@sha256:4af9a690106af964

The line at the top of this page pins the label git:20260730.6ee304a, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.

Badge

[![mdr](https://markdownregistry.com/badge/art_cejpgbovgl3p2vwz.svg)](https://markdownregistry.com/a/art_cejpgbovgl3p2vwz)

6 badge image fetches in 30 days. What the badge shows.

Versions

The registry has recorded 1 version of this file, committed on Jul 30, 2026.

version	committed	commit	size	audit
git:20260730.6ee304a latest	2026-07-30	6ee304a	4,371 B	A	view

Audit of the latest version

A 17 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.

pass: Frontmatter block present
pass: Frontmatter declares a name
pass: Frontmatter declares a description
pass: Size between 200 bytes and 200 KB (4371 bytes)
pass: No zero-width or bidi control characters
pass: No instruction hidden inside an HTML comment
pass: No link to an exfiltration or paste host
pass: No credential-shaped string
pass: No instruction to send local credentials anywhere
pass: No text hidden with inline styles
pass: No prompt-injection phrasing
pass: No curl or wget piped into a shell
pass: No recursive delete of root, home or parent
pass: No instruction to read or print local credentials
pass: No base64 blob over 200 characters
pass: No link to a raw IP address
pass: No script tag

Source

GitHub

devcodex-labs/devcodex · 432 stars · license AGPL-3.0 · pushed 2026-10-27 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_cejpgbovgl3p2vwz
GET https://markdownregistry.com/api/v1/resolve?ref=devcodex-labs/devcodex/frontend-architecture
GET https://markdownregistry.com/api/v1/blob/4af9a690106af964a6edf006eea0929bec6264d7a5417cf8a28c55153e813ddc

Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from devcodex-labs/devcodex

accessibility-i18n SKILL.md skill

devcodex-labs/devcodex · content/skills/accessibility-i18n/SKILL.md · 无障碍与国际化专家 Owner — 当任务涉及可访问性、键盘操作、焦点、屏幕阅读器、ARIA、语言地区、本地化、RTL、翻译资源、用户可见文案或多语言文档时使用；要求把包容性体验和本地化验证绑定到真实用户路径。