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.
SKILL.md
| Name | vercel-react-best-practices |
| Description | 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. |
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 及 Canvas | 3 |
| 办公生产力 (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 个技能)
| # | 技能 | 说明 | 来源 |
|---|---|---|---|
| 1 | artifacts-builder | 使用 React, Tailwind, shadcn/ui 构建多组件 HTML Artifacts | Anthropic |
| 2 | frontend-design | 创建独特的生产级前端界面 | Anthropic |
| 3 | react-best-practices | 来自 Vercel 工程团队的 React & Next.js 性能优化 | Vercel Labs |
| 4 | vercel-deploy | 部署应用到 Vercel 并获取预览链接 | Vercel Labs |
| 5 | web-design-guidelines | UI 代码审查,确保符合 Web 界面设计规范 | Vercel Labs |
| 6 | changelog-generator | 从 git commit 自动生成变更日志 | ComposioHQ |
| 7 | development-brainstorming | 协作式技术设计头脑风暴 | obra |
| 8 | git-pushing | 使用 Conventional Commits 规范提交并推送 | mhattingpete |
| 9 | github | 通过 gh CLI 进行 GitHub 操作:Issue, PR, CI, 代码审查 | OpenClaw |
| 10 | supabase-postgres-best-practices | 来自 Supabase 的 Postgres 性能优化最佳实践 | Supabase |
| 11 | md-to-pdf | 批量将 Markdown 转为 PDF,支持 CJK 字符和图片嵌入 | Jst-Well-Dan |
| 12 | context7 | Context7 CLI and MCP setup for AI coding skills management. | notedit |
| 13 | gstack | Fast headless browser for QA testing and site dogfooding. | Garry Tan |
内容流水线 Content Pipeline(16 个技能)
| # | 技能 | 说明 | 来源 |
|---|---|---|---|
| 1 | weixin-fetch | 抓取微信文章转为 Markdown,含破防爬逻辑 | Jst-Well-Dan |
| 2 | advanced-video-downloader | 下载 YouTube, B站等 1000+ 平台视频 | Jst-Well-Dan |
| 3 | youtube-transcript | 提取 YouTube 视频字幕 | Jst-Well-Dan |
| 4 | content-research-writer | 基于调研且带有引用的高质量内容写作 | ComposioHQ |
| 5 | baoyu-post-to-wechat | 发布到微信公众号 | Jim Liu (宝玉) |
| 6 | baoyu-article-illustrator | AI 文章配图生成 | Jim Liu (宝玉) |
| 7 | baoyu-cover-image | 文章封面图生成(20 种风格) | Jim Liu (宝玉) |
| 8 | baoyu-slide-deck | 专业幻灯片图片生成 | Jim Liu (宝玉) |
| 9 | baoyu-comic | 知识漫画创作(多种画风) | Jim Liu (宝玉) |
| 10 | baoyu-infographic | 专业信息图表(20 种布局 × 17 种风格) | Jim Liu (宝玉) |
| 11 | baoyu-image-gen | 通过 OpenAI/Google 官方 API 生成图片 | Jim Liu (宝玉) |
| 12 | openai-whisper-api | 通过 OpenAI Whisper API 进行语音转文字 | OpenClaw |
| 13 | sherpa-onnx-tts | 离线本地文字转语音(保护隐私) | OpenClaw |
| 14 | summarize | URL/文件/YouTube 内容摘要提取 | OpenClaw |
| 15 | jina-cli | 使用 Jina AI 进行网页内容读取与搜索 | geekjourneyx |
| 16 | minimax-tts | MiniMax TTS API for text-to-speech, voice cloning and voice design. | MiniMax |
Obsidian(3 个技能)
| # | 技能 | 说明 | 来源 |
|---|---|---|---|
| 1 | excalidraw-diagram | 为 Obsidian 生成 Excalidraw 架构图 | Axton Liu |
| 2 | mermaid-visualizer | 将文本转化为专业 Mermaid 图表 | Axton Liu |
| 3 | obsidian-canvas-creator | 创建 Obsidian Canvas 文件(思维导图与自由布局) | Axton Liu |
办公生产力 Productivity(13 个技能)
| # | 技能 | 说明 | 来源 |
|---|---|---|---|
| 1 | document-skills-docx | Word 文档创建、编辑、修订跟踪 | Anthropic |
| 2 | document-skills-xlsx | Excel 电子表格处理(含公式) | Anthropic |
| 3 | document-skills-pptx | PowerPoint 演示文稿创建与编辑 | Anthropic |
| 4 | document-skills-pdf | PDF 操作、提取与表单填写 | Anthropic |
| 5 | notion | Notion 知识管理集成 | OpenClaw |
| 6 | trello | Trello 项目看板管理 | OpenClaw |
| 7 | nano-pdf | 通过 nano-pdf CLI 进行自然语言 PDF 编辑 | OpenClaw |
| 8 | weather | 实时天气查询(无需 API key) | OpenClaw |
| 9 | obsidian-toolkit | 专家级 Obsidian 工具箱:Markdown, Bases, CLI | Steph Ango |
| 10 | notebooklm-integration | 查询 Google NotebookLM 以获取有据可查的回答 | PleasePrompto |
| 11 | Anthropic-brand-guidelines | 应用 Anthropic 品牌色彩与字体规范 | Anthropic |
| 12 | raffle-winner-picker | 抽奖活动随机中奖者抽取 | ComposioHQ |
| 13 | usfiscaldata | 美国财政部财政数据访问 | K-Dense-AI |
视觉与创意 Visual & Creative(10 个技能)
| # | 技能 | 说明 | 来源 |
|---|---|---|---|
| 1 | algorithmic-art | 使用 p5.js 创作生成式算法艺术 | Anthropic |
| 2 | canvas-design | 精美视觉艺术与海报创作 | Anthropic |
| 3 | image-enhancer | 图像分辨率与清晰度增强 | ComposioHQ |
| 4 | slack-gif-creator | 为 Slack 优化的动图创作 | Anthropic |
| 5 | theme-factory | 预设或自定义主题风格化 Artifacts | Anthropic |
| 6 | video-frames | 通过 ffmpeg 提取视频帧与缩略图 | OpenClaw |
| 7 | remotion | 基于 React 的视频创作(46 条最佳实践) | Remotion |
| 8 | baoyu-xhs-images | 小红书风格信息图系列生成 | Jim Liu (宝玉) |
| 9 | baoyu-compress-image | 批量图片压缩与优化 | Jim Liu (宝玉) |
| 10 | matplotlib | 出版级静态图表制作 | K-Dense-AI |
商业分析师 Business Analyst(18 个技能)
| # | 技能 | 说明 | 来源 |
|---|---|---|---|
| 1 | csv-data-summarizer | CSV 分析、摘要统计与快速可视化 | Jeremy Longshore |
| 2 | excel-pivot-wizard | Excel 数据透视表生成 | Jeremy Longshore |
| 3 | excel-variance-analyzer | 差异与偏差分析 | Jeremy Longshore |
| 4 | excel-dcf-modeler | DCF(现金流折现)估值金融模型 | Jeremy Longshore |
| 5 | excel-lbo-modeler | LBO(杠杆收购)分析金融模型 | Jeremy Longshore |
| 6 | invoice-processor | AI 视觉识别 PDF/图片发票提取至 Excel | Jst-Well-Dan |
| 7 | plotly | 交互式图表与仪表盘 | K-Dense-AI |
| 8 | seaborn | 统计数据可视化 | K-Dense-AI |
| 9 | geopandas | 地理空间数据分析与制图 | K-Dense-AI |
| 10 | networkx | 网络/图论分析与可视化 | K-Dense-AI |
| 11 | sympy | 符号数学计算 | K-Dense-AI |
| 12 | scientific-visualization | 综合科学可视化工具包 | K-Dense-AI |
| 13 | statistical-analysis | 标准化 EDA 与统计验证 | K-Dense-AI |
| 14 | edgartools | SEC EDGAR 文件研究 (10-K/10-Q/8-K) | K-Dense-AI |
| 15 | alpha-vantage | 通过 Alpha Vantage API 获取实时行情 | K-Dense-AI |
| 16 | hedgefundmonitor | 对冲基金风险监控与分析 | K-Dense-AI |
| 17 | excel-inventory | 高级库存与存货管理 | Jeremy Longshore |
| 18 | financial-report-pro | 自动化财务报告与摘要 | Jst-Well-Dan |
AI 元技能 AI Meta(8 个技能)
| # | 技能 | 说明 | 来源 |
|---|---|---|---|
| 1 | skill-creator | 编写高质量 Claude 技能的指南 | Anthropic |
| 2 | mcp-builder | 编写 MCP(Model Context Protocol)服务器的指南 | ComposioHQ |
| 3 | developer-growth-analysis | 从对话历史中分析编码模式与成长空间 | ComposioHQ |
| 4 | skill-seekers | 将文档、仓库、PDF 转化为技能的通用预处理器 | Yusuf Karaaslan |
| 5 | prompt-optimizer | 高阶系统提示词工程与优化 | Anthropic |
| 6 | skill-debugger | 调试复杂 Agent 技能的综合工具 | OpenClaw |
| 7 | context-compressor | 节省 Token 的上下文管理与压缩 | ComposioHQ |
| 8 | token-estimator | 精确的 Token 计数与成本估算 | Anthropic |
学习与研究 Learning & Research(1 个技能)
| # | 技能 | 说明 | 来源 |
|---|---|---|---|
| 1 | notebooklm | Expert guide and tools for Google NotebookLM CLI and MCP server. | Jacob BD |
🖥️ 支持的平台
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/ |
| OpenClaw | skills/ | ~/.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/ |
🤝 贡献与反馈
我们欢迎新技能、改进建议或 Bug 报告——每一份贡献都弥足珍贵。
- 🐛 发现 Bug?→ 提交 Issue
- 💡 有好主意?→ 发起 Discussion
- ✍️ 想要贡献?→ 查看技能创建指南
📜 致谢
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>