frontend

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

快速参考

• 核心职责: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发
• 框架支持: 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（按文件类型自动加载）。

---

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