frontend-design
Resumen
Esta copia pública de admisión empaqueta packages/skills-catalog/skills/(design)/frontend-design de https://github.com/tech-leads-club/agent-skills en la forma editorial nativa de Omni Skills sin ocultar su origen.
Úsala cuando el operador necesite que el flujo de trabajo ascendente, los archivos de soporte y el contexto del repositorio permanezcan intactos mientras el validador público y el mejorador privado continúan su flujo descendente normal.
Esta admisión mantiene intactos los archivos ascendentes copiados y utiliza el bloque external_source en metadata.json junto con ORIGIN.md como ancla de procedencia para la revisión.
Esta skill guía la creación de interfaces frontend distintivas y de grado profesional que evitan la estética genérica de "slop de IA". Implementa código real y funcional con atención excepcional a los detalles estéticos y elecciones creativas.
Las secciones de la fuente importada que no se asignaron limpiamente a los encabezados públicos todavía se conservan a continuación o en los archivos de soporte. Secciones importadas notables: Dirección de Diseño, La Prueba del Slop de IA.
Cuándo Usar Esta Skill
Usa esta sección como filtro de activación. Debe hacer explícito el límite de activación antes de que el operador cargue archivos, ejecute comandos o abra una solicitud de extracción.
- Usar cuando la solicitud coincida claramente con la intención de la fuente importada: Crear interfaces frontend distintivas y de grado profesional con alta calidad de diseño. Usar esta skill cuando el usuario pida construir componentes web, páginas, artefactos, carteles o aplicaciones. Genera código creativo y pulido...
- Usar cuando el operador deba preservar el detalle del flujo de trabajo ascendente en lugar de reescribir el proceso desde cero.
- Usar cuando la procedencia deba permanecer visible en la respuesta, PR o paquete de revisión.
- Usar cuando las referencias, ejemplos o scripts ascendentes copiados mejoren materialmente la respuesta.
- Usar cuando el flujo de trabajo deba ser revisable en el repositorio público de admisión antes de que el mejorador privado tome el control.
Tabla de Operación
| Situación | Comenzar aquí | Por qué es importante |
|---|---|---|
| Primer uso | metadata.json | Confirma repositorio, rama, commit y ruta importada a través del bloque external_source antes de tocar el flujo de trabajo copiado |
| Revisión de procedencia | ORIGIN.md | Proporciona a los revisores una pista de auditoría en lenguaje sencillo para la fuente importada |
| Ejecución del flujo de trabajo | references/color-and-contrast.md | Comienza con el archivo copiado más pequeño que cambia materialmente la ejecución |
| Contexto de soporte | references/interaction-design.md | Añade el siguiente archivo fuente copiado más relevante sin cargar todo el paquete |
| Decisión de entrega | ## Habilidades Relacionadas | Ayuda al operador a cambiar a una skill nativa más fuerte cuando la tarea se desvía |
Flujo de Trabajo
Este flujo de trabajo es intencionalmente editorial y operativo al mismo tiempo. Mantiene la fuente importada útil para el operador mientras satisface los estándares de admisión pública que alimentan el flujo ascendente del mejorador descendente.
- Confirmar el objetivo del usuario, el alcance del flujo de trabajo importado y si esta skill sigue siendo el enrutador correcto para la tarea.
- Leer los archivos de resumen y procedencia antes de cargar cualquier archivo de soporte ascendente copiado.
- Cargar solo las referencias, ejemplos, indicaciones o scripts que cambien materialmente el resultado para la solicitud actual.
- Ejecutar el flujo de trabajo ascendente mientras se mantiene la procedencia y los límites de origen explícitos en las notas de trabajo.
- Validar el resultado contra las expectativas ascendentes y la evidencia a la que se puede señalar en los archivos copiados.
- Escalar o entregar a una skill relacionada cuando el trabajo salga del centro de gravedad de este flujo de trabajo importado.
- Antes de fusionar o cerrar, registrar lo que se usó, lo que cambió y lo que el revisor aún necesita verificar.
Notas del Flujo de Trabajo Importado
Importado: Dirección de Diseño
Comprometerse con una dirección estética AUDACIOUS:
- Propósito: ¿Qué problema resuelve esta interfaz? ¿Quién la usa?
- Tono: Elegir un extremo: brutalmente minimalista, caos maximalista, retro-futurista, orgánico/natural, lujo/refinado, juguetón/tipo juguete, editorial/revista, brutalista/crudo, art déco/geométrico, suave/pastel, industrial/utilitario, etc. Hay tantas opciones para elegir. Usa estas para inspiración, pero diseña una que sea fiel a la dirección estética.
- Restricciones: Requisitos técnicos (framework, rendimiento, accesibilidad).
- Diferenciación: ¿Qué hace que sea INOLVIDABLE? ¿Qué es lo único que alguien recordará?
CRÍTICO: Elegir una dirección conceptual clara y ejecutarla con precisión. Tanto el maximalismo audaz como el minimalismo refinado funcionan: la clave es la intencionalidad, no la intensidad.
Luego implementar código funcional que sea:
- De grado profesional y funcional
- Visualmente impactante y memorable
- Cohesivo con un punto de vista estético claro
- Meticulosamente refinado en cada detalle
Ejemplos
Ejemplo 1: Solicitar el flujo de trabajo ascendente directamente
Usa @frontend-design para manejar <tarea>. Comienza desde el flujo de trabajo ascendente copiado, carga solo los archivos que cambian el resultado y mantén la procedencia visible en la respuesta.
Explicación: Este es el punto de partida más seguro cuando el operador necesita el flujo de trabajo importado, pero no todo el repositorio.
Ejemplo 2: Solicitar una revisión basada en procedencia
Revisa @frontend-design según metadata.json y ORIGIN.md, luego explica qué archivos ascendentes copiados cargarías primero y por qué.
Explicación: Úsalo antes de la revisión o la resolución de problemas cuando necesites una explicación precisa y auditable del origen y la selección de archivos.
Ejemplo 3: Reducir los archivos de soporte copiados antes de la ejecución
Usa @frontend-design para <tarea>. Carga solo las referencias, ejemplos o scripts copiados que cambien el resultado, y nombra los archivos explícitamente antes de proceder.
Explicación: Esto mantiene la skill alineada con la divulgación progresiva en lugar de cargar todo el paquete copiado por defecto.
Ejemplo 4: Crear un paquete de revisión
Revisa @frontend-design usando los archivos ascendentes copiados más la procedencia, luego resume cualquier brecha antes de la fusión.
Explicación: Esto es útil cuando la PR está esperando revisión humana y deseas un paquete de auditoría repetible.
Notas de Uso Importadas
Importado: Ejemplos
Ejemplo 1: Página de aterrizaje con estética fuerte
El usuario dice: "Construye una página de aterrizaje para un producto de herramientas para desarrolladores, algo que no se parezca a todos los demás SaaS." Acciones: Elegir una dirección audaz (por ejemplo, brutalista o editorial); elegir una combinación tipográfica distintiva y una paleta cohesiva; implementar con espaciado fluido y un punto focal claro; evitar cartas dentro de cartas y clichés de métricas de héroe. Resultado: Un diseño de una sola página con jerarquía clara, tipografía memorable y sin señales genéricas de IA (sin gradientes morados, sin tarjetas redondeadas con bordes gruesos de acento).
Ejemplo 2: Tablero o interfaz de aplicación
El usuario dice: "Crea un tablero para ver análisis con un tema oscuro." Acciones: Comprometerse a una estética oscura específica (por ejemplo, oscuro refinado con neutros tintados, no el brillo predeterminado sobre negro); usar consultas de contenedor para los paneles; añadir un momento de movimiento considerado (por ejemplo, carga escalonada de lista); asegurarse de que los estados vacíos sean útiles. Resultado: Tablero funcional que se siente intencionalmente diseñado: paleta distintiva, sin brillo cian/morado, jerarquía de datos clara y comportamiento responsivo.
Ejemplo 3: Cartel o artefacto de marketing
El usuario dice: "Haz un cartel para una charla de conferencia sobre rendimiento frontend." Acciones: Elegir un concepto tipográfico o visual fuerte; usar una escala tipográfica modular y una paleta limitada; evitar el diseño genérico de foto de stock + titular. Resultado: Un cartel que podría mantenerse por sí solo como un artefacto diseñado: tipografía y composición memorables, no un relleno de plantilla.
Mejores Prácticas
Tratar la skill pública generada como una capa de empaquetado revisable alrededor del repositorio ascendente. El objetivo es mantener la procedencia explícita y cargar solo el material fuente copiado que mejora materialmente la ejecución.
-
Tipografía → Consultar la referencia de tipografía para escalas, combinaciones y estrategias de carga.
- Elegir fuentes que sean hermosas, únicas e interesantes.
- Combinar una fuente decorativa distintiva con una fuente de cuerpo refinada.
- HACER: Usar una escala tipográfica modular con tamaño fluido (clamp) HACER: Variar pesos y tamaños de fuente para crear una jerarquía visual clara NO HACER: Usar fuentes demasiado usadas: Inter, Roboto, Arial, Open Sans, predeterminadas del sistema NO HACER: Usar tipografía monoespaciada como abreviatura perezosa para vibraciones "técnico/desarrollador" NO HACER: Poner iconos grandes con esquinas redondeadas encima de cada encabezado: rara vez añaden valor y hacen que los sitios parezcan plantillas
-
Color y Tema → Consultar la referencia de color para OKLCH, paletas y modo oscuro.
- Comprometerse a una paleta cohesiva.
- Los colores dominantes con acentos nítidos superan a las paletas tímidas y distribuidas uniformemente.
- HACER: Usar funciones modernas de color CSS (oklch, color-mix, light-dark) para paletas perceptualmente uniformes y mantenibles HACER: Teñir los neutros hacia el tono de la marca: incluso un sutil toque crea cohesión subconsciente NO HACER: Usar texto gris sobre fondos de color: se ve deslavado; usar un tono del color de fondo en su lugar NO HACER: Usar negro puro (#000) o blanco puro (#fff): siempre teñir; el negro/blanco puro nunca aparece en la naturaleza NO HACER: Usar la paleta de colores de IA: cian sobre oscuro, gradientes de púrpura a azul, acentos neón sobre fondos oscuros NO HACER: Usar texto degradado para "impacto", especialmente en métricas o encabezados; es decorativo más que significativo NO HACER: Usar modo oscuro por defecto con acentos brillantes: se ve "cool" sin requerir decisiones de diseño reales
-
Layout y Espacio → Consultar la referencia espacial para cuadrículas, ritmo y consultas de contenedor.
Notas de Operación Importadas
Importado: Pautas de Estética Frontend
Tipografía
→ Consultar referencia de tipografía para escalas, combinaciones y estrategias de carga.
Elegir fuentes que sean hermosas, únicas e interesantes. Combinar una fuente decorativa distintiva con una fuente de cuerpo refinada.
HACER: Usar una escala tipográfica modular con tamaño fluido (clamp) HACER: Variar pesos y tamaños de fuente para crear una jerarquía visual clara NO HACER: Usar fuentes demasiado usadas: Inter, Roboto, Arial, Open Sans, predeterminadas del sistema NO HACER: Usar tipografía monoespaciada como abreviatura perezosa para vibraciones "técnico/desarrollador" NO HACER: Poner iconos grandes con esquinas redondeadas encima de cada encabezado: rara vez añaden valor y hacen que los sitios parezcan plantillas
Color y Tema
→ Consultar referencia de color para OKLCH, paletas y modo oscuro.
Comprometerse a una paleta cohesiva. Los colores dominantes con acentos nítidos superan a las paletas tímidas y distribuidas uniformemente.
HACER: Usar funciones modernas de color CSS (oklch, color-mix, light-dark) para paletas perceptualmente uniformes y mantenibles HACER: Teñir los neutros hacia el tono de la marca: incluso un sutil toque crea cohesión subconsciente NO HACER: Usar texto gris sobre fondos de color: se ve deslavado; usar un tono del color de fondo en su lugar NO HACER: Usar negro puro (#000) o blanco puro (#fff): siempre teñir; el negro/blanco puro nunca aparece en la naturaleza NO HACER: Usar la paleta de colores de IA: cian sobre oscuro, gradientes de púrpura a azul, acentos neón sobre fondos oscuros NO HACER: Usar texto degradado para "impacto", especialmente en métricas o encabezados; es decorativo más que significativo NO HACER: Usar modo oscuro por defecto con acentos brillantes: se ve "cool" sin requerir decisiones de diseño reales
Layout y Espacio
→ Consultar referencia espacial para cuadrículas, ritmo y consultas de contenedor.
Crear ritmo visual a través de un espaciado variado, no el mismo relleno en todas partes. Adoptar la asimetría y las composiciones inesperadas. Romper la cuadrícula intencionalmente para enfatizar.
HACER: Crear ritmo visual a través de un espaciado variado: agrupaciones ajustadas, separaciones generosas HACER: Usar espaciado fluido con clamp() que respire en pantallas más grandes HACER: Usar asimetría y composiciones inesperadas; romper la cuadrícula intencionalmente para enfatizar NO HACER: Envolver todo en cartas: no todo necesita un contenedor NO HACER: Anidar cartas dentro de cartas: ruido visual, aplanar la jerarquía NO HACER: Usar cuadrículas de cartas idénticas: cartas del mismo tamaño con icono + encabezado + texto, repetidas sin fin NO HACER: Usar la plantilla de diseño de métrica de héroe: número grande, etiqueta pequeña, estadísticas de soporte, acento degradado NO HACER: Centrar todo: el texto alineado a la izquierda con diseños asimétricos se siente más diseñado NO HACER: Usar el mismo espaciado en todas partes: sin ritmo, los diseños se sienten monótonos
Detalles Visuales
HACER: Usar elementos decorativos intencionales y con propósito que refuercen la marca NO HACER: Usar glassmorphism en todas partes: efectos de desenfoque, cartas de vidrio, bordes brillantes usados decorativamente en lugar de con propósito NO HACER: Usar elementos redondeados con borde grueso de color en un lado: un acento perezoso que casi nunca se ve intencional NO HACER: Usar sparklines como decoración: gráficos diminutos que parecen sofisticados pero no transmiten nada significativo NO HACER: Usar rectángulos redondeados con sombras paralelas genéricas: seguro, olvidable, podría ser cualquier salida de IA NO HACER: Usar modales a menos que realmente no haya mejor alternativa: los modales son perezosos
Movimiento
→ Consultar referencia de movimiento para temporización, facilidad y movimiento reducido.
Centrarse en momentos de alto impacto: una carga de página bien orquestada con revelaciones escalonadas crea más deleite que micro-interacciones dispersas.
HACER: Usar movimiento para transmitir cambios de estado: entradas, salidas, retroalimentación HACER: Usar facilidad exponencial (ease-out-quart/quint/expo) para una desaceleración natural HACER: Para animaciones de altura, usar transiciones de grid-template-rows en lugar de animar la altura directamente NO HACER: Animar propiedades de layout (ancho, alto, relleno, margen): usar solo transform y opacidad NO HACER: Usar facilidad de rebote o elástica: se sienten anticuadas y de mal gusto; los objetos reales desaceleran suavemente
Interacción
→ Consultar referencia de interacción para formularios, enfoque y patrones de carga.
Hacer que las interacciones se sientan rápidas. Usar UI optimista: actualizar inmediatamente, sincronizar después.
HACER: Usar divulgación progresiva: comenzar simple, revelar sofisticación a través de la interacción (opciones básicas primero, avanzadas detrás de secciones expandibles; ho...