Habilidades design-component

📦

design-component

Name: design-component
Author: Acurioustractor

Revisión del contenido r1 Seguro ⚙️ Comandos externos

Diseñar tarjetas de historias culturalmente sensibles

Las tarjetas de historias y perfiles a menudo necesitan diseños coherentes, señales culturales respetuosas y etiquetado claro de IA. Esta habilidad ofrece patrones de componentes, mapeo de datos y orientación sobre enriquecimiento con IA para interfaces de tarjetas de Empathy Ledger.

Compatible con: Claude Codex Code(CC)

🥉 78 Bronce

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

Pruébalo

Usando "design-component". Un equipo de producto necesita una tarjeta compacta para menciones en la barra lateral.

Resultado esperado:

La habilidad recomendaría la variante compacta, un avatar pequeño, nombre visible, recuento de historias, insignia de anciano, respaldo con iniciales y compatibilidad con foco de teclado.

Usando "design-component". Un diseñador quiere mostrar experiencia temática generada por IA en un perfil destacado.

Resultado esperado:

La habilidad describiría insignias de temas, indicadores de profundidad, etiquetado claro de IA, opciones de anulación manual y límites para contenido sagrado o restringido.

Usando "design-component". Un revisor de seguridad necesita orientación sobre revocación de consentimiento.

Resultado esperado:

La habilidad produciría una estructura de diálogo con consecuencias claras, mensajes de control reversible, captura opcional del motivo y un estilo de acción destructiva.

Auditoría de seguridad

Seguro

v9 • 7/7/2026 Abrir el informe versionado

The static findings are false positives caused by Markdown code fences, JSX template literals, SQL schema examples, and responsive layout text. No prompt injection, command execution instructions, or malicious intent were found in the reviewed skill files.

Archivos escaneados

1,212

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

⚙️ Comandos externos (11)

refs/ai-enrichment.md:147-149 refs/ai-enrichment.md:149-154 refs/ai-enrichment.md:203-217 refs/ai-enrichment.md:330-337 SKILL.md:41 SKILL.md:42 SKILL.md:43 SKILL.md:46-62 SKILL.md:62-71 SKILL.md:71-72 SKILL.md:72-73

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

Insignia Markdown

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

Insignia HTML

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

Tarjeta para insertar

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

Acurioustractor. (2026). design-component security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/acurioustractor-design-component/audits/9

Cita BibTeX

@techreport{acurioustractor-acurioustractor-design-component-2026,
  author = {Acurioustractor},
  title = {design-component security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/acurioustractor-design-component/audits/9},
  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: "design-component security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "Acurioustractor"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/acurioustractor-design-component/audits/9"
identifiers:
  - type: other
    value: "skillstore:acurioustractor-design-component:audit:9"
    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 una tarjeta de directorio de narrador

Usa la jerarquía de datos y las especificaciones visuales para diseñar una tarjeta de perfil reutilizable con contexto cultural respetuoso.

Planificar visualizaciones de enriquecimiento con IA

Mapea biografías enriquecidas, citas extraídas, temas y conexiones sugeridas en estados claros de tarjeta y perfil.

Revisar componentes del panel de consentimiento

Usa los patrones de sindicación para diseñar estados de consentimiento, enmascaramiento de tokens, analíticas y flujos de revocación.

Prueba estos prompts

Elegir una variante de tarjeta

Usa la habilidad design-component para recomendar una variante de tarjeta de narrador para un directorio móvil. Incluye campos obligatorios, campos opcionales y estados de respaldo.

Redactar requisitos de componentes

Usa la habilidad design-component para escribir requisitos para una tarjeta destacada de narrador. Cubre diseño, insignias, visualización de citas, accesibilidad y modo oscuro.

Agregar indicadores de enriquecimiento con IA

Usa la habilidad design-component para agregar estados de enriquecimiento con IA a una tarjeta de perfil existente. Incluye etiquetas, comportamiento de anulación por parte del usuario y límites para contenido sagrado.

Diseñar interfaz de gestión de consentimiento

Usa la habilidad design-component para diseñar un panel de consentimiento de sindicación. Incluye insignias de estado, enmascaramiento de tokens, gráficos de analíticas y texto de confirmación de revocación.

Mejores prácticas

Muestra antecedentes culturales, estado de anciano y territorio tradicional solo con etiquetas respetuosas y contexto claro.
Marca claramente el contenido generado por IA y mantén visibles los controles de anulación del narrador.
Usa estados de carga, vacío, hover, foco y modo oscuro para cada variante de tarjeta.

Evitar

No publiques automáticamente resúmenes, citas o etiquetas generados por IA sin revisión.
No extraigas ni muestres contenido sagrado en interfaces públicas o de uso compartido externo.
No crees múltiples variantes de tarjetas con campos, colores y comportamiento de accesibilidad incoherentes.

Preguntas frecuentes

¿Qué ayuda a diseñar esta habilidad?

Ayuda a diseñar tarjetas de narradores, tarjetas de historias, visualizaciones de perfiles, estados de enriquecimiento con IA y componentes de panel de consentimiento.

¿Genera componentes React completos?

No. Proporciona patrones, ejemplos, mapeo de datos y requisitos que los desarrolladores pueden aplicar en una app existente.

¿Puede ayudar con contenido de perfil generado por IA?

Sí. Cubre biografías enriquecidas, extracción de citas, experiencia temática, resúmenes, sugerencias de conexión y etiquetado claro de IA.

¿La orientación es específica de Empathy Ledger?

Sí. Los ejemplos usan campos de datos de Empathy Ledger, contexto cultural y flujos de trabajo de gestión de consentimiento.

¿Cómo aborda la sensibilidad cultural?

Recomienda terminología respetuosa, visualización del estado de anciano, reconocimiento del territorio tradicional, límites para contenido sagrado y control por parte del narrador.

¿Qué herramientas pueden usar esta habilidad?

El informe enumera compatibilidad con Claude, Codex y Claude Code.