前端开发模式

本技能提供前端开发的最佳实践和模式，支持多框架按需加载。

快速参考

• 核心职责: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发
• 框架支持: Vue 3 / React 18 / Svelte / Angular 17+（根据 package.json 按需加载）
• 性能目标: LCP < 2.5s, FID < 100ms, CLS < 0.1, TTI < 3.8s
• 设计原则: 单一职责、Props 向下、Events 向上、组合优于继承

触发条件

• 创建或修改前端组件
• 设计 UI/UX 交互
• 实现状态管理
• 性能优化
• 无障碍开发

框架专属模式

根据项目 package.json 依赖加载对应文件：

技术栈	加载文件	框架
Vue	vue.md	Vue 3, Nuxt 3
React	react.md	React 18, Next.js
Svelte	svelte.md	Svelte, SvelteKit
Angular	angular.md	Angular 17+

子文件索引

文件	内容
vue.md	Vue 3 + Composition API 模式
react.md	React 18 + Hooks 模式
svelte.md	Svelte/SvelteKit 模式
angular.md	Angular 17+ 模式
performance.md	Core Web Vitals 优化
tailwind.md	Tailwind 最佳实践 + v4 迁移
design-guide.md	设计方法论与审查清单
patterns.md	通用组件/状态管理/表单/动画/a11y 模式

性能指标

指标	目标	说明
LCP	< 2.5s	最大内容绘制
FID	< 100ms	首次输入延迟
CLS	< 0.1	累积布局偏移
TTI	< 3.8s	可交互时间

设计美学（避免 AI Slop）

详见 design-guide.md — AI 通用审美定义、设计思维方向矩阵、反模式清单与审查清单。

测试模式

详见 rules/frontend/frontend-testing.md 和 rules/frontend/frontend-e2e.md（按文件类型自动加载）。

---

记住: 前端开发的核心是用户体验——性能、无障碍、交互细节缺一不可，独特的设计比通用模板更有价值。