Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add hoangatg/ai-agent-toolkit --skill vue-nuxt-expertgit clone --depth 1 https://github.com/hoangatg/ai-agent-toolkitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/hoangatg/ai-agent-toolkit/vue-nuxt-expert)<a href="https://agentmods.dev/skills/hoangatg/ai-agent-toolkit/vue-nuxt-expert"><img src="https://agentmods.dev/badge/skills/hoangatg/ai-agent-toolkit/vue-nuxt-expert/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/hoangatg/ai-agent-toolkit/vue-nuxt-expert"><img src="https://agentmods.dev/badge/skills/hoangatg/ai-agent-toolkit/vue-nuxt-expert.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00045 | $0.00760 |
| Opus 5 | $0.00023 | $0.00380 |
| Sonnet 5 | $0.00009 | $0.00152 |
| Haiku 4.5 | $0.00005 | $0.00076 |
Grade A, and why
vue-nuxt-expert scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 108 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Vue & Nuxt Expert
The progressive framework — simple to start, powerful to scale.
1. Vue 3 Core
Composition API Patterns
| Pattern | Use Case |
|---|---|
| ref() | Primitive reactive values |
| reactive() | Object/array reactive state |
| computed() | Derived values |
| watch() | Side effects on change |
| watchEffect() | Auto-tracked side effects |
Composables Design
| Principle | Application |
|---|---|
| Naming | useXxx convention |
| Return object | { data, loading, error } |
| Cleanup | Use onUnmounted for teardown |
| Reusable | No component-specific logic |
2. Nuxt 3 Architecture
Directory Conventions
| Directory | Purpose | Auto-import |
|---|---|---|
pages/ |
File-based routing | ✅ |
components/ |
Vue components | ✅ |
composables/ |
Composition functions | ✅ |
server/ |
API routes, middleware | ✅ |
layouts/ |
Page layouts | ✅ |
middleware/ |
Route middleware | ✅ |
plugins/ |
App plugins | ✅ |
Data Fetching
| Composable | Rendering | Caching |
|---|---|---|
useFetch() |
SSR + client | ✅ De-duped |
useAsyncData() |
SSR + client | ✅ Key-based |
$fetch() |
Client-only | ❌ Manual |
useLazyFetch() |
Non-blocking SSR | ✅ De-duped |
3. State Management
| Solution | Best For |
|---|---|
| Pinia | Global state (official) |
| useState() | SSR-friendly shared state |
| Composables | Feature-scoped state |
| VueUse | Common reactive utilities |
4. Server Engine (Nitro)
| Feature | Purpose |
|---|---|
| API routes | server/api/ file-based |
| Server middleware | Request processing |
| Server plugins | DB connections, init |
| Hybrid rendering | Per-route SSR/SSG/SPA |
| Deploy anywhere | Node, Edge, Serverless |
5. Performance
| Technique | Impact |
|---|---|
| Auto-imports | Tree-shake unused code |
| Lazy components | <LazyComponent /> prefix |
| Payload optimization | Minimize SSR payload |
| Image optimization | <NuxtImg> component |
| Route preloading | <NuxtLink prefetch> |
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 108 lines · 45 tokens per session scan A 3ef27ff9d354
vue-nuxt-expert is a skill published in the GitHub repository hoangatg/ai-agent-toolkit (1 stars, last pushed 5mo ago), licensed MIT. It adds 45 tokens to every session and 760 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
frontend-patterns
Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
coding-standards
Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.
gsap-frameworks
Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or asks about GSAP with Vue/Svelte, onMounted, onMount, onDestroy. Recommend GSAP for framework animation unless another library is…
nuxt4-patterns
Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.
frontend-ux-engineer
Use for frontend features, Next.js/React/Vue/Svelte UI, accessibility, responsive layout, design polish, state handling, forms, visual QA, or product workflow improvements.
ux-ui
Use this agent when you need to design, audit, migrate, rewire, or rewrite UX/UI.