Agent Skill
2/7/2026

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

J
jst
5GitHub Stars
1Views
npx skills add Jst-Well-Dan/Skill-Box

SKILL.md

Namevercel-react-best-practices
DescriptionReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
<p align="center"> <img src="./_logo/Skillbox-with-words 1.svg" alt="Skillbox Logo" width="600"> </p> <p align="center"> 简体中文 | <a href="./README.en.md">English</a> </p> <p align="center"> <img src="https://img.shields.io/badge/Plugins-39-blue?style=for-the-badge" alt="Plugins"> <img src="https://img.shields.io/badge/Skills-68-orange?style=for-the-badge" alt="Skills"> <img src="https://img.shields.io/badge/分类-8-blue?style=for-the-badge" alt="Categories"> <img src="https://img.shields.io/badge/平台-16+-green?style=for-the-badge" alt="Platforms"> <img src="https://img.shields.io/badge/License-MIT-purple?style=for-the-badge" alt="License"> </p> <p align="center"> <em>跨 AI Agent 的技能策展平台 — 跨平台兼容 · 场景驱动 · 持续进化</em> </p>

Skill Box 是什么?

Skill Box 是一个跨 AI Agent 的技能策展平台。它的价值不在于“收集”,而在于筛选 + 整合 + 降低使用门槛

与按技术功能罗列技能的仓库不同,Skill Box 围绕用户角色和真实工作流组织技能——让你根据“想做什么”来找到所需技能,而非先搞懂“要调哪个 API”。

🎯 Skill Box 生态

组件定位链接
Skill Box (本仓库)核心内容层 — 策展技能库你在这里
Skill Box Website展示层 — 可视化浏览技能skill-box.zwtj.site
Skillbox Studio行动层 — 可视化安装工具GitHub

💡 为什么选 Skill Box?

  • 跨平台兼容:支持 16+ AI Agent — Claude Code, Cursor, Windsurf, Gemini CLI, Amp 等。
  • 场景化分类:按“你要做什么”分类,而非按底层功能分类。
  • 完整工具链:配套的 Website + Studio 工具,降低非技术用户的使用门槛。
  • 双层质量标签:每个技能清晰标注为 🎖️ Curated(作者亲测推荐)或 🌐 Community(质量合格收录)。

📋 技能分类

分类说明技能数
开发工具 (Dev Tools)前端开发、测试、DevOps 及 AI 元技能13
内容流水线 (Content Pipeline)网页采集、视频下载、AI 内容创作及发布16
Obsidian适配 Obsidian 的视觉套件:Excalidraw、Mermaid 及 Canvas3
办公生产力 (Productivity)文档处理 (Word/Excel/PDF)、Notion 及效率工具13
视觉与创意 (Visual & Creative)视觉艺术、图像处理及视频创作10
商业分析师 (Business Analyst)数据分析、财务建模、SEC 研究及发票处理18
AI 元技能 (AI Meta)技能创建指南及开发者成长分析8
学习与研究 (Learning & Research)深度阅读、知识管理、研究辅助1

🌟 严选工作流 (Curated Workflows)

“不再是零散的工具,而是经过作者高频实战验证的专业闭环。”

🎥 深度内容获取与创作 (Content & Media)

  • jina-cli & content-harvester — 网页内容结构化的“眼睛”与视频/微信文章抓取三件套,是内容工程的基础设施。
  • baoyu-content-creation-suite — 宝玉出品的全能创作套件,涵盖小红书、微信配图及各种专业信息图表生成。

📊 商业分析与办公自动化 (Business & Productivity)

  • invoice-processor — 自动化发票处理,通过 AI 视觉将 PDF/图片发票批量提取至 Excel,告别手工录入。
  • document-suite & md-to-pdf — Anthropic 官方办公全家桶与自建 Markdown 转 PDF 工具,打通文档输出的最后一环。
  • notebooklm-integration — 深度文档分析利器,直接在 Agent 中查询 NotebookLM 笔记,确保回答有据可查。

📝 第二大脑与知识管理 (Second Brain)

  • obsidian-toolkit — Obsidian 创始人 kepano 官方出品的权威技能包,涵盖 Markdown 深度编辑与自动化管理。

💻 前端开发与 AI 元能力 (Dev & Meta)

  • anthropic-frontend-design & vercel-frontend-suite — 官方出品的前端设计与工程化工具,构建高质量 UI 与一键部署的基石。

🚀 快速开始

方式一:一键安装(推荐)

claude plugin install Jst-Well-Dan/Skill-Box

方式二:使用 Skillbox Studio

下载 Skillbox Studio,享受可视化的安装体验。

方式三:手动安装

将任意技能文件夹复制到你的 Agent 技能目录。确切路径请参考平台兼容性章节。

使用技能

安装后,你的 AI Agent 会自动识别何时调用相关技能。例如:

  • "分析这个 PDF 并总结到 Word" → 自动调用 docx + pdf
  • "抓取这个网页并分析其商业模式" → 自动调用 weixin-fetch + csv-data-summarizer
  • "下载这个 YouTube 视频并提取字幕" → 自动调用 advanced-video-downloader + youtube-transcript

📂 完整技能清单

<details> <summary>点击展开 8 大分类 / 39 个插件 / 68 个技能完整列表</summary>

开发工具 Dev Tools(13 个技能)

#技能说明来源
1artifacts-builder使用 React, Tailwind, shadcn/ui 构建多组件 HTML ArtifactsAnthropic
2frontend-design创建独特的生产级前端界面Anthropic
3react-best-practices来自 Vercel 工程团队的 React & Next.js 性能优化Vercel Labs
4vercel-deploy部署应用到 Vercel 并获取预览链接Vercel Labs
5web-design-guidelinesUI 代码审查,确保符合 Web 界面设计规范Vercel Labs
6changelog-generator从 git commit 自动生成变更日志ComposioHQ
7development-brainstorming协作式技术设计头脑风暴obra
8git-pushing使用 Conventional Commits 规范提交并推送mhattingpete
9github通过 gh CLI 进行 GitHub 操作:Issue, PR, CI, 代码审查OpenClaw
10supabase-postgres-best-practices来自 Supabase 的 Postgres 性能优化最佳实践Supabase
11md-to-pdf批量将 Markdown 转为 PDF,支持 CJK 字符和图片嵌入Jst-Well-Dan
12context7Context7 CLI and MCP setup for AI coding skills management.notedit
13gstackFast headless browser for QA testing and site dogfooding.Garry Tan

内容流水线 Content Pipeline(16 个技能)

#技能说明来源
1weixin-fetch抓取微信文章转为 Markdown,含破防爬逻辑Jst-Well-Dan
2advanced-video-downloader下载 YouTube, B站等 1000+ 平台视频Jst-Well-Dan
3youtube-transcript提取 YouTube 视频字幕Jst-Well-Dan
4content-research-writer基于调研且带有引用的高质量内容写作ComposioHQ
5baoyu-post-to-wechat发布到微信公众号Jim Liu (宝玉)
6baoyu-article-illustratorAI 文章配图生成Jim Liu (宝玉)
7baoyu-cover-image文章封面图生成(20 种风格)Jim Liu (宝玉)
8baoyu-slide-deck专业幻灯片图片生成Jim Liu (宝玉)
9baoyu-comic知识漫画创作(多种画风)Jim Liu (宝玉)
10baoyu-infographic专业信息图表(20 种布局 × 17 种风格)Jim Liu (宝玉)
11baoyu-image-gen通过 OpenAI/Google 官方 API 生成图片Jim Liu (宝玉)
12openai-whisper-api通过 OpenAI Whisper API 进行语音转文字OpenClaw
13sherpa-onnx-tts离线本地文字转语音(保护隐私)OpenClaw
14summarizeURL/文件/YouTube 内容摘要提取OpenClaw
15jina-cli使用 Jina AI 进行网页内容读取与搜索geekjourneyx
16minimax-ttsMiniMax TTS API for text-to-speech, voice cloning and voice design.MiniMax

Obsidian(3 个技能)

#技能说明来源
1excalidraw-diagram为 Obsidian 生成 Excalidraw 架构图Axton Liu
2mermaid-visualizer将文本转化为专业 Mermaid 图表Axton Liu
3obsidian-canvas-creator创建 Obsidian Canvas 文件(思维导图与自由布局)Axton Liu

办公生产力 Productivity(13 个技能)

#技能说明来源
1document-skills-docxWord 文档创建、编辑、修订跟踪Anthropic
2document-skills-xlsxExcel 电子表格处理(含公式)Anthropic
3document-skills-pptxPowerPoint 演示文稿创建与编辑Anthropic
4document-skills-pdfPDF 操作、提取与表单填写Anthropic
5notionNotion 知识管理集成OpenClaw
6trelloTrello 项目看板管理OpenClaw
7nano-pdf通过 nano-pdf CLI 进行自然语言 PDF 编辑OpenClaw
8weather实时天气查询(无需 API key)OpenClaw
9obsidian-toolkit专家级 Obsidian 工具箱:Markdown, Bases, CLISteph Ango
10notebooklm-integration查询 Google NotebookLM 以获取有据可查的回答PleasePrompto
11Anthropic-brand-guidelines应用 Anthropic 品牌色彩与字体规范Anthropic
12raffle-winner-picker抽奖活动随机中奖者抽取ComposioHQ
13usfiscaldata美国财政部财政数据访问K-Dense-AI

视觉与创意 Visual & Creative(10 个技能)

#技能说明来源
1algorithmic-art使用 p5.js 创作生成式算法艺术Anthropic
2canvas-design精美视觉艺术与海报创作Anthropic
3image-enhancer图像分辨率与清晰度增强ComposioHQ
4slack-gif-creator为 Slack 优化的动图创作Anthropic
5theme-factory预设或自定义主题风格化 ArtifactsAnthropic
6video-frames通过 ffmpeg 提取视频帧与缩略图OpenClaw
7remotion基于 React 的视频创作(46 条最佳实践)Remotion
8baoyu-xhs-images小红书风格信息图系列生成Jim Liu (宝玉)
9baoyu-compress-image批量图片压缩与优化Jim Liu (宝玉)
10matplotlib出版级静态图表制作K-Dense-AI

商业分析师 Business Analyst(18 个技能)

#技能说明来源
1csv-data-summarizerCSV 分析、摘要统计与快速可视化Jeremy Longshore
2excel-pivot-wizardExcel 数据透视表生成Jeremy Longshore
3excel-variance-analyzer差异与偏差分析Jeremy Longshore
4excel-dcf-modelerDCF(现金流折现)估值金融模型Jeremy Longshore
5excel-lbo-modelerLBO(杠杆收购)分析金融模型Jeremy Longshore
6invoice-processorAI 视觉识别 PDF/图片发票提取至 ExcelJst-Well-Dan
7plotly交互式图表与仪表盘K-Dense-AI
8seaborn统计数据可视化K-Dense-AI
9geopandas地理空间数据分析与制图K-Dense-AI
10networkx网络/图论分析与可视化K-Dense-AI
11sympy符号数学计算K-Dense-AI
12scientific-visualization综合科学可视化工具包K-Dense-AI
13statistical-analysis标准化 EDA 与统计验证K-Dense-AI
14edgartoolsSEC EDGAR 文件研究 (10-K/10-Q/8-K)K-Dense-AI
15alpha-vantage通过 Alpha Vantage API 获取实时行情K-Dense-AI
16hedgefundmonitor对冲基金风险监控与分析K-Dense-AI
17excel-inventory高级库存与存货管理Jeremy Longshore
18financial-report-pro自动化财务报告与摘要Jst-Well-Dan

AI 元技能 AI Meta(8 个技能)

#技能说明来源
1skill-creator编写高质量 Claude 技能的指南Anthropic
2mcp-builder编写 MCP(Model Context Protocol)服务器的指南ComposioHQ
3developer-growth-analysis从对话历史中分析编码模式与成长空间ComposioHQ
4skill-seekers将文档、仓库、PDF 转化为技能的通用预处理器Yusuf Karaaslan
5prompt-optimizer高阶系统提示词工程与优化Anthropic
6skill-debugger调试复杂 Agent 技能的综合工具OpenClaw
7context-compressor节省 Token 的上下文管理与压缩ComposioHQ
8token-estimator精确的 Token 计数与成本估算Anthropic

学习与研究 Learning & Research(1 个技能)

#技能说明来源
1notebooklmExpert guide and tools for Google NotebookLM CLI and MCP server.Jacob BD
</details>

🖥️ 支持的平台

Skill Box 兼容 16+ AI Agent。可使用下方路径表手动配置,或使用一键工具。

一键配置 (推荐): 使用 vercel-labs/add-skill 进行交互式选择与自动安装。

<details> <summary>点击展开完整兼容性列表</summary>
AI Agent项目路径全局路径
Claude Code.claude/skills/~/.claude/skills/
Windsurf.windsurf/skills/~/.codeium/windsurf/skills/
Cursor.cursor/skills/~/.cursor/skills/
GitHub Copilot.github/skills/~/.copilot/skills/
Trae.trae/skills/~/.trae/skills/
Gemini CLI.gemini/skills/~/.gemini/skills/
Roo Code.roo/skills/~/.roo/skills/
Antigravity.agent/skills/~/.gemini/antigravity/skills/
OpenClawskills/~/.OpenClaw/skills/
Goose.goose/skills/~/.config/goose/skills/
OpenCode.opencode/skills/~/.config/opencode/skills/
Kilo Code.kilocode/skills/~/.kilocode/skills/
Kiro CLI.kiro/skills/~/.kiro/skills/
Amp.agents/skills/~/.config/agents/skills/
Codex.codex/skills/~/.codex/skills/
Droid.factory/skills/~/.factory/skills/
</details>

🤝 贡献与反馈

我们欢迎新技能、改进建议或 Bug 报告——每一份贡献都弥足珍贵。


📜 致谢

Skill Box 站在开源社区巨人的肩膀上。感谢所有技能作者与来源仓库:

Anthropic · Vercel Labs · Jim Liu (宝玉) · ComposioHQ · obra · K-Dense-AI · OpenClaw · Supabase · Remotion · Axton Liu · Jeremy Longshore · PleasePrompto · staruhub · Steph Ango (kepano) · Yusuf Karaaslan


<p align="center"> <b>Load Skills, Level Up.</b><br> <em>by <a href="https://github.com/Jst-Well-Dan">Jst-Well-Dan</a></em> </p>
Skills Info
Original Name:vercel-react-best-practicesAuthor:jst