Cc-best frontend

Frontend patterns: component design, state management, performance, accessibility. Use when building web frontends, components, or client-side apps.

install

source · Clone the upstream repo

git clone https://github.com/xiaobei930/cc-best

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/xiaobei930/cc-best "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/frontend" ~/.claude/skills/xiaobei930-cc-best-frontend && rm -rf "$T"

manifest: skills/frontend/SKILL.md

source content

前端开发模式

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

快速参考

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

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