vue-development-guides

Best practices and architectural patterns for Vue 3 and Nuxt 3 projects.

hyf0/vue-skills|Updated Apr 8, 2026

Works with

Claude CodeCursorClineWindsurfCodexGoose

What it does

Emphasizes core principles: predictable state with single source of truth, explicit data flow (props down, events up), and small focused components
Requires Composition API with <script setup lang=\"ts\"> as the default, and mandates following detailed guides for reactivity, SFC structure, and component organization
Provides a checklist-driven approach covering component splitting, composable extraction, an

Repository

hyf0/vue-skills

Last updated

Apr 8, 2026

Installation Guide

Select your AI agent

How to use vue-development-guides on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add vue-development-guides

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/hyf0/vue-skills --skill vue-development-guides

Fetches vue-development-guides from hyf0/vue-skills and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/vue-development-guides

Restart Cursor to activate vue-development-guides. Access via /vue-development-guides in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

Documentation

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

Tasks Checklist

Followed the core principles

Followed the defaults unless there is a good reason not to

Followed the reactivity best practices

Followed the component best practices

Followed the Vue SFC best practices
Kept components focused
- Split large components into smaller ones when needed
- Moved state/side effects into composables if applicable
Followed data flow best practices

Core Principles

Keep state predictable: one source of truth, derive everything else.

Make data flow explicit: Props down, Events up for most cases.

Favor small, focused components: easier to test, reuse, and maintain.

Avoid unnecessary re-renders: use computed properties and watchers wisely.

Readability counts: write clear, self-documenting code.

Components

IMPORTANT: You MUST follow the references/sfc-guide.md for best practices when working with Vue SFCs.

Prefer Vue Single-File Components (SFC) using <script setup lang="ts"> (TypeScript) by default.

In Vue SFCs, keep sections in this order: <script> → <template> → <style>.

Keep components focused

Split a component when it has more than one clear responsibility (e.g. data orchestration + UI, or multiple independent UI sections).

Prefer smaller components + composables over one “mega component”

Move UI sections into child components (props in, events out).

Move state/side effects into composables (useXxx()).

NOTE: This rule also applies to the entry component (e.g. App.vue) in a Vue / Nuxt project by default.

Data Flow

IMPORTANT: You MUST follow the references/data-flow-guide.md for passing and receiving data between components using:

Props

Emits

v-model

provide/inject

For sharing data across the app, please follow the references/state-management-guide.md and consider using a Store for state management solution.

vue-development-guides

What it does

Category

Repository

Last updated

Installation Guide

How to use vue-development-guides on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

Documentation

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

Vue.js Development Guides

Tasks Checklist

Core Principles

Defaults (unless the user says otherwise)

Reactivity

Components

Keep components focused

Data Flow

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

frontend-design

premium-frontend-ui

ui-animation

high-end-visual-design

antigravity-design-expert

interior-design-expert

Reviews

Discussion