---
name: frontend-8ea3ebf07b85
description: "Frontend patterns: component design, state management, performance, accessibility. Use when building web frontends, components, or client-side apps."
allowed-tools: Read, Write, Edit, Bash, Grep, Glob
---

# 前端开发模式

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

## 快速参考

- **核心职责**: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发
- **框架支持**: 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 模式 |

## 性能指标

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

## 设计美学（避免 AI Slop）

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

## 测试模式

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

---

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


---
Source attribution: xiaobei930
Original project: https://github.com/xiaobei930/cc-best/blob/a75ef2595230ad53fdd1711fd0cb6250d833541c/skills/frontend/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2025 xiaobei930

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Dave AI resource metadata

Creator / publisher: xiaobei930
Original project: https://github.com/xiaobei930/cc-best/blob/a75ef2595230ad53fdd1711fd0cb6250d833541c/skills/frontend/SKILL.md
Attribution basis: Source repository record

Fields of work: Design, Development & Engineering, Product Management
Roles: Frontend Developer, Product Manager, UX Designer
Specialties: API, Design, Frontend, Playwright, React, Testing
Tools: Tool not specified
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: 8d67ff1e146b70d2d50e888a8ebaa7ee866715e1b2c6cd50fd367f5207885316