Habilidades web-component-design

📦

web-component-design

Name: web-component-design
Author: wshobson

Revisión del contenido r1 Seguro ⚙️ Comandos externos🌐 Acceso a red⚡ Contiene scripts

Diseñar componentes web reutilizables

Los equipos de frontend necesitan componentes que se mantengan coherentes a medida que los productos crecen. Esta skill guía a Claude, Codex y Claude Code a través de APIs de componentes, patrones de composición, decisiones de estilo y comprobaciones de accesibilidad.

Compatible con: Claude Codex Code(CC)

📊 75 Adecuado

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 "web-component-design" from https://skillstore.io/skills/wshobson-web-component-design.md and its manifest at https://skillstore.io/api/skills/wshobson-web-component-design/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/wshobson-web-component-design.md Manifest firmado GET /api/skills/wshobson-web-component-design/manifest Lockfile firmado GET /api/skills/wshobson-web-component-design/lockfile

Pruébalo

Usando "web-component-design". Diseña un componente de pestañas reutilizable en React para un sistema de diseño.

Resultado esperado:

Un plan de componente con partes raíz e hijas, opciones de estado controlado y no controlado, roles ARIA, comportamiento de teclado y variantes de estilo.

Usando "web-component-design". Elige un enfoque de estilo para una biblioteca de componentes multimarca.

Resultado esperado:

Una comparación de CSS Modules, clases utilitarias, CSS-in-JS y estilos sin runtime, con un enfoque recomendado para tokens de tema.

Usando "web-component-design". Mejora la accesibilidad de un menú desplegable personalizado.

Resultado esperado:

Una lista de comprobación que cubre gestión del foco, roles, navegación por teclado, etiquetas, estados deshabilitados y comportamiento de lectores de pantalla.

Auditoría de seguridad

Seguro

v4 • 8/7/2026 Abrir el informe versionado

AI review found the static alerts are false positives from markdown examples, TypeScript template literals, accessibility key handling, local imports, and documentation links. No prompt injection, data exfiltration intent, shell execution, or secret material was found in the referenced files.

Archivos escaneados

1,952

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

⚙️ Comandos externos (48)

🌐 Acceso a red (6)

references/component-patterns.md:189 SKILL.md:275 SKILL.md:276 SKILL.md:277 SKILL.md:278 SKILL.md:279

⚡ Contiene scripts (2)

references/css-styling-approaches.md:586 SKILL.md:240

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/wshobson-web-component-design/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/wshobson-web-component-design/security.svg)](https://skillstore.io/skills/wshobson-web-component-design?utm_source=security_passport_badge)

Insignia HTML

<a href="https://skillstore.io/skills/wshobson-web-component-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/wshobson-web-component-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/wshobson-web-component-design.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

wshobson. (2026). web-component-design security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-web-component-design/audits/4

Cita BibTeX

@techreport{wshobson-wshobson-web-component-design-2026,
  author = {wshobson},
  title = {web-component-design security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/wshobson-web-component-design/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "web-component-design security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-web-component-design/audits/4"
identifiers:
  - type: other
    value: "skillstore:wshobson-web-component-design:audit:4"
    description: "Skillstore immutable audit report identifier"

Puntuación de Skillstore

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

Arquitectura

Mantenibilidad

Contenido

Comunidad

Cumplimiento de la especificación

Lo que puedes crear

Crear un componente de sistema de diseño

Define variantes, props, comportamiento de accesibilidad y reglas de estilo para un botón, diálogo, pestaña o control de formulario reutilizable.

Estandarizar APIs de componentes

Revisa componentes existentes y alinea nombres, valores predeterminados, composición y patrones de sobrescritura en todo el código base de un producto.

Comparar patrones entre frameworks

Traduce un patrón de UI entre React, Vue y Svelte preservando el flujo de estado y el comportamiento de accesibilidad.

Prueba estos prompts

Diseñar un componente básico

Usa la skill web-component-design para diseñar un [component name] reutilizable para [framework]. Incluye props, variantes, comportamiento de accesibilidad y guía de estilo.

Refactorizar un componente existente

Usa la skill web-component-design para revisar este componente de [framework]. Sugiere una API de componente más limpia, un modelo de composición y un enfoque de estilo.

Crear un patrón de sistema de diseño

Usa la skill web-component-design para diseñar una familia de componentes de [pattern]. Incluye raíz, subcomponentes, propiedad del estado, soporte de teclado y ejemplos de uso.

Evaluar arquitectura entre frameworks

Usa la skill web-component-design para comparar implementaciones en React, Vue y Svelte para [component pattern]. Recomienda una arquitectura y explica las compensaciones.

Mejores prácticas

Empieza con HTML semántico y comportamiento de accesibilidad antes de añadir variantes visuales.
Mantén las APIs de componentes pequeñas, tipadas y coherentes en todo el sistema de diseño.
Prueba los ejemplos con navegación por teclado, diseños responsivos y contenido realista.

Evitar

No añadas muchas props específicas de un solo caso cuando la composición expresaría el mismo comportamiento con más claridad.
No copies ejemplos de fetch en producción sin validar las URLs permitidas y el manejo de datos.
No consideres que el estilo visual está completo hasta comprobar la accesibilidad y los estados de interacción.