Compétences vue-best-practices

📦

vue-best-practices

Name: vue-best-practices
Author: hyf0

Sûr 📁 Accès au système de fichiers🌐 Accès réseau

تطبيق أفضل ممارسات Vue 3 مع TypeScript

Également disponible depuis: vuejs-ai,antfu

مشاريع Vue 3 غالباً ما تحتوي على أخطاء في النوع ومشاكل في الإعدادات يصعب تصحيحها يدوياً. توفر هذه المهارة قواعد فحص تلقائية وإصلاحات لكتابة أنواع مكونات Vue، وتكوين Volar، وفحص قوالب vue-tsc الصارم، وأنماط Vue.js الشائعة.

Prend en charge: Claude Codex Code(CC)

📊 69 Adéquat

Télécharger le ZIP du skill

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

Activez et commencez à utiliser

Tester

Utilisation de "vue-best-practices". How do I extract the type of props from a child Vue component?

Résultat attendu:

استخدم ComponentProps من vue-component-type-helpers:
```typescript
import type { ComponentProps } from 'vue-component-type-helpers'
import ChildComponent from './ChildComponent.vue'
// استخدم كنوع prop
defineProps<{
childProps: ComponentProps<typeof ChildComponent>
}>()
```

Utilisation de "vue-best-practices". My CSS modules are not catching typos in class names

Résultat attendu:

قم بتفعيل CSS modules الصارمة في tsconfig:
```json
{
"vueCompilerOptions": {
"target": 3,
"strictCSSModules": true
}
}
```
سيؤدي هذا إلى حدوث أخطاء TypeScript عند استخدام اسم فئة غير موجود في ملف .module.css الخاص بك.

Utilisation de "vue-best-practices". How do I allow data-* attributes with strictTemplates?

Résultat attendu:

أضف dataAttributes إلى vueCompilerOptions:
```json
{
"vueCompilerOptions": {
"target": 3,
"dataAttributes": ["data-*"]
}
}
```
يتيح هذا لأي سمة تبدأ بـ "data-" اجتياز فحص النوع.

Audit de sécurité

Sûr

v1 • 1/23/2026

Documentation-only skill containing Vue.js best practices. Static findings are false positives caused by the scanner misidentifying markdown code fences (backticks) as Ruby shell execution and documentation links as hardcoded URLs. No executable code exists in this skill.

Fichiers analysés

1,514

Lignes analysées

résultats

Total des audits

Problèmes à risque moyen (2)

rules/codeactions-save-performance.md:32-75 rules/data-attributes-config.md:13-70 rules/deep-watch-numeric.md:13-91 rules/define-model-update-event.md:13-73 rules/duplicate-plugin-detection.md:13-95 rules/extract-component-props.md:13-53 rules/fallthrough-attributes.md:13-59 rules/hmr-vue-ssr.md:13-117 rules/module-resolution-bundler.md:13-75 rules/pinia-store-mocking.md:13-154 rules/script-setup-jsdoc.md:13-81 rules/strict-css-modules.md:13-64 rules/volar-3-breaking-changes.md:17-58 rules/vue-directive-comments.md:21-62 rules/vue-router-typed-params.md:13-75 rules/vue-tsc-strict-templates.md:13-64 rules/with-defaults-union-types.md:13-97

Markdown Code Fences Misidentified as Shell Commands

The static scanner flagged backtick characters in markdown code blocks as 'Ruby/shell backtick execution'. This is a false positive - the backticks are markdown syntax for code fences, not executable shell commands.

rules/codeactions-save-performance.md:79 rules/data-attributes-config.md:74 rules/deep-watch-numeric.md:96-97 rules/define-model-update-event.md:77-79 rules/duplicate-plugin-detection.md:101-102 rules/extract-component-props.md:57 rules/fallthrough-attributes.md:63 rules/hmr-vue-ssr.md:123-124 rules/module-resolution-bundler.md:79-81 rules/pinia-store-mocking.md:158-159 rules/script-setup-jsdoc.md:85 rules/strict-css-modules.md:68 rules/volar-3-breaking-changes.md:64-65 rules/vue-directive-comments.md:73 rules/vue-router-typed-params.md:79-81 rules/vue-tsc-strict-templates.md:68-69 rules/with-defaults-union-types.md:101-102

Documentation Links Misidentified as Hardcoded URLs

The static scanner flagged URL references in documentation as 'Hardcoded URL'. These are legitimate external resource links in markdown files, not runtime network requests.

Problèmes à risque faible (1)

rules/duplicate-plugin-detection.md:48 rules/hmr-vue-ssr.md:89

Path Traversal Patterns in Documentation Examples

The scanner detected path traversal sequences (../) in markdown files. These are relative path references to other documentation files within the skill, not filesystem operations.

Facteurs de risque

📁 Accès au système de fichiers (2)

rules/duplicate-plugin-detection.md:48 rules/hmr-vue-ssr.md:89

🌐 Accès réseau (3)

SKILL.md:36 SKILL.md:37 SKILL.md:38

Audité par: claude

Score de qualité

Architecture

100

Maintenabilité

Contenu

Communauté

Sécurité

Conformité aux spécifications

Ce que vous pouvez construire

إصلاح أخطاء الأنواع في مكونات Vue

احصل على مساعدة في استخراج أنواع TypeScript الصحيحة من مكونات Vue عند ظهور أخطاء في الأنواع في props أو emits أو مكونات الغلاف.

تكوين إعدادات Volar و vue-tsc

تعلم أفضل الممارسات لتكوين محرر Volar وفحص نوع القالب باستخدام vue-tsc لاكتشاف الأخطاء مبكراً.

الانتقال إلى أنماط Vue 3.5+

إصلاح الأنماط المهملة عند الترقية إلى Vue 3.5+ بما في ذلك defineModel، ومراقبة المصفوفات العميقة، وميزات التفاعل الجديدة.

Essayez ces prompts

استخراج نوع Props

لدي مكون Vue أريد استخدامه كغلاف. كيف يمكنني استخراج النوع الصحيح لـ TypeScript لخصائصه حتى أتمكن من استخدامها في مكون أب؟ المكون الابن يستخدم <script setup>.

إصلاح أخطاء نوع القالب

قوالب Vue تعرض أخطاء 'مكون غير معرّف' على الرغم من وجود المكونات. كيف أقوم بتكوين strictTemplates في vue-tsc للعمل بشكل صحيح مع مشروعي؟

كتابة أنواع السمات العابرة

كيف أقوم بكتابة النوع الصحيح للسمات العابرة ($attrs) عند إنشاء مكون غلاف يمرر props لمكون ابن؟

ترحيل defineModel في Vue 3.5

أحصل على أخطاء حدث تحديث 'defineModel' في Vue 3.5. كيف أقوم بتعريف حدث التحديث الصحيح للربط ثنائي الاتجاه مع defineModel؟

Bonnes pratiques

استخدم ComponentProps من vue-component-type-helpers بدلاً من استخراج النوع اليدوي لمكونات الغلاف
فعّل strictTemplates في vue-tsc لاكتشاف أخطاء نوع القالب أثناء التطوير
كونّف Volar 3.0 مع vueCompilerOptions.target مضبوط على 3 للتوافق مع Vue 3.5+

Éviter

استخدام تقاطعات النوع اليدوية لـ props بدلاً من vue-component-type-helpers
تجاهل أخطاء نوع القالب بدلاً من إصلاح مشاكل النوع الأساسية
عدم تكوين dataAttributes عند استخدام سمات data-* مخصصة في القوالب

Foire aux questions

ما الفرق بين vue-tsc و Volar؟

Volar هو إضافة VSCode التي توفر دعم اللغة لـ Vue. vue-tsc هو غلاف TypeScript compiler الذي يشغل فحص النوع من Volar من سطر الأوامر. إنهما يتشاركان نفس منطق فحص النوع الأساسي.

كيف أقوم بإصلاح أخطاء 'لا يمكن العثور على الوحدة' في مشاريع Vue؟

تأكد من أن tsconfig.json يتضمن @vue/tsconfig وأن moduleResolution مضبوط على 'bundler'. أضف مسارات إلى tsconfig.json إذا كنت تستخدم أسماء مسارات مثل @/ أو ~/.

هل يمكن لهذه المهارة تعديل ملفات مشروعي؟

لا. توفر هذه المهارة إرشادات وأمثلة كود وتشرح أفضل الممارسات. إنها لا تعدل ملفات مشروعك مباشرة.

ما إصدارات Vue المدعومة؟

تركز هذه المهارة على Vue 3 مع TypeScript، بما في ذلك ميزات Vue 3.5+ مثل defineModel، ومراقبة المصفوفات العميقة، وتحسينات كتابة أنواع التفاعل.

كيف أقوم بكتابة أنواع معلمات Vue Router؟

استخدم إضافات router المكتوبة مثل unplugin-vue-router أو APIs المكتوبة من vue-router. كونّف router لتصدير RouteRecordRaw مع أنواع params الصحيحة.

هل تعمل هذه المهارة مع Nuxt؟

بعض القواعد تنطبق على مشاريع Nuxt، خاصة حول تكوين TypeScript. ومع ذلك، لدى Nuxt نظام وحدات خاص قد يتطلب أساليب مختلفة.