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(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
前端开发模式
本技能提供前端开发的最佳实践和模式，支持多框架按需加载。
快速参考
- 核心职责: 提供前端开发最佳实践——组件设计、状态管理、性能优化、无障碍开发
- 框架支持: 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일 업데이트