Habilidades visual-design-foundations

📦

visual-design-foundations

Name: visual-design-foundations
Author: wshobson

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

Crear Fundamentos de Diseño Visual

La tipografía, los colores, el espaciado y los iconos inconsistentes hacen que las interfaces sean más difíciles de usar y mantener. Esta skill ayuda a Claude, Codex y Claude Code a definir sistemas visuales prácticos con tokens accesibles y patrones reutilizables.

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

Pruébalo

Usando "visual-design-foundations". Un equipo necesita una base de diseño para un nuevo dashboard de analítica.

Resultado esperado:

Una escala tipográfica concisa para encabezados, texto del cuerpo, etiquetas y tablas con mucha información.
Roles semánticos de color para marca, éxito, advertencia, error, superficies, bordes y texto.
Reglas de espaciado e iconos que mantienen los layouts densos de dashboards legibles y consistentes.

Usando "visual-design-foundations". Un producto existente tiene espaciado inconsistente y una jerarquía poco clara.

Resultado esperado:

Una auditoría priorizada de desviaciones de espaciado, contraste débil, exceso de fuentes y estados faltantes.
Nombres de tokens recomendados y valores de reemplazo para patrones de layout repetidos.
Un breve plan de corrección para los componentes con mayor impacto en el usuario.

Usando "visual-design-foundations". Un diseñador quiere orientación de modo oscuro para tokens existentes.

Resultado esperado:

Un modelo de tokens semánticos que separa colores de marca, superficie, texto, borde y estado.
Comprobaciones de contraste para verificar texto legible y estados interactivos en ambos temas.
Orientación para evitar nombres de colores directos en decisiones a nivel de componente.

Auditoría de seguridad

Seguro

v4 • 8/7/2026 Abrir el informe versionado

The static findings are false positives from Markdown fences, JavaScript template literals, regular expression matching, and resource links. No prompt injection, credential handling, process execution, or malicious network intent was found in the reviewed files.

Archivos escaneados

1,604

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

⚡ Contiene scripts (1)

references/color-systems.md:239

⚙️ Comandos externos (35)

🌐 Acceso a red (5)

SKILL.md:322 SKILL.md:323 SKILL.md:324 SKILL.md:325 SKILL.md:326

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

Insignia Markdown

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

Insignia HTML

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

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/wshobson-visual-design-foundations.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). visual-design-foundations security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4

Cita BibTeX

@techreport{wshobson-wshobson-visual-design-foundations-2026,
  author = {wshobson},
  title = {visual-design-foundations security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/wshobson-visual-design-foundations/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: "visual-design-foundations security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "wshobson"
date-released: "2026-07-08"
url: "https://skillstore.io/skills/wshobson-visual-design-foundations/audits/4"
identifiers:
  - type: other
    value: "skillstore:wshobson-visual-design-foundations: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 Nuevo Conjunto de Tokens de Diseño

Define tokens prácticos de tipografía, espaciado, color e iconos antes de construir una nueva interfaz.

Mejorar la Consistencia de la Interfaz

Audita pantallas existentes para detectar jerarquía visual, desviaciones de espaciado, uso incorrecto del color y tratamiento inconsistente de iconos.

Documentar una Guía de Estilo Ligera

Convierte decisiones de diseño en reglas de uso claras que los desarrolladores puedan aplicar en todos los componentes.

Prueba estos prompts

Revisar Fundamentos Visuales

Revisa esta interfaz en cuanto a tipografía, contraste de color, espaciado y consistencia de iconos. Da correcciones priorizadas con sugerencias simples de tokens de diseño.

Definir Tokens Iniciales

Crea un sistema inicial de diseño visual para un dashboard SaaS. Incluye escala tipográfica, tokens de color, escala de espaciado, tamaños de iconos y reglas de uso.

Adaptar Tokens a Tailwind

Traduce estos colores de marca y decisiones tipográficas a tokens de diseño listos para Tailwind. Incluye notas de accesibilidad y consideraciones de modo oscuro.

Auditar un Sistema de Diseño

Audita esta biblioteca de componentes para detectar brechas en el sistema visual. Identifica desviaciones de tokens, problemas de jerarquía, riesgos de contraste, inconsistencias de iconos y pasos de migración.

Mejores prácticas

Empieza con tokens semánticos antes de añadir excepciones específicas de componentes.
Comprueba el contraste, los objetivos táctiles y los colores de estado con contenido real desde el principio.
Documenta reglas de uso para tipografía, espaciado, colores e iconos junto con los valores de tokens.

Evitar

Usar valores arbitrarios únicos cuando encaja un token de espaciado o tipografía existente.
Nombrar tokens por su apariencia visual cuando su propósito puede cambiar entre temas.
Añadir muchas familias tipográficas, pesos o estilos de iconos sin una necesidad clara de jerarquía.