Bessere Vue- und Nuxt-Komponenten erstellen
Vue- und Nuxt-Projekte leiden oft unter unklarem State, fragilen Komponenten und inkonsistentem Datenfluss. Diese Skill führt KI-Assistenten zu praktischen Mustern für Vue 3 und Nuxt 3.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "vue-development-guides" from https://skillstore.io/skills/vuejs-ai-vue-development-guides.md and its manifest at https://skillstore.io/api/skills/vuejs-ai-vue-development-guides/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„vue-development-guides“ wird verwendet. Eine große Vue-Komponente vermischt API-Laden, Filterung und mehrere UI-Bereiche.
Erwartetes Ergebnis:
„vue-development-guides“ wird verwendet. Eine Kindkomponente mutiert den State der Elternkomponente und erhält viele nicht zusammenhängende props.
Erwartetes Ergebnis:
„vue-development-guides“ wird verwendet. Ein Nuxt-Feature benötigt gemeinsamen State über Seiten hinweg und serverseitiges Rendering.
Erwartetes Ergebnis:
Reviewed all 22 static findings; each is a false positive from Markdown guidance, inline code spans, TypeScript template literals, or a relative Vue fetch example. No prompt injection, command execution, external endpoint, credential access, or data exfiltration intent was found.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/vuejs-ai-vue-development-guides/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vuejs-ai-vue-development-guides?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/vuejs-ai-vue-development-guides?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vuejs-ai-vue-development-guides/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/vuejs-ai-vue-development-guides.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>vuejs-ai. (2026). vue-development-guides security audit report (audit version 4) [Author version 17.0.0]. Skillstore. https://skillstore.io/skills/vuejs-ai-vue-development-guides/audits/4@techreport{vuejs-ai-vuejs-ai-vue-development-guides-2026,
author = {vuejs-ai},
title = {vue-development-guides security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/vuejs-ai-vue-development-guides/audits/4},
note = {Author version 17.0.0}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vue-development-guides security audit report (audit version 4)"
version: "17.0.0"
type: report
authors:
- name: "vuejs-ai"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vuejs-ai-vue-development-guides/audits/4"
identifiers:
- type: other
value: "skillstore:vuejs-ai-vue-development-guides:audit:4"
description: "Skillstore immutable audit report identifier"
Eine Komponente auf Reaktivitätsfehler, unklaren Datenfluss, zu große Verantwortungsbereiche und Probleme in der SFC-Struktur prüfen.
Ein State-Muster für ein SSR- oder SPA-Feature auswählen, bevor die Implementierung beginnt.
Erklären, warum ein ref, computed value, watcher, emit oder store pattern zu einem bestimmten Problem passt.
Überprüfe diese Vue-Komponente anhand der Vue-Entwicklungsleitfäden. Konzentriere dich auf Reaktivität, props, emits, SFC-Reihenfolge und Komponentengröße.
Plane den Datenfluss für dieses Vue-Feature. Empfiehl props, emits, v-model, provide oder inject dort, wo das jeweilige Muster passt.
Refaktoriere diese Vue-Logik gemäß dem Reaktivitätsleitfaden. Identifiziere refs, reactive objects, computed values, watchers und Cleanup-Anforderungen.
Prüfe diese Nuxt-Feature-Architektur. Empfiehl Komponentenaufteilungen, composables, State-Management und SSR-sichere store patterns.
Autor
vuejs-aiLizenz
MIT
Autorenversion
v17.0.0
Skillstore-Revision
r1
Ref.
36e07d5e13068e5be64447e8f20b427cf2cbd21a
Aktualität der Wartung
22.7.2026
Nutzung
29 Downloads · 169 Aufrufe
Dateistruktur
Vue-3-Codequalität verbessern
In Vue-Projekten sammeln sich im Laufe der Zeit häufig Fehler bei Reaktivität, Komponenten und Performance an. Dieser Skill bietet gezielte Vue-3-Anleitung für sicherere Muster und klareren Code.
Vue-Options-API-Komponenten verbessern
Vue-Options-API-Projekte können Typsicherheit und korrektes this-Binding verlieren. Diese Skill bietet direkte Muster für sicherere Vue-Komponenten.
Anpassbare Vue Composables erstellen
Vue Composables funktionieren oft nicht zuverlässig, wenn Aufrufer eine Mischung aus einfachen Werten, refs und getters übergeben. Diese Skill unterstützt Claude, Codex und Claude Code dabei, wiederverwendbare Composables mit vorhersagbarer Vue-Reaktivität zu entwerfen.
Vue-Pinia-Store-Muster verbessern
Vue-Anwendungen scheitern häufig, weil Store-Einrichtung, Destrukturierung und Regeln für URL-Zustand leicht übersehen werden. Diese Skill gibt Claude, Codex und Claude Code fokussierte Pinia-Anleitung für zuverlässige Stores und vorhersehbare Reaktivität.
Vue-Testpraktiken verbessern
Vue-Testsuites werden häufig instabil, spröde oder schwierig zu konfigurieren. Diese Skill bietet gezielte Anleitung für zuverlässige Vue 3-Tests mit Vitest, Vue Test Utils, Pinia, Async-Helfern und Playwright.
Vue Router Navigation Guards verbessern
Vue Router-Probleme können veraltete Daten, fehlerhafte Weiterleitungen und schwache Routenprüfungen verursachen. Diese Skill bietet fokussierte Muster für Guards, Params, Cleanup und Routing in der Produktion.
React View Transitions implementieren
von vercel-labs
React View Transitions lassen sich leicht falsch platzieren, was zu unbemerkten oder störenden Animationen führt. Dieser Skill unterstützt Entscheidungen zu Animationen für Routen, Suspense, Listen und Shared Elements.
React-Email-Vorlagen mit Resend erstellen
von resend
Produktionsreife E-Mail-Vorlagen zu erstellen ist schwierig, weil sich E-Mail-Clients unterscheiden. Diese Skill führt Claude, Codex und Claude Code durch React Email-Komponenten, Versand, Styling, Lokalisierung und Editor-Workflows.
Produktionsreife Frontend-Funktionen entwickeln
von davila7
Frontend-Teams benötigen projektübergreifend einheitliche Leitlinien für React und Next.js. Dieser Skill bietet Referenz-Workflows, Qualitätspraktiken und Hilfsskripte für die Frontend-Analyse.
React- und Next.js-Performance optimieren
von vercel-labs
React- und Next.js-Apps verlieren oft durch Waterfalls, große Bundles und vermeidbare Re-Renderings an Geschwindigkeit. Diese Skill gibt Agenten konkrete Regeln für sicherere, performanceorientierte Änderungen.
CloudBase AI Models zu Web-Apps hinzufügen
von tencentcloudbase
Browser-KI-Integration kann fehlschlagen, wenn Modellgruppen, Authentifizierung oder Token Credits nicht vorbereitet sind. Dieser Skill führt durch CloudBase-Vorabprüfungen, Modellaktivierung und SDK-Aufrufe für Web-Apps.
Konsistentes Frontend-CSS erstellen
von EIS-ITS
Frontend-Styling driftet häufig über Dateien, Komponenten und Frameworks hinweg auseinander. Diese Skill leitet Claude, Codex und Claude Code zu konsistenten CSS-Methoden und Design-Tokens an.