Create Docs
victorgarciaesgi/nuxt-typed-router
Create complete documentation sites for projects. An agent skill from victorgarciaesgi/nuxt-typed-router.
前端架构专家 Owner — 当任务涉及页面、组件、状态管理、数据获取、异步缓存、SSR/Nuxt、runtime config、i18n、SSE、空白页、性能、可访问性或前端验证路线时使用；要求优先保证旧数据可见、异步刷新、渲染稳定和用户主路径不断线。
Install Frontend Architecture
$ npx skills add devcodex-labs/devcodex --skill frontend-architecture -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install devcodex-labs/devcodex frontend-architecture --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .claude/skills && cp -r skills-src/content/skills/frontend-architecture .claude/skills/frontend-architecture && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "frontend-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/frontend-architecture into .claude/skills/frontend-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-architecture", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/devcodex-labs/devcodex/tree/main/content/skills/frontend-architectureType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add devcodex-labs/devcodex --skill frontend-architecture -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install devcodex-labs/devcodex frontend-architecture --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .agents/skills && cp -r skills-src/content/skills/frontend-architecture .agents/skills/frontend-architecture && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "frontend-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/frontend-architecture into .agents/skills/frontend-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-architecture", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add devcodex-labs/devcodex --skill frontend-architecture -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install devcodex-labs/devcodex frontend-architecture --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/content/skills/frontend-architecture .cursor/skills/frontend-architecture && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "frontend-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/frontend-architecture into .cursor/skills/frontend-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-architecture", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/devcodex-labs/devcodex.git --path content/skills/frontend-architecture--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add devcodex-labs/devcodex --skill frontend-architecture -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install devcodex-labs/devcodex frontend-architecture --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/content/skills/frontend-architecture .gemini/skills/frontend-architecture && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "frontend-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/frontend-architecture into .gemini/skills/frontend-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-architecture", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install devcodex-labs/devcodex frontend-architectureInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add devcodex-labs/devcodex --skill frontend-architecture -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .github/skills && cp -r skills-src/content/skills/frontend-architecture .github/skills/frontend-architecture && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "frontend-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/frontend-architecture into .github/skills/frontend-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-architecture", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add devcodex-labs/devcodex --skill frontend-architecture -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install devcodex-labs/devcodex frontend-architecture --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/devcodex-labs/devcodex.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/content/skills/frontend-architecture .opencode/skills/frontend-architecture && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "frontend-architecture" agent skill from https://github.com/devcodex-labs/devcodex/tree/main/content/skills/frontend-architecture into .opencode/skills/frontend-architecture/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "frontend-architecture", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
frontend-architecture- GitHub stars
- 439
- Token cost
- ~624 tokens
- SKILL.md length
- 112 words
- Files
- 2
- Skills in repo
- 70
- Repo updated
- First seen
- Licence
- AGPL-3.0
At a glance
前端架构专家 Owner — 当任务涉及页面、组件、状态管理、数据获取、异步缓存、SSR/Nuxt、runtime config、i18n、SSE、空白页、性能、可访问性或前端验证路线时使用；要求优先保证旧数据可见、异步刷新、渲染稳定和用户主路径不断线。
- Works in 6 steps: 确定渲染策略：CSR、SSR、SSG、island、client-only、sus… → 建立状态模型：server state、client… → 设计异步数据：先渲染旧缓存或骨架的条件、刷新、错误、重试、取消和竞态处理。 → …
- Tasks that involve Internationalization
- SKILL.md covers 定位, 触发条件, 核心门禁 and 执行步骤, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Frontend Architecture is an agent skill from devcodex-labs/devcodex. 前端架构专家 Owner — 当任务涉及页面、组件、状态管理、数据获取、异步缓存、SSR/Nuxt、runtime config、i18n、SSE、空白页、性能、可访问性或前端验证路线时使用；要求优先保证旧数据可见、异步刷新、渲染稳定和用户主路径不断线。
Its SKILL.md is about 620 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `intent.json`).
It sits in Frontend & Design, covering Internationalization. It works with Nuxt. The repository describes itself as: Intent-driven AI coding workflow runtime for consistent context, skills, approvals, validation, and handoffs across six AI coding hosts. The licence is AGPL-3.0.
When your agent uses it
- Tasks that involve Internationalization
Example prompts
- “/frontend-architecture”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- 确定渲染策略：CSR、SSR、SSG、island、client-only、suspense 或 hydration 边界。
- 建立状态模型：server state、client state、表单草稿、缓存键、失效策略和路由返回恢复。
- 设计异步数据：先渲染旧缓存或骨架的条件、刷新、错误、重试、取消和竞态处理。
- 检查 runtime config、i18n、SSE、长连接、权限和鉴权状态对页面的影响。
- 定义组件边界：复用条件、props contract、事件、可访问性和布局稳定性。
- 选择验证路线：静态检查、单元/组件、API mock、E2E、截图或浏览器交互；记录跳过浏览器的理由。
What it can do on your machine
Read from SKILL.md and the folder at commit 1dd4525. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are markdown).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Frontend Architecture loads about 624 tokens when it runs. Until then it costs about 37 tokens; SKILL.md has 112 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from devcodex-labs/devcodex at commit 1dd4525, republished under its AGPL-3.0 licence (© devcodex-labs). 112 words, ~624 tokens.
Download SKILL.mdSave it as
.claude/skills/frontend-architecture/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- frontend-architecture
- description
- 前端架构专家 Owner — 当任务涉及页面、组件、状态管理、数据获取、异步缓存、SSR/Nuxt、runtime config、i18n、SSE、空白页、性能、可访问性或前端验证路线时使用；要求优先保证旧数据可见、异步刷新、渲染稳定和用户主路径不断线。
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 |
执行步骤
- 确定渲染策略：CSR、SSR、SSG、island、client-only、suspense 或 hydration 边界。
- 建立状态模型：server state、client state、表单草稿、缓存键、失效策略和路由返回恢复。
- 设计异步数据：先渲染旧缓存或骨架的条件、刷新、错误、重试、取消和竞态处理。
- 检查 runtime config、i18n、SSE、长连接、权限和鉴权状态对页面的影响。
- 定义组件边界：复用条件、props contract、事件、可访问性和布局稳定性。
- 选择验证路线：静态检查、单元/组件、API mock、E2E、截图或浏览器交互；记录跳过浏览器的理由。
输出字段
## 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 状态反馈、缓存和错误恢复验证 |
与其他 Skill 的关系
ux-interaction-architecture：提供任务流、状态反馈和恢复要求。developer-experience-architecture：前端示例、文档站和组件 API 面向开发者时叠加。audit-project/test-router：负责把前端风险映射到测试路线。expert-output-quality：前端方案和示例必须区分推荐架构与临时 demo。
© devcodex-labs, AGPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in content/skills/frontend-architecture of devcodex-labs/devcodex.
- SKILL.md
- intent.json
Open the folder on GitHubat commit 1dd4525
Compare with similar skills
Frontend Architecture next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Frontend Architecture this skilldevcodex-labs/devcodex | 439 | — | ~624 | Automated safety check: Pass | AGPL-3.0 | |
| Create Docsvictorgarciaesgi/nuxt-typed-router | 413 | 2 repos | ~2.8k | Automated safety check: Pass | MIT | |
| Sanity Best Practicesrobotostudio/turbo-start-sanity | 182 | — | ~940 | Automated safety check: Pass | MIT | |
| Nuxt Code EditorCaoMeiYouRen/caomei-auth | 220 | — | ~437 | Automated safety check: Pass | MIT | |
| Maz UIsecondsky/claude-skills | 227 | — | ~4.5k | Automated safety check: Pass | MIT | |
| Nuxt I18nArtisanCloud/PowerX | 379 | — | ~1.5k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Sanity Best Practices
robotostudio/turbo-start-sanity
Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, Blueprints, and…
Nuxt Code Editor
CaoMeiYouRen/caomei-auth
设计或实现 Vue 3、Nuxt 组件、页面、样式、交互、表单、状态绑定与 i18n 文本时使用。负责前端界面与交互的完整实现流程（目标确认、结构设计、实现约束、视觉验证），并遵循项目标准（PrimeVue、SCSS BEM、@mdi/font、Zod）。用户提到 component、page、UI、frontend、form、responsive、SCSS、BEM、i18n、设计落地时都应触发。
Maz UI
secondsky/claude-skills
Maz-UI v4 - Modern Vue & Nuxt component library with 50+ standalone components, composables, directives, theming, i18n, and SSR support.
Nuxt I18n
ArtisanCloud/PowerX
PowerX Nuxt i18n 词条与目录规范。
- Official
Sanity Best Practices
sanity-io/agent-toolkit
Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, webhooks, Blueprints…
More from devcodex-labs/devcodex
All 70 skills in this repoAccessibility I18n
devcodex-labs/devcodex
无障碍与国际化专家 Owner — 当任务涉及可访问性、键盘操作、焦点、屏幕阅读器、ARIA、语言地区、本地化、RTL、翻译资源、用户可见文案或多语言文档时使用；要求把包容性体验和本地化验证绑定到真实用户路径。
AI Agent System Architecture
devcodex-labs/devcodex
AI Agent 系统架构专家 Owner — 当任务涉及 Agent 路由、工具调用、上下文管理、记忆、状态机、权限、人机协作、可观测性、回放验证或模型辅助治理时使用；要求把 Agent 行为设计成可解释、可恢复、可审计。
API Contract Architecture
devcodex-labs/devcodex
API 契约架构专家 Owner — 当任务涉及 public API、HTTP/SDK/CLI 契约、版本兼容、错误模型、分页过滤、幂等、Schema、类型、迁移或消费者影响时使用；要求先冻结消费者契约，再设计实现与验证。
Architecture Design
devcodex-labs/devcodex
架构设计文档编排 Owner — 当用户要求架构设计、系统设计、技术架构或可指导开发、Review 与任务拆分的完整方案时使用；要求从业务流程反推节点、状态、数据、一致性、异常补偿、ADR 与实施任务。
Audit Common
devcodex-labs/devcodex
审查公共维度 G0~G5 + Profile Freshness Check — 所有 audit 子类型必先执行的基础维度层
Audit Session
devcodex-labs/devcodex
审计工作流的跨会话状态机 — 在 <audit-root/.audit-state/<session-id.json 持久化轮次/发现项/收敛状态，支持 Token 中断后精准恢复
Related
Works with
Categories
Questions about Frontend Architecture
What does Frontend Architecture do?
前端架构专家 Owner — 当任务涉及页面、组件、状态管理、数据获取、异步缓存、SSR/Nuxt、runtime config、i18n、SSE、空白页、性能、可访问性或前端验证路线时使用；要求优先保证旧数据可见、异步刷新、渲染稳定和用户主路径不断线。. Frontend Architecture is an agent skill from devcodex-labs/devcodex.
When should I use Frontend Architecture?
Frontend Architecture fits situations like: tasks that involve Internationalization.
How do I install Frontend Architecture in Claude Code?
Run `npx skills add devcodex-labs/devcodex --skill frontend-architecture -a claude-code`. Or copy the skill folder (content/skills/frontend-architecture in devcodex-labs/devcodex) into .claude/skills/frontend-architecture in your project. Claude Code loads it when a task matches its description.
How do I install Frontend Architecture in Codex?
Run `npx skills add devcodex-labs/devcodex --skill frontend-architecture -a codex`. Or copy the skill folder (content/skills/frontend-architecture in devcodex-labs/devcodex) into .agents/skills/frontend-architecture in your project. Codex loads it when a task matches its description.
Can I use Frontend Architecture in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add devcodex-labs/devcodex --skill frontend-architecture -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-architecture, .gemini/skills/frontend-architecture, .github/skills/frontend-architecture and .opencode/skills/frontend-architecture in your project.
What does Frontend Architecture need to run?
SKILL.md names no scripts, command-line tools or credentials: Frontend Architecture is instructions for the agent only.
Does Frontend Architecture access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Frontend Architecture safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Frontend Architecture use?
Frontend Architecture is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Frontend Architecture use?
About 624 tokens (SKILL.md is roughly 2.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Frontend Architecture?
Skills that share tags, products or a category with Frontend Architecture: Create Docs (victorgarciaesgi/nuxt-typed-router, 413 stars), Sanity Best Practices (robotostudio/turbo-start-sanity, 182 stars), Nuxt Code Editor (CaoMeiYouRen/caomei-auth, 220 stars) and Maz UI (secondsky/claude-skills, 227 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Frontend Architecture?
devcodex-labs (a GitHub organization) maintains it in devcodex-labs/devcodex, which has 439 GitHub stars. The repository holds 70 skills in this directory. The repository was last updated on September 17, 2026.
Source: devcodex-labs/devcodex on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.