Skill 多步业务能力包MCP Server 底层工具能力JSON-RPC。主要用于 Claude Code、Cursor、Cline、OpenClaw——分UI 设计、React/Vue 工程、浏览器调试、代码审查、项目管理、外部集成六大类一文标注热度、用途、痛点。01 先搞懂Skill、MCP、Function Calling 差在哪2026 年前端圈聊 AI 编程三个词最容易混Function Calling、Skill、MCP Server。面试常问日常装插件也常搞混。一张表说清楚概念是什么类比Function Calling最小原子动作调用单个函数一把螺丝刀Skill编排多个 Function/Prompt封装一套业务流程整套工具箱 施工手册MCP Server底层协议服务向外暴露 Tools/ResourcesSkill 可以调用 MCP 提供的工具供电插座 标准接口和Rules的区别Rules始终加载的项目约束「别用 any」「用 pnpm」Skills按需动态加载的专业经验包「怎么做好 React 性能优化」Cursor 官方博客讲得很直白——Skills 让 Agent 在相关任务出现时才拉进上下文既省 token又在关键时刻「突然变专业」。所有 Skill 都写在SKILL.md里遵循 agentskills.io 开放格式。Vercel 的npx skillsCLI 像包管理器从.agents/skills软链到~/.cursor/skills等目录一次更新所有 Agent 同步。npx skillsfindfrontend# 搜索npx skills list# 查看已安装npx skills update# 更新全部一句话总结Rules 管「别乱来」Skills 管「怎么做好」。02 UI/UX 设计类解决 AI 页面「模板化、AI 味儿重」Skillselion 2026 年 8 月统计当天增速最快的 7 个 Skill 搜索里4 个是设计类合计安装量超 166 万。Agent 早就能跑通页面了现在抢的是——看起来像人认真设计过的界面。Skill/MCP来源核心能力适用场景frontend-designAnthropic 官方强制先定视觉风格、排版、留白、色彩体系再输出代码拒绝千篇一律 AI 页面Landing 页、仪表盘、组件、完整 Web 页面web-design-guidelinesVercel LabsNext.js / Web 设计规范、交互细节、可访问性 A11Y企业官网、B 端后台ui-ux-pro-max社区60 套 UI 风格库、配色方案、组件范式快速切换设计语言、原型canvas-designAnthropicCanvas / WebGL 可视化生成图表、动画画布代码大屏、数据可视化frontend-design安装量约 76.8 万skills.sh 快照是目前最稳的默认选择。npx skillsaddanthropics/skills--skillfrontend-design⚠️踩坑提醒设计类 Skill 功能高度重叠不要全装。Frontend Design 当默认安全牌想要更激进审美再试 Design Taste 或 Impeccable 其中一个。装 23 个只会互相抢上下文、烧 token。03 React / Next.js 专项前端最高热度如果说设计 Skill 解决「好不好看」vercel-react-best-practices解决「快不快、规不规范」——安装量约 54 万Skillselion 前端开发类排名第一。Skill/MCP来源能力vercel-react-best-practicesVercel Labs70 条 React/Next 性能、组件、Hooks 规范识别过度渲染、滥用 Effect、Hydration 坑zustand-patterns社区Zustand 状态管理最佳实践避免全局状态滥用、Selector 优化tanstack-query-skill社区React Query 规范化缓存策略、错误处理、分页样板代码nextjs-app-router-expert社区App Router、Server Component、Parallel Routes、缓存陷阱排查Agent 写 React 组件时会优先处理 async waterfall而不是无脑堆 memo 和 useCallback——这是 Vercel Engineering 按实测影响排序的 70 条规则。npx skillsaddvercel-labs/agent-skills--skillvercel-react-best-practices04 Vue / UniApp 生态React 党装完上面那套Vue 党也有自己的「三件套」Skill能力vue3-composition-best-practiceComposable 封装、ref/reactive 误区、watch/watchEffect 规范uniapp-skillUniApp 多端兼容、条件编译、App/小程序坑点、样式适配pinia-patternsPinia 模块化、持久化、状态拆分方案国内做小程序、跨端的同学uniapp-skill值得单独装——Agent 默认不太懂条件编译和 rpx 适配那些坑。05 浏览器调试 DOMMCP 为主这类能力主要靠MCP Server不是 Skill 文件——Agent 通过 JSON-RPC 直接操控浏览器。MCP Server能力chrome-devtools-mcp操控 ChromeDOM 查看、Console、Network 抓包、元素审查、截图、自动化交互、复现线上 Bugbrowser-agent-mcpVercelAI 驱动浏览器访问网页、抓取、交互、测试页面流程frontend-performance-auditLighthouse 自动化输出性能优化点FCP、LCP、CLS、资源体积排查线上 Bug、复现用户反馈时chrome-devtools-mcp几乎是必装——比让 Agent「猜」Network 请求靠谱太多。06 代码审查、质量、TS 专项写完代码不算完审查才是前端日常大头Skill/MCP来源能力frontend-code-reviewDify 开源TS/TSX/JS 代码审查性能、安全、业务逻辑给出具体行号 修复代码typescript-deep-audit社区TypeScript 类型漏洞any 泛滥、泛型滥用、类型收窄问题修复eslint-auto-fix-skill社区自动生成/修正 ESLint 配置批量修复项目 Lint 问题context7-mcp⭐社区拉取框架官方最新文档避免 AI 用过时 APIReact、Vue、Vite 等context7-mcp值得单独说Agent 训练数据有滞后React 19、Next.js 15 新 API 它可能还在用旧写法。这个 MCP 让 Agent 查官方文档再写代码踩坑率直线下降。07 项目工程 任务管理Matt Pocock 系列GitHub 高星的Matt Pocock 系列 Skill解决「大项目怎么不让 Agent 上下文爆炸」Skill能力grill-memattpocock「拷问 AI」对方案做逆向评审找出漏洞、边界 Case、遗漏需求防设计缺陷handoff大项目任务拆分把复杂需求拆成子任务会话交接防止上下文爆炸project-map生成项目架构地图梳理目录结构、模块依赖适合接手老前端项目monorepo-skillPNPM/Turborepo 项目维护依赖分析、包脚本、构建问题排查grill-me搜索增速 160%Skillselion 2026.08——很多人开始在写代码之前先让 AI 自证方案没问题而不是写完再改。08 外部工具集成 MCPMCP用途supercharged-figma-mcp读取/编辑 Figma 图层设计稿转组件代码批量导出资源需 Figma Tokengit-mcpAI 直接读 Git 历史、Diff、PR 评审、Commit 生成file-system-mcp安全本地文件读写项目文件批量处理设计和开发协作链路里supercharged-figma-mcp能缩短「设计稿 → 代码」的往返——但 Token 配置别提交到 Git。09 前端工程师常用组合推荐不是装越多越好。下面四套是经过社区验证的「最小有效组合」组合 1日常写页面必装三件套frontend-design vercel-react-best-practices context7-mcp解决AI 页面丑、写过时 API、React 写法不规范。组合 2排查 Bug / 线上复现chrome-devtools-mcp frontend-performance-audit组合 3接手老项目 / 大型迭代grill-me handoff project-map组合 4Vue 技术栈frontend-design vue3-composition-best-practice context7-mcp建议先选一套组合跑一周真实项目再按需加 Skill。上下文窗口就那么大装多了 Agent 反而不知道听谁的。写在最后2026 年前端圈有个微妙变化开发者不只是在装 Skill还在装 MCP、装「品味」、装「拷问能力」。Function Calling 是螺丝刀Skill 是工具箱MCP 是标准插座——三者配合Agent 才能从「能跑」变成「能交付」。Skills 不是银弹。Plan Mode 该用还得用架构约束该写 AGENTS.md 还得写。