frontend-aesthetics
Mejorar el diseño visual del frontend
Las pantallas frontend genéricas suelen parecerse entre sí y carecen de enfoque de marca. Esta skill guía las decisiones de tipografía, color, movimiento y profundidad para crear interfaces más claras.
Instalar con mi Agente
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Review the Skillstore skill "frontend-aesthetics" from https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics.md and its manifest at https://skillstore.io/api/skills/barnhardt-enterprises-inc-frontend-aesthetics/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.
Pruébalo
Usando "frontend-aesthetics". Revisar una landing page que usa fuentes predeterminadas, un degradado de morado a azul y contenido centrado.
Resultado esperado:
- Usa una fuente de encabezado más distintiva y mantén la fuente del cuerpo altamente legible.
- Reemplaza el tratamiento de acento cargado de degradados por un acento de marca y sombras contenidas.
- Crea un ritmo de layout más sólido con alineación asimétrica y una jerarquía de secciones más clara.
Usando "frontend-aesthetics". Planificar un dashboard oscuro para monitoreo de proyectos.
Resultado esperado:
- Usa una base casi negra con superficies ligeramente elevadas para tarjetas y tablas.
- Reserva el acento principal para estados activos, acciones principales y métricas importantes.
- Añade transiciones hover sutiles, estados de carga y feedback de actualización de datos.
Usando "frontend-aesthetics". Mejorar una biblioteca de componentes que se siente inconsistente.
Resultado esperado:
- Estandariza el estilo de trazo de los iconos, el radio de las esquinas, la opacidad de los bordes y los estados de foco.
- Define tratamientos separados para acciones primarias, secundarias, destructivas y deshabilitadas.
- Revisa los formularios para asegurar etiquetas persistentes, mensajes de validación específicos y contraste legible.
Auditoría de seguridad
SeguroThe flagged external command findings are Markdown fences, inline formatting, or frontend template examples, not executable shell commands. The flagged network findings are public reference links, and the blocker findings are design guidance, not reconnaissance. No prompt injection attempt or malicious semantic intent was found.
Factores de riesgo
⚙️ Comandos externos (27)
🌐 Acceso a red (7)
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.
Copiar enlace del informe
https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics?utm_source=security_passport_badge)Insignia HTML
<a href="https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/barnhardt-enterprises-inc-frontend-aesthetics/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Tarjeta para insertar
<iframe src="https://skillstore.io/embed/skills/barnhardt-enterprises-inc-frontend-aesthetics.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
Barnhardt-Enterprises-Inc. (2026). frontend-aesthetics security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8Cita BibTeX
@techreport{barnhardt-enterprises-inc-barnhardt-enterprises-inc-frontend-aesthetics-2026,
author = {Barnhardt-Enterprises-Inc},
title = {frontend-aesthetics security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8},
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-aesthetics security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Barnhardt-Enterprises-Inc"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/barnhardt-enterprises-inc-frontend-aesthetics/audits/8"
identifiers:
- type: other
value: "skillstore:barnhardt-enterprises-inc-frontend-aesthetics:audit:8"
description: "Skillstore immutable audit report identifier"
Comparar variantes
2 variantes instalablesCada 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
barnhardt-enterprises-inc-frontend-aesthetics
2026-09-09
crossbill-highlights-frontend-aesthetics
2026-09-09
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: AltoLo que puedes crear
Pulir un dashboard de producto
Mejorar la densidad de datos, la jerarquía, las superficies oscuras, los estados hover y los indicadores de estado para una interfaz de dashboard.
Revisar la dirección de una landing page
Encontrar decisiones visuales genéricas y reemplazarlas por tipografía más sólida, acentos enfocados y movimiento útil.
Construir un kit de UI de marca
Crear reglas prácticas para fuentes, colores, componentes, iconos, fondos y estados de interacción.
Prueba estos prompts
Use the frontend-aesthetics skill to improve this page. Focus on typography, one accent color, background depth, and clear hierarchy.
Audit this interface for generic visual patterns. List the highest impact design changes for fonts, colors, spacing, motion, and components.
Create a dashboard visual system using this skill. Define typography, dark surfaces, accent usage, table styling, status badges, and motion states.
Use the skill to create a distinctive frontend direction for this brand. Explain the visual rationale and give implementation guidance for key screens.
Mejores prácticas
- Elige un color de acento principal y usa colores semánticos solo para significados de estado claros.
- Usa tipografía distintiva para los encabezados, manteniendo el texto del cuerpo legible y accesible.
- Añade movimiento con propósito para cambios de estado, carga, feedback hover y transiciones de página.
Evitar
- Evita usar pilas de fuentes predeterminadas como principal expresión de marca en interfaces pulidas.
- Evita degradados morado-azul, acentos arcoíris y múltiples botones primarios en una misma pantalla.
- Evita fondos oscuros planos, tarjetas blancas sobre superficies oscuras y mensajes vagos de error en formularios.
Preguntas frecuentes
¿Qué mejora esta skill?
¿Genera código completo de aplicación?
¿Qué herramientas pueden usar esta skill?
¿Requiere acceso a internet?
¿Es solo para temas oscuros?
¿Puede reemplazar a un diseñador humano?
Detalles del desarrollador
Licencia
MIT
Revisión de Skillstore
r1
Aviso de versión
El autor no declaró una versión.
Repositorio
https://github.com/Barnhardt-Enterprises-Inc/quetrex-plugin/tree/main/templates/skills/frontend-aestheticsRef.
c4231f0153ccd2a2ed62274c5a372bf8f2386d3f
Actualidad del mantenimiento
18/7/2026
Uso
29 descargas · 323 vistas
Estructura de archivos