Habilidades vue-options-api-best-practices

📦

vue-options-api-best-practices

Name: vue-options-api-best-practices
Author: github.com/vuejs-ai

v2.0.0 Revisión del contenido r1 Seguro ⚙️ Comandos externos🌐 Acceso a red

Mejorar componentes de Vue Options API

Los proyectos de Vue Options API pueden perder seguridad de tipos y una vinculación correcta de this. Esta skill ofrece patrones directos para componentes Vue más seguros.

Compatible con: Claude Codex Code(CC)

🥈 81 Plata

Maintain this Skill? Claim it 🥈 81 Plata

Instalar con mi Agente

Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.

Solicitud de agente

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

Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/vuejs-ai-vue-options-api-best-practices.md Manifest firmado GET /api/skills/vuejs-ai-vue-options-api-best-practices/manifest Lockfile firmado GET /api/skills/vuejs-ai-vue-options-api-best-practices/lockfile

Pruébalo

Usando "vue-options-api-best-practices". Un hook mounted usa una función flecha y no puede leer los datos del componente.

Resultado esperado:

El hook debería usar sintaxis de función regular o abreviatura de método. Entonces Vue puede vincular this a la instancia del componente.

Usando "vue-options-api-best-practices". Un componente acepta una prop de objeto user y TypeScript infiere un tipo object amplio.

Resultado esperado:

Define una interfaz User y usa Vue PropType para la prop. Agrega validación en tiempo de ejecución si se debe comprobar la forma del objeto.

Usando "vue-options-api-best-practices". Un método debounced se comporta incorrectamente entre instancias repetidas del componente.

Resultado esperado:

Crea la función debounced por instancia en un hook de ciclo de vida. Cancela los temporizadores durante unmount para evitar estado compartido y fugas.

Auditoría de seguridad

Seguro

v4 • 7/7/2026 Abrir el informe versionado

The static alerts are false positives caused by Markdown code fences, TypeScript template literals, Vue documentation links, and DOM event property names. No prompt injection, secret handling, command execution, or executable network behavior was found in the reviewed skill content.

Archivos escaneados

1,509

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

⚙️ Comandos externos (8)

reference/no-arrow-functions-in-lifecycle-hooks.md:27-44 reference/no-arrow-functions-in-lifecycle-hooks.md:68-74 reference/no-arrow-functions-in-methods.md:28-38 reference/no-arrow-functions-in-methods.md:60-65 reference/ts-options-api-computed-return-types.md:79-84 reference/ts-options-api-computed-return-types.md:84-88 reference/ts-options-api-computed-return-types.md:106-116 reference/ts-strict-mode-options-api.md:120-124

🌐 Acceso a red (1)

reference/no-arrow-functions-in-methods.md:57

La auditoría estática y semántica completada más reciente no detectó hallazgos de seguridad confirmados. Esto no demuestra que el skill no tenga efectos secundarios.

Auditado por: codex Ver historial de auditorías →

Compartir y citar este informe

Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.

Abrir el informe versionado

Copiar enlace del informe

https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

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

Insignia HTML

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

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/vuejs-ai-vue-options-api-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>

Citas académicas (APA · BibTeX · CFF)

Cita APA

github.com/vuejs-ai. (2026). vue-options-api-best-practices security audit report (audit version 4) [Author version 2.0.0]. Skillstore. https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4

Cita BibTeX

@techreport{github-com-vuejs-ai-vuejs-ai-vue-options-api-best-practices-2026,
  author = {github.com/vuejs-ai},
  title = {vue-options-api-best-practices security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4},
  note = {Author version 2.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-options-api-best-practices security audit report (audit version 4)"
version: "2.0.0"
type: report
authors:
  - name: "github.com/vuejs-ai"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vuejs-ai-vue-options-api-best-practices/audits/4"
identifiers:
  - type: other
    value: "skillstore:vuejs-ai-vue-options-api-best-practices:audit:4"
    description: "Skillstore immutable audit report identifier"

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Alto

Arquitectura

100

Mantenibilidad

Contenido

Comunidad

Cumplimiento de la especificación

Lo que puedes crear

Corregir errores de vinculación de this

Usa las referencias de ciclo de vida y métodos para encontrar funciones flecha que rompen el acceso a la instancia del componente.

Reforzar componentes TypeScript

Aplica defineComponent, PropType, modo estricto y tipos de retorno explícitos en componentes Options API existentes.

Revisar código Vue heredado

Revisa componentes Options API antiguos en busca de métodos con estado compartidos, tipado débil de eventos y patrones de validación obsoletos.

Prueba estos prompts

Encontrar problema de vinculación de this

Revisa este componente Vue Options API y explica por qué this es undefined. Céntrate en métodos y hooks de ciclo de vida. [Pegar componente]

Agregar props TypeScript

Ayúdame a tipar estas props de Vue Options API con TypeScript. Incluye orientación sobre PropType para objetos, arrays y funciones. [Pegar props]

Mejorar manejadores de eventos

Revisa estos manejadores de eventos de Options API. Recomienda tipos de evento explícitos y un manejo más seguro de target. [Pegar métodos y plantilla]

Auditar prácticas del componente

Audita este componente Vue Options API para revisar la vinculación de this, compatibilidad con TypeScript estricto, tipos de retorno computados y métodos con estado. [Pegar componente]

Mejores prácticas

Usa abreviatura de método o funciones regulares para métodos y hooks de ciclo de vida de Options API.
Envuelve los componentes TypeScript de Options API con defineComponent y habilita la comprobación estricta.
Agrega tipos explícitos para props complejas, eventos, valores computados y propiedades inyectadas.

Evitar

Usar funciones flecha como hooks de ciclo de vida o métodos de nivel superior de Options API.
Depender de parámetros de evento sin tipo y de inferencia amplia de props de objeto.
Crear métodos debounced o throttled compartidos directamente en la opción methods.