[Proposal] Official "AI System Prompt" / Skills Standard for Vue ecosystem

[asdlem]

Description

I am proposing that the Vue team publishes an official "AI Skills" / System Prompt definition file (e.g., ai-best-practices.md or similar).

Context & Motivation

Recently, Vercel released an official repository agent-skills, which defines best practices for AI Agents (like ChatGPT, Claude, Cursor) when writing React/Next.js code.

Currently, when developers ask AI to write Vue code, the results are often inconsistent:

1. Legacy Mix: AI often mixes Vue 2 Options API with Vue 3 Composition API.
2. Outdated Syntax: It may not strictly use <script setup> or standard TypeScript patterns unless heavily prompted.
3. Lack of Standardization: Every developer has to write their own "System Prompt" to correct the AI.

The Proposal

I suggest adding a dedicated section or a raw Markdown file in the official documentation repo that serves as a "Single Source of Truth" for AI Context.

This file should explicitly state guidelines for LLMs, such as:

• "Always use Composition API with <script setup lang='ts'>."
• "Use ref over reactive by default (if that is the recommended stance)."
• "Prefer Pinia for state management."
• "Use standard naming conventions..."

Benefits

• Vendor Integration: Tools like Cursor, Copilot, or V0 can pull this official definition to ensure they generate idiomatic Vue code.
• Community: Developers can simply point their AI agents to this official URL to get the best results.
• Modernization: It forces the AI ecosystem to align with the latest Vue 3.x standards.

Reference (React example): Vercel React Best Practices Skill

[skirtles-code]

While I'm not very familiar with this myself, there is ongoing work on AI support at:

• https://github.com/vuejs-ai/skills

This is currently a community project, but Evan has suggested it may become official once it's ready:

... we want to wait until it’s a bit more mature and tested before declaring it as official.

(Quote source: https://discord.com/channels/325477692906536972/1469571233011208285)

For anyone interested in seeing this progress faster, I'm sure they'd appreciate some help testing it out!

[aniruddhaadak80]

@asdlem

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!