Agent skill

Vue Best Practices

by vinayakkulkarni in vinayakkulkarni/nxui

Vue.js performance optimization guidelines for building fast, maintainable applications.

MITAuto-check passedDevelopment

Install Vue Best Practices

skills CLI
$ npx skills add vinayakkulkarni/nxui --skill vue-best-practices -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install vinayakkulkarni/nxui vue-best-practices --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/vinayakkulkarni/nxui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vue-best-practices .claude/skills/vue-best-practices && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vue-best-practices
GitHub stars
213
Token cost
~871 tokens
SKILL.md length
299 words
Files
26 (incl. scripts)
Skills in repo
6
Repo updated
First seen
Licence
MIT

At a glance

Vue.js performance optimization guidelines for building fast, maintainable applications.

  • Works in 5 steps: Reactivity Fundamentals (CRITICAL) → Component Performance (CRITICAL) → Computed & Watchers (HIGH) → …
  • Tasks involving Vue components
  • SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use, plus 1 more section
  • Composition API

What it does

Vue Best Practices is an agent skill from vinayakkulkarni/nxui. Vue.js performance optimization guidelines for building fast, maintainable applications. This skill should be used when writing, reviewing, or refactoring Vue.js code to ensure optimal performance patterns. Triggers on tasks involving Vue components, reactivity, Composition API, state management, or performance improvements.

Its SKILL.md is about 870 tokens, which your agent loads only when the skill is triggered. The skill folder holds 26 other files, including scripts (for example `AGENTS.md`, `package.json` and `rules/_sections.md`).

It sits in Development, covering State management, Refactoring and Performance optimization. It works with Vue.js. The repository describes itself as: Beautiful animated components for Vue. Built with Tailwind CSS and motion-v. The licence is MIT.

When your agent uses it

  • Tasks involving Vue components
  • Composition API
  • State management
  • Performance improvements

Example prompts

  • “/vue-best-practices”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Reactivity Fundamentals (CRITICAL)
  2. Component Performance (CRITICAL)
  3. Computed & Watchers (HIGH)
  4. Template Optimization (MEDIUM-HIGH)
  5. Composition API Patterns (MEDIUM)

What it can do on your machine

Read from SKILL.md and the folder at commit 46001b5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/, which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Vue Best Practices loads about 871 tokens when it runs. Until then it costs about 86 tokens; SKILL.md has 299 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~86
When it runs · the whole SKILL.md, loaded when a task matches
~871

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from vinayakkulkarni/nxui at commit 46001b5, republished under its MIT licence (© vinayakkulkarni). 299 words, ~871 tokens.

Download SKILL.mdSave it as .claude/skills/vue-best-practices/SKILL.md (or your agent's skills folder). This skill also uses 25 other files; get the full folder from GitHub.
name
vue-best-practices
description
Vue.js performance optimization guidelines for building fast, maintainable applications. This skill should be used when writing, reviewing, or refactoring Vue.js code to ensure optimal performance patterns. Triggers on tasks involving Vue components, reactivity, Composition API, state management, or performance improvements.
license
MIT
metadata.author
vinayakkulkarni
metadata.version
1.0.0

Vue Best Practices

Comprehensive performance optimization guide for Vue.js applications (verified against the official Vue 3.5+ docs). Contains 18 rules across 5 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

  • Writing new Vue components
  • Implementing reactive state and computed properties
  • Reviewing code for performance issues
  • Refactoring existing Vue code
  • Optimizing rendering and re-renders
  • Working with Composition API or Options API

Rule Categories by Priority

PriorityCategoryImpactPrefix
1Reactivity FundamentalsCRITICALreactivity-
2Component PerformanceCRITICALcomponent-
3Computed & WatchersHIGHcomputed- / watch-
4Template OptimizationMEDIUM-HIGHtemplate-
5Composition API PatternsMEDIUMcomposable-

Quick Reference

1. Reactivity Fundamentals (CRITICAL)
  • reactivity-ref-vs-reactive - Prefer ref() as the primary reactivity API
  • reactivity-avoid-destructure - Don't destructure reactive objects
  • reactivity-toRefs - Use toRefs()/getters when destructuring is needed
  • reactivity-shallowRef - Use shallowRef() for large non-reactive data
  • reactivity-raw-values - Treat toRaw() as a narrow escape hatch
2. Component Performance (CRITICAL)
  • component-async - Use defineAsyncComponent for heavy components
  • component-keep-alive - Cache component state with KeepAlive
  • component-v-memo - v-memo micro-optimization for 1000+ item lists
  • component-v-once - Use v-once for static content
  • component-functional - Keep stateless components simple
3. Computed & Watchers (HIGH)
  • computed-cache - Use computed() for derived values, not methods
  • computed-dependencies - Understand fine-grained per-property dependency tracking
  • watch-deep-avoid - Avoid deep watchers on large objects
4. Template Optimization (MEDIUM-HIGH)
  • template-v-show-vs-if - v-show for frequent toggles, v-if for rare
  • template-key-attribute - Always use unique primitive keys in v-for
  • template-avoid-v-if-v-for - Never use v-if and v-for on same element
5. Composition API Patterns (MEDIUM)
  • composable-single-responsibility - One concern per composable
  • composable-return-refs - Return refs, not reactive objects

How to Use

Read individual rule files for detailed explanations and code examples:

rules/reactivity-ref-vs-reactive.md
rules/component-v-memo.md
rules/_sections.md

Each rule file contains:

  • Brief explanation of why it matters
  • Incorrect code example with explanation
  • Correct code example with explanation
  • Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

© vinayakkulkarni, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 25 other files (scripts) in .agents/skills/vue-best-practices of vinayakkulkarni/nxui.

  • SKILL.md
  • AGENTS.md
  • package.json
  • rules/_sections.md
  • rules/_template.md
  • rules/component-async.md
  • rules/component-functional.md
  • rules/component-keep-alive.md
  • rules/component-v-memo.md
  • rules/component-v-once.md
  • rules/composable-return-refs.md
  • rules/composable-single-responsibility.md
  • rules/computed-cache.md
  • rules/computed-dependencies.md
  • rules/reactivity-avoid-destructure.md
  • rules/reactivity-raw-values.md
  • rules/reactivity-ref-vs-reactive.md
  • rules/reactivity-shallowRef.md
  • rules/reactivity-toRefs.md
  • rules/template-avoid-v-if-v-for.md
  • … and 6 more

Open the folder on GitHubat commit 46001b5

Compare with similar skills

Vue Best Practices next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Vue Best Practices compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Vue Best Practices this skillvinayakkulkarni/nxui213—~871Automated safety check: PassMIT
Vue PiniaMindrally/skills271—~2.4kAutomated safety check: PassApache-2.0
Nuqstrycompai/crm11k1 repos~1.7kAutomated safety check: PassMIT
Svelte5 Best PracticesSikandarJODD/cnblocks4311 repos~810Automated safety check: PassMIT
React Best Practicesshapeshift/web2061 repos~2kAutomated safety check: PassMIT
Vue Best Practicesoyjt/uniapp-vue3-template6273 repos~667Automated safety check: PassMIT

Similar skills

  • Vue Pinia

    Mindrally/skills

    Vue 3 state management with Pinia using the Composition API, covering setup stores, SSR/Nuxt integration, persistence, and testing.

    271 GitHub stars~2.4k tokensUpdated 2 days ago
    DevelopmentAuto-check passed
  • Nuqs

    trycompai/crm

    nuqs (type-safe URL query state) best practices for Next.js and other React frameworks.

    11k GitHub starsUsed in 1 repo~1.7k tokens
    DevelopmentAuto-check passed
  • Svelte5 Best Practices

    SikandarJODD/cnblocks

    Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development.

    431 GitHub starsUsed in 1 repo~810 tokens
    DevelopmentAuto-check passed
  • React Best Practices

    shapeshift/web

    Comprehensive React and Next.js performance optimization guide with 40+ rules for eliminating waterfalls, optimizing bundles, and improving rendering.

    206 GitHub starsUsed in 1 repo~2k tokens
    DevelopmentAuto-check passed
  • Vue Best Practices

    oyjt/uniapp-vue3-template

    Vue 3 and Vue.js best practices for TypeScript, vue-tsc, and Volar.

    627 GitHub starsUsed in 3 repos~667 tokens
    DevelopmentAuto-check passed
  • Enforce AIRI's TypeScript and Vue source rules for imports, naming, comments, JSDoc, fallbacks, stateful and protocol code, and module design.

    50k GitHub stars~3.4k tokensUpdated today
    DevelopmentAuto-check passed

More from vinayakkulkarni/nxui

  • Nuxt Best Practices

    vinayakkulkarni/nxui

    Nuxt 4 performance optimization and architecture guidelines (current through Nuxt 4.5) for building fast, maintainable full-stack applications.

    212 GitHub stars~1.5k tokensUpdated 2 days ago
    Auto-check passed
  • Nuxt Geo Best Practices

    vinayakkulkarni/nxui

    Nuxt GEO (Generative Engine Optimization) guidelines for getting cited by ChatGPT, Perplexity, Claude, Google AI Overviews, and Gemini.

    212 GitHub stars~1.9k tokensUpdated 2 days ago
    Auto-check passed
  • Nuxt SEO Best Practices

    vinayakkulkarni/nxui

    Nuxt SEO optimization guidelines for Cloudflare-deployed applications.

    212 GitHub stars~819 tokensUpdated 2 days ago
    Auto-check passed
  • Nuxt agent-readiness guidelines for making a site operable by autonomous AI agents — not just cited by them.

    212 GitHub stars~2.4k tokensUpdated 2 days ago
    Auto-check passed
  • Nxui Design

    vinayakkulkarni/nxui

    Project-level design skill for nxui (nxui.geoql.in). An agent skill from vinayakkulkarni/nxui.

    212 GitHub stars~2.8k tokensUpdated 2 days ago
    Auto-check passed

Works with

Categories

Questions about Vue Best Practices

What does Vue Best Practices do?

Vue.js performance optimization guidelines for building fast, maintainable applications. Vue Best Practices is an agent skill from vinayakkulkarni/nxui.js performance optimization guidelines for building fast, maintainable applications.

When should I use Vue Best Practices?

Vue Best Practices fits situations like: tasks involving Vue components; composition API; state management; performance improvements.

How do I install Vue Best Practices in Claude Code?

Run `npx skills add vinayakkulkarni/nxui --skill vue-best-practices -a claude-code`. Or copy the skill folder (.agents/skills/vue-best-practices in vinayakkulkarni/nxui) into .claude/skills/vue-best-practices in your project. Claude Code loads it when a task matches its description.

How do I install Vue Best Practices in Codex?

Run `npx skills add vinayakkulkarni/nxui --skill vue-best-practices -a codex`. Or copy the skill folder (.agents/skills/vue-best-practices in vinayakkulkarni/nxui) into .agents/skills/vue-best-practices in your project. Codex loads it when a task matches its description.

Can I use Vue Best Practices in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vinayakkulkarni/nxui --skill vue-best-practices -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vue-best-practices, .gemini/skills/vue-best-practices, .github/skills/vue-best-practices and .opencode/skills/vue-best-practices in your project.

What does Vue Best Practices need to run?

SKILL.md names no scripts, command-line tools or credentials: Vue Best Practices is instructions for the agent only.

Does Vue Best Practices access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Vue Best Practices safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Vue Best Practices use?

Vue Best Practices is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vue Best Practices use?

About 871 tokens (SKILL.md is roughly 3.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Vue Best Practices?

Skills that share tags, products or a category with Vue Best Practices: Vue Pinia (Mindrally/skills, 271 stars), Nuqs (trycompai/crm, 11k stars), Svelte5 Best Practices (SikandarJODD/cnblocks, 431 stars) and React Best Practices (shapeshift/web, 206 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vue Best Practices?

vinayakkulkarni (a GitHub user) maintains it in vinayakkulkarni/nxui, which has 213 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 9, 2026.

Source: vinayakkulkarni/nxui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.