Habilidades frontend-design

📦

frontend-design

Name: frontend-design
Author: davila7

Revisión del contenido r2 Seguro

Diseña interfaces frontend de nivel de producción

Los equipos suelen necesitar trabajo frontend que sea funcional, pero también visualmente distintivo. Esta skill guía a Claude, Codex y Claude Code para crear interfaces pulidas con una dirección estética clara.

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

Pruébalo

Usando "frontend-design". Una landing page para un producto boutique de analítica.

Resultado esperado:

Un concepto de página responsive con una dirección visual audaz, secciones estructuradas, decisiones tipográficas, sistema de color y notas de implementación.

Usando "frontend-design". Un dashboard existente se siente genérico.

Resultado esperado:

Un plan de rediseño con jerarquía más sólida, layout de información más denso, espaciado mejorado, estados refinados y un enfoque de implementación coherente.

Usando "frontend-design". Un componente React necesita estilos con calidad de producto.

Resultado esperado:

Una dirección de componente pulida con guía de layout, detalles de interacción, comportamiento responsive y estructura CSS para implementar.

Auditoría de seguridad

Seguro

v9 • 23/7/2026 Abrir el informe versionado

All three static findings are false positives. Their cited lines contain frontend design guidance and do not request system reconnaissance or unsafe actions.

Archivos escaneados

221

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

Insignia Markdown

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

Insignia HTML

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

Tarjeta para insertar

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

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

Cita BibTeX

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

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

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

Lanzar una página de producto

Crear una landing page distintiva con layout, tipografía, color y movimiento pulidos para un producto nuevo.

Refinar un dashboard de aplicación

Mejorar un dashboard existente con una jerarquía más sólida, espaciado, estados de interacción y consistencia visual.

Crear un componente frontend

Generar un componente React o HTML/CSS pulido que coincida con una dirección estética clara.

Prueba estos prompts

Crear una página simple

Diseña un sitio web de una sola página para [product]. Usa HTML, CSS y JavaScript. Hazlo responsive, pulido y fácil de escanear.

Dar estilo a un componente existente

Mejora el diseño visual de este [component]. Mantén el comportamiento actual, pero refina el layout, la tipografía, el color, el espaciado y los estados.

Crear un dashboard temático

Crea un dashboard para [audience] que haga seguimiento de [metrics]. Elige una dirección estética distintiva e implementa componentes de UI responsive.

Crear un sistema frontend completo

Diseña e implementa una interfaz de varias secciones para [app]. Incluye navegación, estados, movimiento, notas de accesibilidad y un sistema visual cohesivo.

Mejores prácticas

Proporciona audiencia, objetivo del producto, restricciones de marca y framework requerido antes de pedir la implementación.
Pide estados responsive, estados vacíos, estados de carga y consideraciones de accesibilidad cuando sean importantes.
Revisa la UI generada en un navegador e itera sobre espaciado, contraste y movimiento.

Evitar

No solicites un diseño moderno genérico sin contexto ni detalles de audiencia.
No aceptes efectos decorativos que debiliten la legibilidad, la accesibilidad o el rendimiento.
No omitas la verificación en viewports de escritorio y móviles.

Preguntas frecuentes

¿Qué ayuda a crear esta skill?

Ayuda a crear páginas web, dashboards, componentes, landing pages y refinamientos de interfaces con una dirección visual sólida.

¿Qué herramientas pueden usarla?

Es compatible con Claude, Codex y Claude Code.

¿Incluye recursos listos para usar?

No. Proporciona guía de diseño e implementación, pero el agente debe crear o buscar recursos durante la tarea.

¿Puede trabajar con React?

Sí. Es compatible con componentes React y también puede guiar trabajo frontend con HTML, CSS, JavaScript, Vue o tecnologías similares.

¿Reemplaza la revisión de diseño?

No. La revisión humana sigue siendo necesaria para la adecuación a la marca, la accesibilidad, el comportamiento en navegadores y los requisitos del producto.

¿Ejecuta comandos o accede a secretos?

No. El texto de la skill contiene solo orientación y no incluye scripts, llamadas de red ni comandos externos.