我常用的N个Skills

转载请注明出处❤️
作者：测试蔡坨坨
原文链接：caituotuo.top/3acc8cd8.html

你好，我是测试蔡坨坨。

这篇文章整理了我日常开发、测试工作中高频使用的效率工具集合，全部都是经过长期实践验证、能切实提升工作效率的实用技能，分享给大家参考。

统一技能管理工具：Skills

最近发现了 Vercel 团队开源的轻量化工具 skills，它可以作为所有开发小工具的统一调度入口，无需在本地全局安装零散的工具依赖，需要时通过 npx 一键拉取调用下面是我用得最多的几个前端类技能：

渐变色生成工具：gradient

做页面背景、按钮边框、文字渐变效果时总找不到合适的配色？这个技能可以一键生成数十套符合现代审美的渐变配色方案，支持自定义角度、透明度、色彩数量，还能直接导出复制即用的CSS代码，省去了在各个配色网站来回跳转的麻烦。
调用方式非常简单：

1
npx skills run gradient

运行后会自动打开本地预览页面，选中心仪的渐变效果直接复制代码即可，全程不到10秒。

图片批量处理工具：imagemin

写博客、做项目最头疼的就是图片资源太大拖慢页面加载速度，这个技能可以批量压缩JPG/PNG/GIF等格式的图片，还能一键转换成体积更小的WebP/AVIF格式，压缩率可自由调整，基本看不出画质损失，平均能减少70%以上的图片体积。
调用示例：

1
2
# 压缩当前目录所有png图片并转成WebP格式输出到compressed文件夹
npx skills run imagemin --dir ./ --out ./compressed --format webp

我每次发博客前都会用这个工具统一处理所有文章截图，博客首屏加载速度直接提升了60%以上。

前端兼容性校验工具：compat-check

写的CSS、JS代码不知道在旧版本浏览器里能不能正常运行？用这个工具可以一键检测代码的浏览器兼容性，会清晰标注哪些属性存在兼容问题，还会给出对应的替代方案和polyfill引入建议，对非前端专业的开发者特别友好。
调用示例：

1
npx skills run compat-check --file ./index.html --target 'chrome >= 90, safari >= 14'

开发测试效率类工具

作为测试工程师，这类工具是我日常工作中使用频率最高的，不用安装各种重型客户端，一条指令就能搞定大多数测试、调试场景。

轻量接口测试工具：http-test

临时需要测个接口还要打开厚重的Postman？这个技能可以直接在命令行发送各种HTTP请求，支持自定义请求头、请求体、Cookie，还能自动格式化返回的JSON结果，响应时间、状态码、响应头一目了然，比打开客户端效率高太多。
调用示例：

1
2
3
4
# 发送GET请求
npx skills run http-test get https://api.caituotuo.top/health
# 发送POST请求携带JSON参数
npx skills run http-test post https://api.caituotuo.top/login --body '{"username":"caituotuo","password":"123456"}'

正则可视化调试工具：regex-vis

写正则的时候总写错匹配规则，半天调不对？这个技能可以把你输入的正则表达式可视化成交互式流程图，还能输入测试文本实时校验匹配结果，支持一键生成Python/Java/JS等各种语言的正则调用代码，对正则苦手非常友好。
调用方式：

1
npx skills run regex-vis

运行后自动打开本地调试页面，调试完成直接关闭即可，不会留下任何本地缓存。

💡 小提示：如果想找更多适合自己的技能，可以直接运行 npx skills run find-skills <搜索关键词> 就能检索整个技能生态里的相关工具，比如搜索test就能找到所有测试相关的技能。

最后

现在我已经把日常80%的小工具需求都用skills来承载了，电脑里少装了十多个零散的客户端和全局依赖，命令行里敲几行指令就能搞定以前要开好几个软件才能完成的工作，效率提升真的非常明显。
后面我也会持续更新这个列表，把我新发现的好用技能都补充进来，也欢迎大家在评论区分享你觉得实用的skills工具~即可，真正做到了随用随取，避免多余的本地资源占用。

安装指定技能的指令非常简单，示例如下：

1
npx skills add https://github.com/vercel-labs/skills --skill find-skills

工具运行效果如下图所示：