api
FreeRESTful API design patterns and best practices. Use when creating endpoints, designing APIs, or implementing routes.
The English summary is being prepared. Showing the original description.
xiaobei930/cc-best48Updated Jun 13, 2026
FreePublished on GitHub
frontend
Frontend patterns: component design, state management, performance, accessibility. Use when building web frontends, components, or client-side apps.
The English summary is being prepared. Showing the original description.
See how to installFiles included (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 (original)
Review the instructions the agent will receive before you install.
前端开发模式
本技能提供前端开发的最佳实践和模式，支持多框架按需加载。
快速参考
- 核心职责: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发
- 框架支持: 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（按文件类型自动加载）。
记住: 前端开发的核心是用户体验——性能、无障碍、交互细节缺一不可，独特的设计比通用模板更有价值。
Reviews
No reviews yet. Tell others what you thought.
Comments
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
More skills from this repository
architecture
FreeArchitecture design skill: ADR records, system design checklists, scalability assessment, architecture patterns. Use for complex system design and architecture decisions.
The English summary is being prepared. Showing the original description.
xiaobei930/cc-best48Updated Jun 13, 2026
backend
FreeBackend development patterns for services, error handling, logging, caching. Use when building backend services, APIs, or microservices.
The English summary is being prepared. Showing the original description.
xiaobei930/cc-best48Updated Jun 13, 2026
compact
FreeStrategic compaction skill: suggests context compression at logical breakpoints. Use to suggest compaction at logical intervals during development sessions.
The English summary is being prepared. Showing the original description.
xiaobei930/cc-best48Updated Jun 13, 2026
database
FreeDatabase design, query optimization, migrations, and indexing. Use when designing schemas, writing queries, or managing migrations.
The English summary is being prepared. Showing the original description.
xiaobei930/cc-best48Updated Jun 13, 2026
debug
FreeSystematic debugging methods, log analysis, and performance diagnostics. Use when debugging issues, analyzing errors, or troubleshooting incidents.
The English summary is being prepared. Showing the original description.
xiaobei930/cc-best48Updated Jun 13, 2026