Habilidades designing-frontend

📦

designing-frontend

Name: designing-frontend
Author: Byunk

Revisión del contenido r1 Seguro

Diseña interfaces frontend distintivas

Las interfaces genéricas pueden hacer que los productos parezcan intercambiables. Esta skill guía a Claude, Codex y Claude Code hacia una dirección visual específica, código pulido y verificación.

Compatible con: Claude Codex Code(CC)

🥉 79 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 "designing-frontend" from https://skillstore.io/skills/byunk-designing-frontend.md and its manifest at https://skillstore.io/api/skills/byunk-designing-frontend/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/byunk-designing-frontend.md Manifest firmado GET /api/skills/byunk-designing-frontend/manifest Lockfile firmado GET /api/skills/byunk-designing-frontend/lockfile

Pruébalo

Usando "designing-frontend". Una solicitud de un panel de analítica distintivo.

Resultado esperado:

Un concepto de panel enfocado con tipografía específica del dominio, densidad estructurada, movimiento contenido y orientación para una interfaz responsive de producción.

Usando "designing-frontend". Una página de registro simple que se siente genérica.

Resultado esperado:

Un flujo de registro rediseñado con una jerarquía visual más sólida, color intencional, estados hover pulidos y comprobaciones de accesibilidad.

Usando "designing-frontend". Una nueva página de producto para una herramienta creativa.

Resultado esperado:

Una dirección de página audaz con tipografía expresiva, efectos visuales contextuales, detalles de interacción y prioridades de implementación.

Auditoría de seguridad

Seguro

v9 • 23/7/2026 Abrir el informe versionado

All four static alerts are false positives caused by ordinary visual design language in SKILL.md. No system reconnaissance, prompt injection, or other malicious intent was found.

Archivos escaneados

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

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/byunk-designing-frontend/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/byunk-designing-frontend/security.svg)](https://skillstore.io/skills/byunk-designing-frontend?utm_source=security_passport_badge)

Insignia HTML

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

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/byunk-designing-frontend.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

Byunk. (2026). designing-frontend security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/byunk-designing-frontend/audits/9

Cita BibTeX

@techreport{byunk-byunk-designing-frontend-2026,
  author = {Byunk},
  title = {designing-frontend security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/byunk-designing-frontend/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: "designing-frontend security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "Byunk"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/byunk-designing-frontend/audits/9"
identifiers:
  - type: other
    value: "skillstore:byunk-designing-frontend: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 un panel de producto

Crea un panel pulido que se ajuste al dominio del producto y evite un estilo SaaS genérico.

Renovar una página de marketing

Convierte una página simple en una experiencia web memorable con una jerarquía más sólida, movimiento y textura visual.

Prototipar una nueva pantalla de app

Explora una dirección estética específica antes de convertirla en código frontend de producción.

Prueba estos prompts

Crear una sección de landing

Usa la skill designing-frontend para crear una sección de landing para una app financiera. Hazla distintiva, accesible y lista para producción.

Mejorar un componente existente

Usa la skill designing-frontend para rediseñar este componente. Mantén el modelo de datos, mejora la jerarquía, el movimiento, el color y el comportamiento responsive.

Diseñar una interfaz completa

Usa la skill designing-frontend para crear una interfaz de onboarding completa. Define la dirección estética, implementa la pantalla y verifica la accesibilidad.

Crear un sistema específico de dominio

Usa la skill designing-frontend para crear un sistema visual para una herramienta de analítica médica. Incluye reglas de layout, componentes, estados y notas de verificación.

Mejores prácticas

Proporciona el dominio del producto, la audiencia, el framework y los requisitos de accesibilidad antes de solicitar la implementación.
Solicita la verificación de la jerarquía, la responsividad, las interacciones y la accesibilidad después de la primera construcción.
Pide una dirección estética específica cuando la marca o las expectativas de los usuarios ya sean conocidas.

Evitar

No pidas un diseño moderno genérico sin contexto de dominio.
No omitas las comprobaciones de accesibilidad al añadir animación, contraste o layouts densos.
No reutilices las mismas fuentes, gradientes y patrones de layout en proyectos no relacionados.

Preguntas frecuentes

¿Esta skill escribe código frontend?

Sí. Guía al modelo para escribir código frontend de nivel producción en HTML, CSS, JavaScript, React, Vue o tecnologías frontend similares.

¿Incluye recursos de diseño listos para usar?

No. Proporciona orientación de diseño e implementación, pero no empaqueta fuentes, imágenes ni plantillas.

¿Puede ayudar con la accesibilidad?

Sí. El flujo de trabajo incluye validación de accesibilidad durante la verificación, especialmente para interacciones, contraste y jerarquía.

¿Es solo para landing pages?

No. Se aplica a componentes, páginas, pantallas de aplicaciones y experiencias frontend completas.

¿Qué herramientas admiten esta skill?

El informe enumera soporte para Claude, Codex y Claude Code.

¿Qué contexto deberían proporcionar los usuarios?

Proporciona la audiencia, el propósito, el framework, las restricciones de marca, las necesidades de accesibilidad y ejemplos de estilos a evitar.

Detalles del desarrollador

Autor

Byunk

Licencia

MIT

Revisión de Skillstore

Aviso de versión

El autor no declaró una versión.

Repositorio

https://github.com/Byunk/claude-code-essentials/tree/main/essentials/skills/designing-frontend

Ref.

a39a91716eadede5f4cdefd78178fed4e837a128

Actualidad del mantenimiento

26/7/2026

Uso

10 descargas · 173 vistas

Estructura de archivos

📄 SKILL.md