跳到正文
cccskills
免费在 GitHub 公开

react-best-practices

React/Next.js performance optimization with 40+ rules in 8 categories

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(1)

  • SKILL.md1.8 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

When to Use

  • Writing React/Next.js components
  • Data fetching implementation
  • Performance review
  • Bundle size optimization

Categories by Priority

Critical Priority

Waterfall Elimination

- Avoid sequential data fetching
- Use parallel data fetching
- Implement proper loading states
- Prefetch critical data

Bundle Optimization

- Minimize client-side JavaScript
- Use dynamic imports
- Tree-shake unused code
- Analyze bundle with tools

High Priority

Server-Side Performance

- Use Server Components by default
- Minimize 'use client' directives
- Implement streaming where possible
- Cache server responses

Medium-High Priority

Client-Side Fetching

- Use SWR or React Query
- Implement optimistic updates
- Handle loading/error states
- Cache API responses

Medium Priority

Rendering

- Avoid unnecessary re-renders
- Use React.memo strategically
- Implement useMemo/useCallback properly
- Virtualize long lists

Caching

- Implement proper cache headers
- Use ISR for dynamic content
- Cache database queries
- CDN caching strategies

Code Splitting

- Split by route
- Lazy load below-fold content
- Dynamic import heavy libraries
- Preload critical chunks

Low-Medium Priority

Image Optimization

- Use next/image
- Implement proper sizing
- Use modern formats (WebP, AVIF)
- Lazy load off-screen images

Execution Flow

1. Identify optimization area
2. Check relevant category rules
3. Apply recommendations
4. Verify improvements

Scripts

See scripts/ directory for automation helpers.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Pre-action boundary checking — validates agent tool calls against declared capabilities and task contracts

中文简介正在准备中。当前显示原文说明。

baekenough/second-brain152026年10月8日 更新

Auto-detect project context and optimize harness — deactivate unused agents/skills, suggest missing experts, generate project profile

中文简介正在准备中。当前显示原文说明。

baekenough/second-brain152026年10月8日 更新

Adversarial code review using attacker mindset — trust boundary, attack surface, business logic, and defense evaluation

中文简介正在准备中。当前显示原文说明。

baekenough/second-brain152026年10月8日 更新

Apache Airflow best practices for DAG authoring, testing, and production deployment

中文简介正在准备中。当前显示原文说明。

baekenough/second-brain152026年10月8日 更新

Alembic migration patterns for naming conventions, safety checks, expand-contract, env.py configuration, and CI integration

中文简介正在准备中。当前显示原文说明。

baekenough/second-brain152026年10月8日 更新

Pre-routing ambiguity analysis — scores request clarity and asks clarifying questions when needed (inspired by ouroboros)

中文简介正在准备中。当前显示原文说明。

baekenough/second-brain152026年10月8日 更新

查看 baekenough 的全部技能

报告此技能的问题