File contents 前端开发模式
本技能提供前端开发的最佳实践和模式，支持多框架按需加载。
快速参考
核心职责 : 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发框架支持 : 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.mdVue 3, Nuxt 3
React
react.mdReact 18, Next.js
Svelte
svelte.mdSvelte, SvelteKit
Angular
angular.mdAngular 17+
子文件索引
性能指标
指标
目标
说明
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（按文件类型自动加载）。
记住 : 前端开发的核心是用户体验——性能、无障碍、交互细节缺一不可，独特的设计比通用模板更有价值。
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1 --- 2 name: xiaobei930-cc-best-frontend 3 description: 前端开发模式 4 --- 5 6 # 前端开发模式 7 8 本技能提供前端开发的最佳实践和模式，支持多框架按需加载。 9 10 ## 快速参考 11 12 - **核心职责**: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发 13 - **框架支持**: Vue 3 / React 18 / Svelte / Angular 17+（根据 `package.json` 按需加载） 14 - **性能目标**: LCP < 2.5s, FID < 100ms, CLS < 0.1, TTI < 3.8s 15 - **设计原则**: 单一职责、Props 向下、Events 向上、组合优于继承 16 17 ## 触发条件 18 19 - 创建或修改前端组件 20 - 设计 UI/UX 交互 21 - 实现状态管理 22 - 性能优化 23 - 无障碍开发 24 25 ## 框架专属模式 26 27 根据项目 `package.json` 依赖加载对应文件： 28 29 | 技术栈 | 加载文件 | 框架 | 30 | ------- | ------------ | ----------------- | 31 | Vue | `vue.md` | Vue 3, Nuxt 3 | 32 | React | `react.md` | React 18, Next.js | 33 | Svelte | `svelte.md` | Svelte, SvelteKit | 34 | Angular | `angular.md` | Angular 17+ | 35 36 ## 子文件索引 37 38 | 文件 | 内容 | 39 | ------------------------------------ | ------------------------------------- | 40 | [vue.md](./vue.md) | Vue 3 + Composition API 模式 | 41 | [react.md](./react.md) | React 18 + Hooks 模式 | 42 | [svelte.md](./svelte.md) | Svelte/SvelteKit 模式 | 43 | [angular.md](./angular.md) | Angular 17+ 模式 | 44 | [performance.md](./performance.md) | Core Web Vitals 优化 | 45 | [tailwind.md](./tailwind.md) | Tailwind 最佳实践 + v4 迁移 | 46 | [design-guide.md](./design-guide.md) | 设计方法论与审查清单 | 47 | [patterns.md](./patterns.md) | 通用组件/状态管理/表单/动画/a11y 模式 | 48 49 ## 性能指标 50 51 | 指标 | 目标 | 说明 | 52 | ------- | ------- | ------------ | 53 | **LCP** | < 2.5s | 最大内容绘制 | 54 | **FID** | < 100ms | 首次输入延迟 | 55 | **CLS** | < 0.1 | 累积布局偏移 | 56 | **TTI** | < 3.8s | 可交互时间 | 57 58 ## 设计美学（避免 AI Slop） 59 60 > 详见 [design-guide.md](./design-guide.md) — AI 通用审美定义、设计思维方向矩阵、反模式清单与审查清单。 61 62 ## 测试模式 63 64 > 详见 `rules/frontend/frontend-testing.md` 和 `rules/frontend/frontend-e2e.md`（按文件类型自动加载）。 65 66 --- 67 68 > **记住**: 前端开发的核心是用户体验——性能、无障碍、交互细节缺一不可，独特的设计比通用模板更有价值。 69 70 --- 71 > Converted and distributed by [TomeVault](https://tomevault.io/claim/xiaobei930) — claim your Tome and manage your conversions. 72 <!-- tomevault:4.0:skill_md:2026-04-11 -->
commit a50a78cae5
Frequently asked questions How do I install the Xiaobei930 Cc Best Frontend skill? Run npx skillmds@latest add tomevault-io/xiaobei930-cc-best-frontend in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
What does the Xiaobei930 Cc Best Frontend skill do? 前端开发模式 It is listed under Web & Frontend on SkillMD.
Is Xiaobei930 Cc Best Frontend safe to use? This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
Which AI agents work with Xiaobei930 Cc Best Frontend? This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Is Xiaobei930 Cc Best Frontend free to use? Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
Who published Xiaobei930 Cc Best Frontend? tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io