frontendlisted

# 前端开发模式 本技能提供前端开发的最佳实践和模式，支持多框架按需加载。 ## 快速参考 - **核心职责**: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发 - **框架支持**: 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.md) | Vue 3 + Composition API 模式 | | [react.md](./react.md) | React 18 + Hooks 模式 | | [svelte.md](./svelte.md) | Svelte/SvelteKit 模式 | | [angular.md](./angular.md) | Angular 17+ 模式 | | [performance.md](./performance.md) | Core Web Vitals 优化 | | [tailwind.md](./tailwind.md) | Tailwind 最佳实践 + v4 迁移 | | [design-guide.md](./design-guide.md) | 设计方法论与审查清单 | | [patterns.md](./patterns.md) | 通用组件/状态管理/表单/动画/a11y 模式 | ## 性能指标 | 指标 | 目标 | 说明 | | ------- | ------- | ------------