Habilidades frontend-design

📦

frontend-design

Name: frontend-design
Author: pbakaus

Revisión del contenido r1 Seguro

Crear interfaces frontend distintivas

Las interfaces genéricas debilitan la confianza en el producto y hacen que el resultado de la IA sea fácil de detectar. Esta skill guía a Claude, Codex y Claude Code hacia un diseño frontend distintivo.

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

Pruébalo

Usando "frontend-design". Un panel de gestión de tareas para un pequeño estudio de diseño.

Resultado esperado:

Un concepto de panel pulido con jerarquía sólida, estados de tareas claros, navegación responsive, tratamiento de foco accesible y movimiento contenido.

Usando "frontend-design". Una página de precios que actualmente parece una cuadrícula genérica de tarjetas.

Resultado esperado:

Una experiencia de precios revisada con una comparación de planes más clara, tipografía distintiva, menos tarjetas repetidas, llamadas a la acción más sólidas y decisiones de diseño específicas para móvil.

Usando "frontend-design". Un flujo de formulario para incorporar nuevos miembros al equipo.

Resultado esperado:

Un flujo de onboarding con etiquetas visibles, textos de error útiles, estados de progreso claros, objetivos táctiles grandes y estados vacíos bien pensados.

Auditoría de seguridad

Seguro

v6 • 9/7/2026 Abrir el informe versionado

All 25 static findings are false positives caused by frontend-design terminology such as input, invalid, grid, outline, device, and hover. The reviewed files contain Markdown design guidance only, with no prompt injection, executable scripts, network behavior, filesystem access, or credential handling.

Archivos escaneados

941

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/pbakaus-frontend-design/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

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

Insignia HTML

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

Tarjeta para insertar

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

pbakaus. (2026). frontend-design security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/pbakaus-frontend-design/audits/6

Cita BibTeX

@techreport{pbakaus-pbakaus-frontend-design-2026,
  author = {pbakaus},
  title = {frontend-design security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/pbakaus-frontend-design/audits/6},
  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: "frontend-design security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
  - name: "pbakaus"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/pbakaus-frontend-design/audits/6"
identifiers:
  - type: other
    value: "skillstore:pbakaus-frontend-design:audit:6"
    description: "Skillstore immutable audit report identifier"

Comparar variantes

18 variantes instalables

Cada autor sigue siendo un skill instalable independiente. La variante recomendada se ordena según la evidencia de Skillstore.

Por qué esta variante es la primera

Mayor puntuación de Skillstore

Autor / fuente Puntuación de Skillstore Confianza de la evidencia Uso en Skillstore Actualizado

AI-Vibe-Prompts Recomendado

atman36-frontend-design

Puntuación de Skillstore 81

Confianza de la evidencia Alto

Uso en Skillstore 37

Actualizado

2026-09-09

anthropics

frontend-design

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 469

Actualizado

2026-09-09

ZhanlinCui

zhanlincui-frontend-design

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 371

Actualizado

2026-09-09

YYH211

yyh211-frontend-design

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 208

Actualizado

2026-09-09

1bertogit

1bertogit-frontend-design

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 189

Actualizado

2026-09-09

92Bilal26

92bilal26-frontend-design

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 25

Actualizado

2026-09-09

AdamAugustinsky

adamaugustinsky-frontend-design

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 20

Actualizado

2026-09-09

am-will

am-will-frontend-design

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 19

Actualizado

2026-09-09

Azeem-2

azeem-2-frontend-design

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 17

Actualizado

2026-09-09

CesarAugustusGroB

cesaraugustusgrob-frontend-design

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 15

Actualizado

2026-09-09

davila7

davila7-frontend-design

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 10

Actualizado

2026-09-09

anthropics

anthropics-frontend-design

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 124

Actualizado

2026-09-09

pbakaus Actual

pbakaus-frontend-design

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 85

Actualizado

2026-09-09

7Spade

7spade-frontend-design

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 43

Actualizado

2026-09-09

sickn33

sickn33-frontend-design

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 26

Actualizado

2026-09-09

AgentWorkforce

agentworkforce-frontend-design

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 18

Actualizado

2026-09-09

AJV009

ajv009-frontend-design

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 12

Actualizado

2026-09-09

DennisLiuCk

dennisliuck-frontend-design

Puntuación de Skillstore 76

Confianza de la evidencia Alto

Uso en Skillstore 6

Actualizado

2026-09-09

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

Diseñar una página de producto memorable

Usa la skill para convertir un brief de producto en una página distintiva con tipografía clara, espaciado, movimiento y comportamiento responsive.

Mejorar una interfaz funcional

Aplica la orientación para refinar un componente existente con una jerarquía más sólida, mejores estados e interacciones más pulidas.

Prototipar una UI para una startup

Pasa de una idea vaga de aplicación a una dirección de interfaz enfocada que evita patrones genéricos de IA.

Prueba estos prompts

Diseñar un componente

Crea un componente frontend distintivo para [purpose]. Usa la skill frontend-design para elegir tipografía, espaciado, color, estados y comportamiento responsive.

Construir una página responsive

Construye una [page type] responsive para [audience]. Usa la orientación de la skill para la dirección visual, el ritmo del diseño, la accesibilidad, el movimiento y la redacción UX.

Refinar una interfaz existente

Revisa esta interfaz y mejórala con la skill frontend-design. Enfócate en jerarquía, tipografía, contraste de color, estados de interacción y adaptación móvil.

Crear un sistema de UI completo

Crea una dirección de UI cohesiva para [product]. Define principios visuales, patrones reutilizables, reglas responsive, comportamiento de movimiento y detalles de implementación para uso en producción.

Mejores prácticas

Proporciona contexto del producto, audiencia, tono y restricciones técnicas antes de pedir la implementación.
Pide estados responsive y accesibles, además de revisión de capturas de pantalla cuando la calidad visual sea importante.
Usa la orientación de referencia como punto de partida y luego alinea las decisiones con tu sistema de marca.

Evitar

Solicitar un diseño moderno genérico sin audiencia, tono ni dirección visual.
Aplicar todos los efectos visuales a la vez en lugar de elegir un concepto de diseño claro.
Ignorar la accesibilidad, la reducción de movimiento y el comportamiento móvil durante la revisión final.