api
免费RESTful API design patterns and best practices. Use when creating endpoints, designing APIs, or implementing routes.
中文简介正在准备中。当前显示原文说明。
xiaobei930/cc-best482026年6月13日 更新
免费在 GitHub 公开
frontend
Frontend patterns: component design, state management, performance, accessibility. Use when building web frontends, components, or client-side apps.
中文简介正在准备中。当前显示原文说明。
查看安装方法包含的文件（9）
- SKILL.md2.8 KB
- angular.md14.3 KB
- design-guide.md7.2 KB
- patterns.md5.2 KB
- performance.md11.9 KB
- react.md18.7 KB
- svelte.md10.9 KB
- tailwind.md5.8 KB
- vue.md23.0 KB
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
前端开发模式
本技能提供前端开发的最佳实践和模式，支持多框架按需加载。
快速参考
- 核心职责: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发
- 框架支持: 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（按文件类型自动加载）。
记住: 前端开发的核心是用户体验——性能、无障碍、交互细节缺一不可，独特的设计比通用模板更有价值。
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
Architecture design skill: ADR records, system design checklists, scalability assessment, architecture patterns. Use for complex system design and architecture decisions.
中文简介正在准备中。当前显示原文说明。
xiaobei930/cc-best482026年6月13日 更新
backend
免费Backend development patterns for services, error handling, logging, caching. Use when building backend services, APIs, or microservices.
中文简介正在准备中。当前显示原文说明。
xiaobei930/cc-best482026年6月13日 更新
compact
免费Strategic compaction skill: suggests context compression at logical breakpoints. Use to suggest compaction at logical intervals during development sessions.
中文简介正在准备中。当前显示原文说明。
xiaobei930/cc-best482026年6月13日 更新
database
免费Database design, query optimization, migrations, and indexing. Use when designing schemas, writing queries, or managing migrations.
中文简介正在准备中。当前显示原文说明。
xiaobei930/cc-best482026年6月13日 更新
debug
免费Systematic debugging methods, log analysis, and performance diagnostics. Use when debugging issues, analyzing errors, or troubleshooting incidents.
中文简介正在准备中。当前显示原文说明。
xiaobei930/cc-best482026年6月13日 更新