mcpField
V
vercel-skills

vercel-skills

github.com/podo开发29170 次安装1 天前更新
代码仓库

关于 vercel-skills

vercel-skills 是 Vercel 提供的技能集合，涵盖 UI 审查、组件架构和 React/Next.js 性能优化。它还提供无障碍、可组合组件及可复用组合模式的指导。

主要功能

  1. 01依据 Web Interface Guidelines 审查 UI
  2. 02指导无障碍组件架构
  3. 03支持可组合、可主题化组件
  4. 04优化 React 和 Next.js 性能
  5. 05建立可复用的组合模式

适用场景

  1. 01依据设计指南审查 UI 代码
  2. 02构建无障碍且可组合的组件
  3. 03优化 React 或 Next.js 性能

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill vercel-skills

安装后在 Claude Code 中输入/vercel-skills确认已加载。

附带文件stub.yaml

详细介绍

vercel-skills

目录占位条目 — 完整软件包：vercel-labs/skills

决策树

使用 Vercel 技能工作流前，请先运行以下步骤：

  1. 是否已安装 Vercel 技能？ 检查：~/.design-agent-skills/skills/building-components/SKILL.md 是否存在（代表性技能）。

    • 是 → 按名称调用相应技能并继续
    • 否 → 前往第 2 步

  2. 是否可以访问 shell？

    • 是 → 安装下方的相应技能，然后调用它
    • 否 → 显示安装命令；在 Claude Code 中，将命令作为以 ! 开头的聊天消息发送 — 添加 -g 进行全局安装，或省略以仅安装到项目中

安装命令

# Review UI code against 100+ Web Interface Guidelines
npx skills add vercel-labs/web-design-guidelines

# Build accessible, composable, themeable UI components
npx skills add vercel-labs/building-components

# React/Next.js performance optimization
npx skills add vercel-labs/react-best-practices

# React component composition and reusable patterns
npx skills add vercel-labs/composition-patterns

注意：web-design-guidelines 可能是过时的条目 — 使用前请验证是否已安装。

安装后调用

  • web-design-guidelines — “网页设计指南”、“UI 审查”
  • building-components — “构建组件”、“无障碍组件”、“可组合 API”
  • react-best-practices — “React 性能”、“Next.js 优化”
  • composition-patterns — “组合模式”、“可复用的 React 模式”

功能

Vercel 的官方技能集合：在 UI 代码审查中强制遵循 100 多项 Web 界面指南，指导构建无障碍且可组合的组件架构，优化 React/Next.js 性能，并建立可复用的组件组合模式。

评论

支持 Markdown