企业官网建设流程全解析

摄影手机网站模板,传媒公司营业执照,深圳福田区怎么样,wordpress推广自己淘宝店近来#xff0c;AI 领域有个火爆的话题#xff1a;Skills。Github 上被疯狂 star 的仓库#xff0c;很多都是和 skills 有关的。有的仓库仅仅上线三个月就获得了快 50K 的 star#xff0c;Skills 的火热可见一斑。不管是大模型#xff0c;还是 Cursor、Codex、Claude、Tra…近来AI 领域有个火爆的话题Skills。Github 上被疯狂 star 的仓库很多都是和 skills 有关的。有的仓库仅仅上线三个月就获得了快50K的 starSkills 的火热可见一斑。不管是大模型还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在争先支持 Skills。围绕 Skills它们在做的就是为了完成一件事情技能是通过学习和反复练习获得的而 Skills 是把经验和最佳实践沉淀为 AI 能力将“知道”转化为“做到”的本领。详解什么是 Skills要说清楚什么是 Skills先来了解一下关于 AI 的 2 个核心概念--Agent和MCP。关于 Agent让 Agent 开发一个在线商城平台要完成购物功能它只需要考虑用户输入的“我要购买一个商品”指令并最终完成购买商品这个目标它并不关心项目是否前后端分离前端用 vue 还是 react 来实现后端用 java 还是 php选什么数据库也就是说Agent 不在乎细节。Agent 是面向目标的。关于 MCP我们在开发项目的过程中一个项目不可能所有的功能都自己实现往往需要一些第三方的服务比如短信通知微信、支付宝支付。而使用这些服务的方式就是通过调用第三方平台的 API每个平台的都有自己的 API 规则。而 MCP 就是 AI 的 APIAgent 通过 MCP 来实现调用第三方服务和第三方服务进行通信。回到 Skills讲清楚了 Agent 和 MCP 的概念后我们知道AI 在使用 MCP 或者完成一些目标任务时会产生很多的重复性的工作我们可以把这些重复性的工作整合成一个工具包只需要让 AI 调用这个工具包就行而这个工具包就是Skills。这个工具包可以是前端的组件开发文件下载后端 SQL 查询接口文档生成。所有人都可以使用这些工具包来完成自己工作。★简单来说Skills 通过固定的规则和标准化的能力来保证结果的稳定和一致。下面从我们前端的角度出发来看看 Skills开发一个增删改查的功能你要创建 API 文件状态管理、路由生成增删改查的页面开发。想要按照项目或者公司的前端开发规范来完成这些任务用 AI 来实现的话仅凭一句提示词帮我写一个文件管理功能它可以做出来但最终结果不是你想要的。现在你可以使用增删改查 Skill来完成这项任务完全按照你设定的规范来执行设置帮你把接口联调好再多的增删改查都能一个 Skill 搞定。这就是 Skill 的便利性让你从重复劳动中解放。Skills 的应用场景Skills 是经验、规则、最佳实践的积累它把你“封装组件”、“封装函数”的能力都学会了。在使用 Skills 时我们要明确 2 个问题这件事情是否是重复的这件事情是否能够标准化当你得到肯定答案的时候就可以考虑使用 Skills 来简化工作。Skills 最适合的应用场景频繁重复性工作比如增删改查。标准化的输出基于UI规范输出标准化的组件或功能页面。知识沉淀项目或者公司的开发规范前端的样式规范色彩和字体的使用规范等。skills.sh目前社区已经涌现出了很多官方和个人分享的 Skills。skills.sh是 Vercel 发布的一个可视化的 AI Skills 平台可以说它是AI Skills 界的 NPM。它汇总了所有的公开 Skills在上面可以看到 Skills 的信息下载安装量其中包括了前端、后端、DevOps、安全等 Skills能快速检索出你想要的 Skills。前端 Skillsagent-skillsvercel 推出的 skills 项目是 React 和 Next.js 的 Skills 集合。包含 8 个类别共 45 条规则旨在指导自动化重构和代码生成。目前 agent-skills 里面包括三个主要的技能集合react-best-practices专门用于 react 和 nextjs基于 Vercel 工程团队的 React/Next.js 性能优化指南含 40 分级规则适用场景新组件 / 页面开发数据请求实现代码性能评审、包体积加载速度优化核心规则消除请求瀑布核心包体积优化核心服务端性能客户端数据请求重渲染优化...都是非常实用的。web-design-guidelines对 UI 代码进行多维度合规性审计含 100 规则适用场景UI 评审可访问性检查设计审计站点最佳实践校验核心规则无障碍适配焦点状态表单设计动画性能排版规范图片优化暗黑模式适配...解决 AI 开发中的各种 UI 问题。vercel-deploy-claimable实现应用一键部署到 Vercel 平台支持所有权转移适用场景应用部署生产环境发布获取线上预览链接核心规则自动识别 40 前端框架生成预览 URL 和所有权认领 URL自动过滤无用文件node_modules/.gitvue-skillsvue-skills是 voidzero 团队成员发起的项目★专门为 AI 创建 Vue 技能以增强 AI 在 Vue 3 开发中的能力。也就是教 AI 怎么写 Vue3。vue-skills 中包含 3 个主要的技能集合vue-best-practices核心规则vue3 最佳实践Composition API 最佳实践vue-router 类型处理vue3 代码可维护性vueuse-best-practices核心规则VueUse 组合式 API 的最佳实践VueUse 常见问题规范pinia-best-practices核心规则Vue3 应用中 Pinia的 TypeScript 配置Pinia 的最佳实践Pinia 常见问题规范如何快速上手 Skills这些 Skills 包是实打实的能在你的项目中发挥作用的下面来看看如何快速使用。安装在项目中执行以下命令csharp体验AI代码助手代码解读复制代码npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices安装过程中会让你确认 选择支持的 AI 工具。目前支持的工具包括AntigravityCodexCursorGemini CLITrae启用的范围:项目全局安装完成后会自动根据你的提示词来启用 Skills无需手动操作。开始编码接下来你就可以正常进行你的任务了比如让 AI 帮你开发组件它会自动调用 Skills 来完成任务。★帮我开发一个 segment 组件要符合 vue3 的最佳实践。企业/个人 Skills 开发Skills 这么好用我们也想自己开发一个 Skills 来提高我们的工作效率。一个标准的 Skills 文件结构perl体验AI代码助手代码解读复制代码my-Skill/ ├── Skill.md # 必需核心指令 ├── rules/ # 可选规则设置 │ └── crud.md ├── examples/ # 可选输入/输出示例 │ ├── input.md │ └── output.md ├── templates/ # 可选可复用的模板 │ └── component.tsx ├── LICENSE.txt # 可选开源协议 └── resources/ # 可选参考文件、运行脚本或素材 └── style-guide.md你可以自由的去设计自己的 Skills一个CRUD的 Skill 或者是项目的UISkill。★自定义 Skill 的一个小技巧是先让 Skill 能正常运行再一步步去优化。新的起点vercel 率先祭出了 skills.sh 这个平台更多类 NPM 的 Skills 平台将会如雨后春笋一般出现AI 也要有自己的 Skills NPM 平台这势必又是一场话语权的争夺。而更多的、更高质量的 Skills 将会出现3D、2D 模型 skillsnode skillsios skillsui skills企业 skills个人 skills...目前 AI 开发已经不再局限于大模型的能力高质量的代码取决于你给 AI 赋予了什么技能。AI Skills 的开发方式已经不可避免的成为未来前端开发的新方向。原文https://juejin.cn/post/7598807837868539930