Elyfront

---
name: ely-frontend-stack
description: Coordinate frontend work across visual systems, responsive layout, components, motion, accessibility, performance, and browser QA. Use when building or improving a complete frontend or when the user requests Elyfront; select only the specialists needed for the task.
---

# Elyfront

Convertí una intención de producto en un frontend coherente y comprobable. Esta skill coordina decisiones y especialistas; no prescribe un framework, una estética ni una cantidad de secciones.

## Elegí el trabajo que hace falta

Revisá el pedido, el proyecto y las instrucciones locales. Identificá la tarea principal del visitante, los cambios autorizados, el diseño existente y la forma real de ejecutar la aplicación. Una corrección pequeña necesita una intervención pequeña; no la conviertas en una auditoría completa.

Usá [references/routing.md](references/routing.md) para elegir especialistas. Leé únicamente las skills que aportan a la tarea, buscando primero las carpetas hermanas del stack y después las skills disponibles en el entorno. Su ausencia no exige instalar herramientas externas ni bloquear un trabajo que puedas resolver directamente. No cargues las nueve skills por defecto.

Para una página nueva, fijá una dirección visual y construí temprano una porción que represente el producto. Para una existente, conservá estructura, marca y comportamiento salvo lo que el usuario quiera cambiar. Iterá sobre la misma implementación, sin generar alternativas completas que nadie pidió.

## Mantené una sola fuente de decisiones

Compartí entre los especialistas un acuerdo breve: usuario y tarea principal, alcance de esta entrega, lenguaje, stack existente, dirección visual, restricciones y criterios observables de aceptación. Guardalo en un documento del proyecto sólo si su duración o complejidad lo justifican; para un cambio breve basta el contexto de trabajo.

- **Dirección:** las decisiones visuales compartidas pertenecen al sistema de diseño. Los componentes consumen sus tokens; no crean una segunda paleta.
- **Estructura:** el layout define el flujo y los límites de ancho. La animación no debe corregir con transforms un layout roto.
- **Comportamiento:** el componente conserva sus estados, nombres accesibles y foco al animarse. Movimiento por eventos y secuencias largas de scroll son trabajos distintos.
- **Calidad:** accesibilidad y rendimiento orientan las decisiones pertinentes desde el principio. QA verifica riesgos concretos de la entrega; no agrega procesos ajenos al pedido.

Si dos guías entran en tensión, prevalecen las instrucciones explícitas del usuario, las reglas aplicables del proyecto y las necesidades del producto. Elegí una decisión concreta para esa tarea. No promedies recomendaciones incompatibles ni inventes una obligación de aprobación.

## Componé la implementación

Delegá sólo trabajos independientes con propiedad de archivos clara y un resultado verificable. Coordiná los contratos compartidos antes de repartir layout, componentes o estilos; dos agentes no deberían editar a la vez el mismo stylesheet. Un resultado de investigación puede volver al responsable de implementación sin tocar el código.

No agregues scroll cinematográfico, efectos, dependencias, rutas, formularios, autenticación o servicios sólo para ejercitar el stack. Un sitio sobrio puede necesitar diseño, layout y componentes; un ajuste de foco puede necesitar sólo accesibilidad.

Cuando el usuario pida una experiencia de scroll, incorporá Ely Scroll al flujo real de la página. Contá cada secuencia sostenida como una unidad; las apariciones escalonadas de sus elementos no son efectos independientes a efectos del alcance.

## Cerrá con evidencia

Comprobá los comportamientos afectados en el navegador disponible y los checks pertinentes del proyecto. Una landing con descargas debe descargar archivos reales; un formulario debe manejar los resultados que afirma soportar. Verificá los estados que cambiaste y las regresiones plausibles, sin exigir un test por cada detalle visual reversible.

Explicá qué cambió, qué comprobaste y cualquier límite material. Distinguí inspección visual, pruebas automatizadas y comportamiento no ejecutado. No inventes métricas, conversiones ni conformidad certificada.

Publicar, instalar o modificar un dominio depende de la autorización del usuario y del entorno. Esta skill no elige un proveedor ni amplía permisos por sí misma.