TypingMindTypingMindThe best frontend for AI
Frontend Architecture logo

Frontend Architecture

Organization
devcodex-labs
frontend-architecture

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

Overview

Publisherdevcodex-labs
Repositorydevcodex
Skill namefrontend-architecture
Stars
433
Forks
44
Bundled files
1
LicenseAGPL-3.0
Links
Skill sourceRepositoryHomepage
  • Markdown instructions

    A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.

  • Works with any LLM

    AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.

  • 1 bundled files

    Scripts, templates, and references the model can read while it works. Files are read-only and never executed.

  • Open source

    Published by devcodex-labs on GitHub. Read the source before you install it.

Installation

Install the Frontend Architecture AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

1

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

  1. Open the app and go to Plugins → Skills.
  2. Choose "Install from GitHub".
  3. Paste the skill folder URL below and confirm.
    https://github.com/devcodex-labs/devcodex/tree/main/content/skills/frontend-architecture
  4. Enable the skill in any chat where you want it available.
Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.
2

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills
git clone --depth 1 https://github.com/devcodex-labs/devcodex.git /tmp/devcodex
mkdir -p .claude/skills
cp -r /tmp/devcodex/content/skills/frontend-architecture .claude/skills/frontend-architecture
Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Frontend Architecture in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Frontend Architecture on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Frontend Architecture is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

  • Loaded only when it is needed

    The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.

  • Switch models mid-chat

    Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

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
RuntimeConfigI18nGateruntime 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-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。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Frontend Architecture AI skill do?

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

Why use Frontend Architecture on TypingMind?

Because you install it once and use it with any model. Frontend Architecture is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Frontend Architecture in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/devcodex-labs/devcodex/tree/main/content/skills/frontend-architecture. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Frontend Architecture?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Frontend Architecture?

As many as you like. As long as a model supports skills, you can use Frontend Architecture with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Frontend Architecture AI skill free?

Yes. It is published on GitHub by devcodex-labs under the AGPL-3.0 license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

Related AI Skills

View all
NousResearch logo

Pptx Author

NousResearch
OrganizationPopular

Build PowerPoint decks headless with python-pptx.

53.5K
250.4K
Instructions
View
NousResearch logo

Stocks

NousResearch
OrganizationPopular

Stock quotes, history, search, compare, crypto via Yahoo.

53.5K
250.4K
1 files
View
NousResearch logo

Lambda Labs

NousResearch
OrganizationPopular

On-demand GPU cloud instances for ML training.

53.5K
250.4K
2 files
View
NousResearch logo

Modal

NousResearch
OrganizationPopular

Serverless GPU cloud for ML jobs and model APIs.

53.5K
250.4K
2 files
View

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇