frontend-architecture-governance
Provides architectural governance for unified frontend project management and refactoring.
Install
mkdir -p .claude/skills/frontend-architecture-governance && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15476" && unzip -o skill.zip -d .claude/skills/frontend-architecture-governance && rm skill.zipInstalls to .claude/skills/frontend-architecture-governance
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
需要统一或调整管理端前端架构时使用：目录结构、路由、菜单权限、API 层、请求封装、状态管理、组件抽象、表格表单规范、样式和跨页面重构治理。Key capabilities
- →Unify frontend architecture for management systems
- →Standardize directory structures
- →Govern routing and menu permissions
- →Standardize API layer and request encapsulation
- →Abstract components and standardize table/form specifications
- →Manage styles and cross-page refactoring
How it works
The skill identifies current architectural elements like routes, API layers, and components, then finds inconsistencies. It designs a target architecture and a phased migration plan to unify development norms.
Inputs & outputs
When to use frontend-architecture-governance
- →Unify frontend architecture
- →Refactor common components
- →Standardize API layer
- →Clean up temporary styles
About this skill
前端架构治理
使用目标
统一管理端前端项目的目录、路由、API、状态、组件和页面开发规范，让后续页面按同一套架构推进。
适用场景
- 用户要求“统一前端架构”“整理目录”“重构组件”“统一请求”“统一表格/表单”。
- 多个页面重复实现相同表格、表单、弹窗或 API 调用。
- 菜单、权限、路由和页面结构不一致。
- 请求封装、错误处理、token、状态管理不统一。
工作流程
- 盘点现状：
src/app路由src/apiAPI 层src/components公共组件src/constants/menuConfig.tsxsrc/storesrc/utils/request.ts
- 找出重复和不一致点。
- 设计目标架构和迁移计划。
- 分阶段治理，每阶段可验证。
- 未经用户要求，不做大范围重构。
统一范围
- 路由和菜单：App Router、dashboard layout、权限码。
- API 层：模块化 API、types、统一请求和错误处理。
- 页面模式：列表页、编辑页、详情页、导入导出页。
- 公共组件：ProDataTable、UploadImage、布局组件、业务弹窗。
- 状态管理：登录用户、权限、菜单、全局缓存。
- 样式规范：Semi UI 优先，避免页面内大段临时样式。
输出建议
- 当前架构现状。
- 不一致点和风险。
- 目标架构规则。
- 分阶段改造计划。
- 影响页面和验证方式。
When not to use it
- →When the goal is not to unify or adjust the frontend architecture of a management system
- →When the user does not want to standardize development norms
Limitations
- →Does not perform large-scale refactoring without user request
- →Focuses on management system frontend projects
- →Prioritizes Semi UI for style norms
How it compares
This skill provides a structured approach to frontend architecture governance, identifying inconsistencies and proposing a phased plan, which is more systematic than ad-hoc refactoring.
Compared to similar skills
frontend-architecture-governance side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-architecture-governance (this skill) | 0 | 3mo | No flags | Advanced |
| nextjs-best-practices | 31 | 6mo | No flags | Intermediate |
| web-component-design | 5 | 5mo | No flags | Intermediate |
| react-component-patterns | 3 | 1mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
nextjs-best-practices
davila7
Next.js App Router principles. Server Components, data fetching, routing patterns.
web-component-design
wshobson
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
react-component-patterns
HoangNguyen0403
Modern React component architecture and composition patterns.
vercel-composition-patterns
vercel-labs
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
javascript-typescript-typescript-scaffold
sickn33
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
server-components
davepoon
This skill should be used when the user asks about "Server Components", "Client Components", "'use client' directive", "when to use server vs client", "RSC patterns", "component composition", "data fetching in components", or needs guidance on React Server Components architecture in Next.js.