‏اسکیل‌های VueUse برای ایجنت‌های کدنویس

تیم VueUse یه پروژه آزمایشی به اسم VueUse Skills منتشر کرده: یه بسته Agent Skill (یعنی فایل‌های راهنمایی که ایجنت کدنویس موقع کار می‌خونه) برای خود VueUse، همون مجموعه معروف کامپوزبل‌های ویو. هدفی که تو توضیحات پروژه اومده ساده‌ست: ایجنت‌ها این کتابخونه رو دقیق‌تر و با توکن کمتر به کار ببرن.

مشکلی که می‌خواد حل کنه آشناست. ایجنت وقتی اسم دقیق یه کامپوزبل یا امضای آرگومان‌هاش رو نمی‌دونه، از خودش API درمیاره و کدی می‌نویسه که اصلاً وجود نداره. راه‌حل این پکیج progressive disclosure ـه: اول فقط یه فهرست کوتاه از فانکشن‌ها و کاری که می‌کنن به ایجنت می‌ده، و جزئیات کامل استفاده و type declarationها فقط وقتی لود می‌شن که ایجنت واقعاً سراغ اون فانکشن بره.

نکته دیگه‌ش offline-first بودنشه. همه‌چیز کنار پروژه‌ست، پس نه اینترنت می‌خواد نه مجوز اضافه به ایجنت می‌دی. قانون‌های فراخوانی فانکشن‌ها هم قابل بازنویسی‌ان؛ می‌تونی توی پرامپت یا فایل AGENTS.md سیاست دلخواه خودتو بذاری.

نصبش با یه دستوره: npx skills add vueuse/skills. کاربرهای Claude Code می‌تونن به‌جاش مارکت‌پلیس رو با /plugin marketplace add vueuse/skills اضافه کنن و بعد اسکیل‌ها رو تکی نصب کنن. بعدش کافیه VueUse توی پروژه ویو یا Nuxt نصب باشه و به ایجنت بگی چی می‌خوای.

مثالی که خودشون گذاشتن یه اپ todo ـه با ذخیره تو local storage، شمارش کارهای باقی‌مونده روی تایتل مرورگر، دکمه کپی و اسکرول بی‌نهایت. ایجنت به‌جای پیاده‌سازی دستی، مستقیم می‌ره سراغ کامپوزبل‌های آماده:

import { useClipboard, useColorMode, useInfiniteScroll, useLocalStorage, useTitle } from '@vueuse/core'

const todos = useLocalStorage<Todo[]>('focus-flow-todos', defaultTodos)
useTitle(computed(() => `Todos (${remainingCount.value})`))
const { copy, copied, isSupported } = useClipboard()

نکات کلیدی:

• بسته Agent Skill رسمی VueUse، فعلاً آزمایشیه و تیم دنبال بازخورده
• progressive disclosure: اول فهرست فانکشن‌ها، بعد جزئیات و type declaration فقط در صورت نیاز
• offline-first ـه؛ نه اینترنت می‌خواد نه مجوز اضافه برای ایجنت
• قانون‌های فراخوانی رو می‌شه تو پرامپت یا AGENTS.md بازنویسی کرد
• نصب با npx skills add vueuse/skills یا از مارکت‌پلیس Claude Code