Skills vue-best-practices
📦

vue-best-practices

v18.0.0 Content revision r2 Safe ⚙️ External commands⚡ Contains scripts🌐 Network access

Build Better Vue 3 Applications

Vue projects become difficult when reactivity, component boundaries, and data flow are inconsistent. This skill applies structured Vue 3 guidance throughout implementation and review.

Supports: Claude Codex Code(CC)
🥉 79 Bronze

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "vue-best-practices" from https://skillstore.io/skills/antfu-vue-best-practices.md and its manifest at https://skillstore.io/api/skills/antfu-vue-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/antfu-vue-best-practices.md Signed manifest GET /api/skills/antfu-vue-best-practices/manifest Signed lockfile GET /api/skills/antfu-vue-best-practices/lockfile

Test it

Using "vue-best-practices". Review a large product page component that handles filters, fetching, results, and status controls.

Expected outcome:

  • A component map separates orchestration, filters, results, and status controls.
  • A composable owns fetching, state, cancellation, and derived values.
  • Typed props and emits define each child component contract.

Using "vue-best-practices". Improve a slow Vue list containing thousands of interactive rows.

Expected outcome:

  • Profile rendering before changing the component structure.
  • Virtualize visible rows and retain stable item keys.
  • Use memoization only for subtrees with stable, measurable dependencies.

Using "vue-best-practices". Review state shared between components in an SSR application.

Expected outcome:

The review identifies unsafe module state, recommends request-scoped stores, and documents typed injection boundaries.

Security Audit

Safe
v6 • 7/23/2026 Open versioned report

All 102 static findings are false positives in documentation and inert Vue examples. Backticks are Markdown spans or JavaScript template literals, while key and reconnaissance matches are lexical collisions. Dynamic imports and relative API calls illustrate normal application patterns and are not executed by the skill.

25
Files scanned
4,593
Lines analyzed
0
Review items
0
False positives ignored

Risk Factors

⚙️ External commands (37)
references/animation-state-driven-technique.md:26-56 references/animation-state-driven-technique.md:71-108 references/animation-state-driven-technique.md:117-148 references/animation-state-driven-technique.md:158-200 references/component-keep-alive.md:100-103 references/perf-virtualize-large-lists.md:101-113 references/perf-virtualize-large-lists.md:113-114 references/perf-virtualize-large-lists.md:114-144 references/reactivity.md:249-259 references/reactivity.md:338-344 references/render-functions.md:30-32 references/sfc.md:47-66 SKILL.md:3 SKILL.md:23 SKILL.md:24 SKILL.md:25 SKILL.md:30 SKILL.md:31 SKILL.md:32 SKILL.md:33 SKILL.md:44 SKILL.md:48 SKILL.md:52 SKILL.md:53 SKILL.md:59 SKILL.md:60 SKILL.md:63 SKILL.md:71 SKILL.md:92 SKILL.md:94 SKILL.md:96 SKILL.md:100 SKILL.md:113 SKILL.md:114 SKILL.md:115 SKILL.md:117 SKILL.md:118
⚡ Contains scripts (5)
references/component-async.md:30 references/component-async.md:45 references/component-async.md:50 references/component-async.md:67 references/component-async.md:82
🌐 Network access (8)
references/plugins.md:124 references/plugins.md:133 references/plugins.md:145 references/reactivity.md:338 references/state-management.md:74 references/updated-hook-performance.md:33 references/updated-hook-performance.md:85 references/updated-hook-performance.md:109
No confirmed security findings were detected by the latest completed static and semantic audit. This does not prove the skill has no side effects.
Audited by: codex View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/antfu-vue-best-practices/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/antfu-vue-best-practices/security.svg)](https://skillstore.io/skills/antfu-vue-best-practices?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/antfu-vue-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/antfu-vue-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/antfu-vue-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA · BibTeX · CFF)

APA citation

antfu. (2026). vue-best-practices security audit report (audit version 6) [Author version 18.0.0]. Skillstore. https://skillstore.io/skills/antfu-vue-best-practices/audits/6

BibTeX citation

@techreport{antfu-antfu-vue-best-practices-2026, author = {antfu}, title = {vue-best-practices security audit report (audit version 6)}, institution = {Skillstore}, year = {2026}, number = {6}, url = {https://skillstore.io/skills/antfu-vue-best-practices/audits/6}, note = {Author version 18.0.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "vue-best-practices security audit report (audit version 6)" version: "18.0.0" type: report authors: - name: "antfu" date-released: "2026-07-23" url: "https://skillstore.io/skills/antfu-vue-best-practices/audits/6" identifiers: - type: other value: "skillstore:antfu-vue-best-practices:audit:6" description: "Skillstore immutable audit report identifier"

Compare variants

3 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Highest Skillstore Score
vuejs-ai Recommended

vuejs-ai-vue-best-practices

Skillstore Score 82
Evidence Confidence High
Skillstore usage 130
Updated

2026-08-21

hyf0

hyf0-vue-best-practices

Skillstore Score 81
Evidence Confidence High
Skillstore usage 38
Updated

2026-08-21

antfu Current

antfu-vue-best-practices

Skillstore Score 79
Evidence Confidence High
Skillstore usage 32
Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High
45
Architecture
100
Maintainability
87
Content
71
Community
91
Spec Compliance

What You Can Build

Modernize Vue Components

Refactor existing components into typed Composition API structures with clearer state and responsibilities.

Standardize Team Architecture

Establish consistent component boundaries, data flow, composables, and file organization across a Vue codebase.

Improve Rendering Performance

Review large lists, update hooks, memoization, and animation choices after application behavior is correct.

Try These Prompts

Review One Component 
Review this Vue component for Composition API structure, reactivity, template safety, and clear props and emits. Explain the most important changes.
Refactor a Feature 
Refactor this Vue feature into focused components and composables. Preserve behavior, define typed contracts, and explain each responsibility boundary.
Design Component Architecture 
Create a component map for this Vue requirement. Define responsibilities, state ownership, props, emits, composables, and optional framework features.
Audit Performance 
Audit this Vue workflow for rendering costs. Prioritize measured bottlenecks involving lists, updates, memoization, async components, and state-driven animations.

Best Practices

  • Confirm the existing Vue architecture and project conventions before changing code.
  • Keep source state minimal and derive values with pure computed properties.
  • Measure behavior and performance before applying optional optimizations.

Avoid

  • Do not place orchestration, state, and several independent interfaces in one large component.
  • Do not use watchers to maintain values that computed properties can derive.
  • Do not add advanced Vue features without a clear product or technical requirement.

Frequently Asked Questions

Does this skill support Vue 2?
It targets Vue 3. Vue 2 projects need framework-specific guidance and compatibility review.
Can it work with the Options API?
It prefers Composition API. It defers to explicit project requirements and recommends separate Options API guidance.
Does it generate complete Vue features?
It can guide implementation and review, but requirements, project context, tests, and verification remain necessary.
Does it cover state management?
Yes. It compares local composables, Pinia, and small global state patterns while warning about SSR singleton state.
Does it cover Vue performance?
Yes. It covers virtualization, memoization, component overhead, update hooks, and animation choices after behavior is correct.
Will it install Vue packages?
No. It provides guidance and examples but does not install dependencies or execute project commands.

Developer Details

Author

antfu

License

MIT

Author version

v18.0.0

Skillstore revision

r2

Repository

https://github.com/antfu/skills/tree/main/skills/vue-best-practices/

Ref

89edfdc710d0846129dcee6a929477b04f08052c

Maintenance freshness

7/24/2026

Usage

29 downloads · 272 views

File structure

📄 LICENSE.md

📁 references/

📄 animation-class-based-technique.md

📄 animation-state-driven-technique.md

📄 component-async.md

📄 component-data-flow.md

📄 component-fallthrough-attrs.md

📄 component-keep-alive.md

📄 component-slots.md

📄 component-suspense.md

📄 component-teleport.md

📄 component-transition-group.md

📄 component-transition.md

📄 composables.md

📄 directives.md

📄 perf-avoid-component-abstraction-in-lists.md

📄 perf-v-once-v-memo-directives.md

📄 perf-virtualize-large-lists.md

📄 plugins.md

📄 reactivity.md

📄 render-functions.md

📄 sfc.md

📄 state-management.md

📄 updated-hook-performance.md

📄 SKILL.md

📄 SYNC.md