Vue Best Practices Skill

[English](README.md) | [中文](README.zh-CN.md)

# Vue Best Practices Skill

> Vue 3 and Nuxt performance optimization guidelines for AI agents and developers.

This skill provides comprehensive best practices for Vue 3 and Nuxt applications, following the same format as [Vercel's React Best Practices Skill](https://github.com/vercel-labs/agent-skills/tree/react-best-practices/skills/react-best-practices).

## Overview

Contains **40+ rules** across **8 categories**, prioritized by impact to guide automated refactoring and code generation.

| Priority | Category                 | Impact      |
| -------- | ------------------------ | ----------- |
| 1        | Eliminating Waterfalls   | CRITICAL    |
| 2        | Bundle Size Optimization | CRITICAL    |
| 3        | Server-Side Performance  | HIGH        |
| 4        | Reactivity Optimization  | MEDIUM-HIGH |
| 5        | Re-render Optimization   | MEDIUM      |
| 6        | Rendering Performance    | MEDIUM      |
| 7        | JavaScript Performance   | LOW-MEDIUM  |
| 8        | Advanced Patterns        | LOW         |

## Installation

This skill does not require a specific installation command. You can instruct the AI model to install and use it via a prompt:

```text
Please install the Vue 3 Best Practices skill by reading: https://github.com/FrontToEnd/agent-skills/blob/main/skills/vue-best-practices/SKILL.md
```

## When to Apply

Reference these guidelines when:

- Writing new Vue 3 components or Nuxt pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing Vue/Nuxt code
- Optimizing bundle size or load times

## Quick Start

1. Read the main skill file: [`skills/vue-best-practices/SKILL.md`](skills/vue-best-practices/SKILL.md)
2. For detailed patterns: [`references/vue-performance-guidelines.md`](skills/vue-best-practices/references/vue-performance-guidelines.md)
3. Search for specific patterns:
   ```bash
   grep -l "suspense" skills/vue-best-practices/references/rules/
   grep -l "shallowRef" skills/vue-best-practices/references/rules/
   ```

## Structure

```
skills/vue-best-practices/
├── SKILL.md                              # Main entry point
└── references/
    ├── vue-performance-guidelines.md     # Complete guide (40+ rules)
    └── rules/                            # Individual rule files
        ├── async-*.md                    # Waterfall elimination
        ├── bundle-*.md                   # Bundle optimization
        ├── server-*.md                   # SSR patterns
        ├── reactivity-*.md               # Vue reactivity
        ├── rerender-*.md                 # Re-render optimization
        ├── rendering-*.md                # DOM rendering
        ├── js-*.md                       # JavaScript performance
        └── advanced-*.md                 # Advanced patterns
```

## Sources

All content is based on official Vue 3 documentation:

- [Vue 3 Performance Guide](https://vuejs.org/guide/best-practices/performance.html)
- [Vue 3 Style Guide](https://vuejs.org/style-guide/)
- [Vue 3 SSR Guide](https://vuejs.org/guide/scaling-up/ssr.html)
- [Vue 3 Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)
- [Vue 3 Composables](https://vuejs.org/guide/reusability/composables.html)
- [Nuxt 3 Documentation](https://nuxt.com/)
- [Pinia Documentation](https://pinia.vuejs.org/)

## Contributing

Contributions are welcome! Please ensure all patterns are sourced from official documentation.

## License

MIT License - See [LICENSE](LICENSE) for details.