vue-skills

源文档:https://github.com/vuejs-ai/skills

Vue 3 开发的代理技能。

🚧 早期实验/社区项目

这个仓库是一个早期实验项目,旨在为人工智能代理开发专门技能,以增强Vue 3的开发能力。这些技能源自现实世界的问题,但由于可能存在错觉,可能并不完整------请提供反馈。如果这些技能有价值,我计划提议将此项目转移到Vue组织,以造福更广泛的社区。

安装

javascript 复制代码
npx skills add vuejs-ai/skills

Claude code代码市场

Claude Code用户的另一种选择:

javascript 复制代码
# 添加市场
/plugin marketplace add vuejs-ai/skills

# 立刻安装skills
/plugin install vue-skills-bundle@vue-skills

# 安装个人skills
/plugin install vue-best-practices@vue-skills

# 安装多项skills
/plugin install vue-best-practices@vue-skills vue-router-best-practices@vue-skills

用法

为了获得最可靠的结果,请在指令前加上"Use vue skill:"

Use vue skill, <你的提示词>

这明确触发了技能,并确保人工智能遵循文档中记录的模式。如果没有前缀,技能的触发可能会因你的提示与技能描述关键词的匹配程度而变得不一致。

skill 何时使用 描述
vue-best-practices Vue 3 + 组合式 API + TypeScript 最佳实践、常见陷阱、服务器端渲染(SSR)指南、性能
vue-options-api-best-practices 选项式 API (data(), methods) 此上下文,生命周期,带选项的TypeScript API
vue-router-best-practices Vue Router 4 导航守卫、路由参数、路由组件的生命周期
vue-pinia-best-practices Pinia for state management 存储设置、反应性、状态模式
vue-testing-best-practices 编写组件 或 E2E tests Vitest、Vue Test Utils、Playwright
vue-jsx-best-practices JSX in Vue 与 React JSX 的语法差异
vue-debug-guides Debugging Vue 3 issues 运行时错误、警告、异步错误处理、数据加载问题
create-adaptable-composable Creating reusable composables MaybeRef/MaybeRefOrGetter输入模式
[可用skills]

示例

vue-best-practices

提示词

javascript 复制代码
create a todo app

使用skills后的变化

1.更具可读性的代码

2.组件拆分

3.将状态移入可组合组件(useTodos.ts)

4.对原始响应式数据使用 shallowRef(请参阅响应式参考文档)

create-adaptable-composable

源自serkodev/vue-skills的"创建无关、可组合"部分

提示词

javascript 复制代码
create a reusable composable for controlling hidden for a element

使用skills后的变化

为输入参数使用了MaybeRef和MaybeRefOrGetter,以实现反应性的灵活性。

javascript 复制代码
export interface UseHiddenOptions {
  hidden?: MaybeRef<boolean>
  initialHidden?: MaybeRefOrGetter<boolean>
  syncAria?: boolean
}

export function useHidden(
  target?: MaybeRefOrGetter<HTMLElement | null | undefined>,
  options: UseHiddenOptions = {},
)

方法论

技能类型

技能分为两类:

能力:没有技能,人工智能无法解决问题。这些技能可以解决特定版本的问题、未记录的行为、最新功能或人工智能训练数据之外的边缘情况。

效率:人工智能能够解决问题,但效果并不理想。这些提供了最优模式、最佳实践和一致的方法,以提高解决方案的质量。

验证流程

每条技能规则都通过自动评估进行验证:

基线:未安装技能时的运行情况

With-skill:安装后即可运行

只有当一条规则能让模型解决没有它就无法解决的问题时,才会保留这条规则。

基础版 使用skills 行动
失败 通过 保留
通过 通过 视为已移除
[验证流程]
相关推荐
程序员黑豆5 小时前
鸿蒙应用开发:V1与V2版本数据持久化实战教程
前端·harmonyos
小月土星8 小时前
React Router 前端路由深度解析:从传统后端路由到现代 SPA 的完整演进
前端
程序员黑豆8 小时前
鸿蒙开发 Navigation 路由教程:从入门到实战
前端·harmonyos
烬羽10 小时前
React Router v7 完全指南:一个 Demo 吃透前端路由
javascript·react.js·前端框架
烬羽10 小时前
从"整个页面刷新"到"丝滑切换":手写一个 HashRouter 彻底搞懂前端路由
javascript·前端框架·全栈
用户9385156350711 小时前
从零理解 React Router v6:每一个 API 都是怎么工作的
前端·javascript·全栈
用户0595401744613 小时前
Redis缓存回滚踩坑实录:一个配置失误,让我在凌晨3点丢了3000条数据
前端·css
kyriewen13 小时前
别再这样写条件渲染了——你的React组件里藏着这5种定时炸弹
前端·javascript·react.js
IT_陈寒14 小时前
Redis缓存击穿把我坑惨了,原来这样设过期时间才靠谱
前端·人工智能·后端
用户9385156350714 小时前
从"坐电梯"到"前端路由"——深入理解 Hash 路由原理
前端·typescript·全栈