joniii4k/main1

Habilidad de Frontend de Alta Agencia

1. CONFIGURACIÓN DE LÍNEA BASE ACTIVA

• VARIACIÓN_DISEÑO: 8 (1=Simetría Perfecta, 10=Caos Artístico)
• INTENSIDAD_MOVIMIENTO: 6 (1=Estático/Sin movimiento, 10=Cinematográfico/Física Mágica)
• DENSIDAD_VISUAL: 4 (1=Galería de Arte/Aireado, 10=Cabina de Piloto/Datos Apilados)

Instrucción para la IA: La línea base estándar para todas las generaciones se establece estrictamente en estos valores (8, 6, 4). No le pidas al usuario que edite este archivo. De lo contrario, SIEMPRE escucha al usuario: adapta estos valores dinámicamente según lo que solicite explícitamente en sus mensajes de chat. Usa estos valores de línea base (o los anulados por el usuario) como tus variables globales para impulsar la lógica específica en las Secciones 3 a 7.

2. ARQUITECTURA Y CONVENCIONES PREDETERMINADAS

A menos que el usuario especifique explícitamente una pila diferente, adhiérete a estas restricciones estructurales para mantener la consistencia:

• VERIFICACIÓN DE DEPENDENCIAS [OBLIGATORIO]: Antes de importar CUALQUIER biblioteca de terceros (ej. framer-motion, lucide-react, zustand), DEBES verificar package.json. Si falta el paquete, DEBES generar el comando de instalación (ej. npm install nombre-paquete) antes de proporcionar el código. Nunca asumas que una biblioteca existe.
• Framework e Interactividad: React o Next.js. Por defecto, Componentes de Servidor (RSC).
  • SEGURIDAD RSC: El estado global funciona SOLO en Componentes de Cliente. En Next.js, envuelve los proveedores en un componente con "use client".
  • AISLAMIENTO DE INTERACTIVIDAD: Si las Secciones 4 o 7 (Movimiento/Vidrio Líquido) están activas, el componente de UI interactivo específico DEBE extraerse como un componente hoja aislado con 'use client' en la parte superior. Los Componentes de Servidor deben renderizar exclusivamente diseños estáticos.
• Manejo del Estado: Usa useState/useReducer local para UI aislada. Usa estado global estrictamente para evitar la perforación profunda de props.
• Política de Estilos: Usa Tailwind CSS (v3/v4) para el 90% del estilo.
  • BLOQUEO DE VERSIÓN DE TAILWIND: Verifica package.json primero. No uses sintaxis de v4 en proyectos v3.
  • GUARDA DE CONFIGURACIÓN T4: Para v4, NO uses el plugin tailwindcss en postcss.config.js. Usa @tailwindcss/postcss o el plugin de Vite.
• POLÍTICA ANTI-EMOJI [CRÍTICA]: NUNCA uses emojis en código, marcado, contenido de texto o texto alternativo. Reemplaza los símbolos con iconos de alta calidad (Radix, Phosphor) o primitivas SVG limpias. Los emojis están PROHIBIDOS.
• Responsividad y Espaciado:
  • Estandariza los puntos de quiebre (sm, md, lg, xl).
  • Contiene los diseños de página usando max-w-[1400px] mx-auto o max-w-7xl.
  • Estabilidad del Viewport [CRÍTICA]: NUNCA uses h-screen para secciones Hero de altura completa. Usa SIEMPRE min-h-[100dvh] para evitar saltos de diseño catastróficos en navegadores móviles (Safari iOS).
  • Grid sobre Flex-Math: NUNCA uses porcentajes complejos de flexbox (w-[calc(33%-1rem)]). Usa SIEMPRE CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) para estructuras confiables.
• Iconos: DEBES usar exactamente las rutas de importación @phosphor-icons/react o @radix-ui/react-icons (verifica la versión instalada). Estandariza strokeWidth globalmente (ej., usa exclusivamente 1.5 o 2.0).

3. DIRECTRICES DE INGENIERÍA DE DISEÑO (Corrección de Sesgos)

Los LLMs tienen sesgos estadísticos hacia patrones de UI cliché específicos. Construye proactivamente interfaces premium utilizando estas reglas de ingeniería:

Regla 1: Tipografía Determinista

• Pantalla/Titulares: Por defecto, text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-DESCUIDO: Desaconseja Inter para vibras "Premium" o "Creativas". Fuerza un carácter único usando Geist, Outfit, Cabinet Grotesk o Satoshi.
  • REGLAS TÉCNICAS DE UI: Las fuentes Serif están ESTRICTAMENTE PROHIBIDAS para Interfaces de Tablero/Software. Para estos contextos, usa exclusivamente combinaciones Sans-Serif de alta gama (Geist + Geist Mono o Satoshi + JetBrains Mono).
• Cuerpo/Párrafos: Por defecto, text-base text-gray-600 leading-relaxed max-w-[65ch].

Regla 2: Calibración de Color

• Restricción: Máximo 1 Color de Acento. Saturación < 80%.
• LA PROHIBICIÓN LILA: La estética "Púrpura/Azul IA" está ESTRICTAMENTE PROHIBIDA. Sin brillos de botones morados, sin gradientes neón. Usa bases neutras absolutas (Zinc/Slate) con acentos únicos de alto contraste (ej. Verde Esmeralda, Azul Eléctrico, o Rosa Profundo).
• CONSISTENCIA DE COLOR: Mantente en una paleta para toda la salida. No fluctúes entre grises cálidos y fríos dentro del mismo proyecto.

Regla 3: Diversificación de Diseño

• SESGO ANTI-CENTRADO: Las secciones Hero/H1 centradas están ESTRICTAMENTE PROHIBIDAS cuando VARIACIÓN_DISEÑO > 4. Fomenta estructuras de "Pantalla Dividida" (50/50), "Contenido alineado a la izquierda/Activo alineado a la derecha" o "Espacio en blanco asimétrico".

Regla 4: Materialidad, Sombras y "Anti-Uso Excesivo de Tarjetas"

• ENDURECIMIENTO DE TABLERO: Para DENSIDAD_VISUAL > 7, los contenedores de tarjetas genéricos están ESTRICTAMENTE PROHIBIDOS. Usa agrupación lógica mediante border-t, divide-y, o espacio negativo puro. Las métricas de datos deben respirar sin estar encerradas en cajas a menos que la elevación (z-index) sea funcionalmente requerida.
• Ejecución: Usa tarjetas SOLO cuando la elevación comunique jerarquía. Cuando se use una sombra, tiñela del tono de fondo.

Regla 5: Estados de UI Interactivos

• Generación Obligatoria: Los LLMs generan naturalmente estados "exitosos" estáticos. DEBES implementar ciclos de interacción completos:
  • Carga: Esqueletos de carga que coincidan con los tamaños del diseño (evita los spinners circulares genéricos).
  • Estados Vacíos: Estados vacíos bellamente compuestos que indiquen cómo poblar los datos.
  • Estados de Error: Reportes de error claros y en línea (ej., formularios).
  • Retroalimentación Táctil: En :active, usa -translate-y-[1px] o scale-[0.98] para simular una pulsación física que indique éxito/acción.

Regla 6: Patrones de Datos y Formularios

• Formularios: La etiqueta DEBE estar encima del campo de entrada. El texto de ayuda es opcional pero debe existir en el marcado. El texto de error debajo del campo de entrada. Usa un gap-2 estándar para los bloques de entrada.

4. PROACTIVIDAD CREATIVA (Implementación Anti-Descuidada)

Para combatir activamente los diseños genéricos de IA, implementa sistemáticamente estos conceptos de codificación de alta gama como tu línea base:

• Refracción de "Vidrio Líquido": Cuando se necesite vidrio esmerilado, ve más allá de backdrop-blur. Agrega un borde interior de 1px (border-white/10) y una sombra interior sutil (shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]) para simular la refracción física del borde.
• Microfísica Magnética (Si INTENSIDAD_MOVIMIENTO > 5): Implementa botones que se acerquen ligeramente al cursor del ratón. CRÍTICO: NUNCA uses React useState para hover magnético o animaciones continuas. Usa EXCLUSIVAMENTE useMotionValue y useTransform de Framer Motion fuera del ciclo de renderizado de React para evitar el colapso del rendimiento en dispositivos móviles.
• Micro-Interacciones Perpetuas: Cuando INTENSIDAD_MOVIMIENTO > 5, incorpora micro-animaciones continuas e infinitas (Pulso, Máquina de Escribir, Flotación, Brillo, Carrusel) en componentes estándar (avatares, puntos de estado, fondos). Aplica Física de Resorte Premium (type: "spring", stiffness: 100, damping: 20) a todos los elementos interactivos—sin easing lineal.
• Transiciones de Diseño: Utiliza siempre las props layout y layoutId de Framer Motion para transiciones suaves de reordenamiento, redimensionamiento y elementos compartidos a través de cambios de estado.
• Orquestación Escalonada: No montes listas o cuadrículas instantáneamente. Usa staggerChildren (Framer) o cascada CSS (animation-delay: calc(var(--index) * 100ms)) para crear revelaciones secuenciales en cascada. CRÍTICO: Para staggerChildren, el Padre (variants) y los Hijos DEBEN residir en el mismo árbol de Componente Cliente. Si los datos se obtienen de forma asíncrona, pasa los datos como props a un envoltorio Motion Padre centralizado.

5. BARRERAS DE RENDIMIENTO

• Costo del DOM: Aplica filtros de grano/ruido exclusivamente a pseudo-elementos fijos, con punteros-evento-desactivados (ej., fixed inset-0 z-50 pointer-events-none) y NUNCA a contenedores con desplazamiento para evitar repintados continuos de GPU y degradación del rendimiento en móviles.
• Aceleración por Hardware: Nunca animes top, left, width o height. Anima exclusivamente mediante transform y opacity.
• Restricción de Z-Index: NUNCA uses arbitrariamente z-50 o z-10 sin que se solicite. Usa z-index estrictamente para contextos de capa sistémicos (Barras de Navegación Fijas, Modales, Superposiciones).

6. REFERENCIA TÉCNICA (Definiciones de Diales)

VARIACIÓN_DISEÑO (Nivel 1-10)

• 1-3 (Predecible): Flexbox justify-center, cuadrículas simétricas estrictas de 12 columnas, rellenos iguales.
• 4-7 (Desplazado): Usa superposición con margin-top: -2rem, relaciones de aspecto de imagen variadas (ej., 4:3 junto a 16:9), encabezados alineados a la izquierda sobre datos centrados.
• 8-10 (Asimétrico): Diseños Masonry, CSS Grid con unidades fraccionarias (ej., grid-template-columns: 2fr 1fr 1fr), zonas vacías masivas (padding-left: 20vw).
• ANULACIÓN MÓVIL: Para los niveles 4-10, cualquier diseño asimétrico por encima de md: DEBE degradarse agresivamente a un diseño estricto de una sola columna (w-full, px-4, py-8) en viewports < 768px para evitar el desplazamiento horizontal y la rotura del diseño.

INTENSIDAD_MOVIMIENTO (Nivel 1-10)

• 1-3 (Estático): Sin animaciones automáticas. Solo estados CSS :hover y :active.
• 4-7 (CSS Fluido): Usa transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Usa cascadas de animation-delay para las cargas. Concéntrate estrictamente en transform y opacity. Usa will-change: transform con moderación.
• 8-10 (Coreografía Avanzada): Revelaciones complejas activadas por desplazamiento o parallax. Usa hooks de Framer Motion. NUNCA uses window.addEventListener('scroll').

DENSIDAD_VISUAL (Nivel 1-10)

• 1-3 (Modo Galería de Arte): Mucho espacio en blanco. Grandes espacios entre secciones. Todo se siente muy caro y limpio.
• 4-7 (Modo App Diaria): Espaciado normal para aplicaciones web estándar.
• 8-10 (Modo Cabina): Rellenos pequeños. Sin cajas de tarjetas; solo líneas de 1px para separar datos. Todo está apretado. Obligatorio: Usa Monoespaciada (font-mono) para todos los números.

7. SEÑALES DE IA (Patrones Prohibidos)

Para garantizar un resultado premium y no genérico, DEBES evitar estrictamente estas firmas de diseño comunes de IA a menos que se soliciten explícitamente:

Visual y CSS

• NO a los Brillos Neón/Externos: No uses brillos predeterminados de box-shadow o auto-brillos. Usa bordes internos o sombras teñidas sutiles.
• NO al Negro Puro: Nunca uses #000000. Usa Negro Apagado, Zinc-950, o Carbón.
• NO a los Acentos Sobresaturados: Desatura los acentos para que se combinen elegantemente con los neutros.
• NO al Texto con Gradiente Excesivo: No uses degradados de relleno de texto para encabezados grandes.
• NO a los Cursores de Ratón Personalizados: Están desactualizados y arruinan el rendimiento/la accesibilidad.

Tipografía

• NO a la Fuente Inter: Prohibida. Usa Geist, Outfit, Cabinet Grotesk o Satoshi.
• NO a los H1 Sobredimensionados: El primer encabezado no debe gritar. Controla la jerarquía con peso y color, no solo con escala masiva.
• Restricciones Serif: Usa fuentes Serif SOLO para diseños creativos/editoriales. NUNCA uses Serif en Tableros limpios.

Diseño y Espaciado

• Alinear y Espaciar a la Perfección: Asegúrate de que el relleno y los márgenes sean matemáticamente perfectos. Evita elementos flotantes con espacios incómodos.
• NO a los Diseños de 3 Columnas con Tarjetas: La fila genérica de "3 tarjetas iguales horizontalmente" está PROHIBIDA. Usa un enfoque de Zig-Zag de 2 columnas, cuadrícula asimétrica o desplazamiento horizontal.

Contenido y Datos (El Efecto "Juan Pérez")

• NO a los Nombres Genéricos: "John Doe", "María García" o "Carlos López" están prohibidos. Usa nombres altamente creativos y de sonido realista.
• NO a los Avatares Genéricos: NO uses el SVG estándar de "huevo" o los iconos de usuario de Lucide para avatares. Usa marcadores de posición de fotos creativos y creíbles o estilos específicos.
• NO a los Números Falsos: Evita salidas predecibles como 99.99%, 50% o números de teléfono básicos (1234567). Usa datos orgánicos y desordenados (47.2%, +1 (312) 847-1928).
• NO a los Nombres de Startup Descuidados: "Acme", "Nexus", "SmartFlow". Inventa nombres de marca premium y contextuales.
• NO a las Palabras de Relleno: Evita los clichés de redacción de IA como "Elevar", "Sin fisuras", "Desatar" o "Próxima generación". Usa verbos concretos.

Recursos Externos y Componentes

• NO a los Enlaces Rotos de Unsplash: No uses Unsplash. Usa marcadores de posición absolutos y confiables como https://picsum.photos/seed/{cadena_aleatoria}/800/600 o Avatares SVG de UI.
• Personalización de shadcn/ui: Puedes usar shadcn/ui, pero NUNCA en su estado genérico predeterminado. DEBES personalizar los radios, colores y sombras para que coincidan con la estética del proyecto de alta gama.
• Limpieza Lista para Producción: El código debe ser extremadamente limpio, visualmente impactante, memorable y meticulosamente refinado en cada detalle.

8. EL ARSENAL CREATIVO (Inspiración de Alta Gama)

No recurras a la UI genérica. Recurre a esta biblioteca de conceptos avanzados para asegurar que el resultado sea visualmente impactante y memorable. Cuando sea apropiado, aprovecha GSAP (ScrollTrigger/Parallax) para scrolltelling complejo o ThreeJS/WebGL para animaciones 3D/Canvas, en lugar de movimiento básico con CSS. CRÍTICO: Nunca mezcles GSAP/ThreeJS con Framer Motion en el mismo árbol de componentes. Usa Framer Motion por defecto para interacciones de UI/Bento. Usa GSAP/ThreeJS EXCLUSIVAMENTE para scrolltelling de página completa aislado o fondos de canvas, envueltos en bloques estrictos de limpieza de useEffect.

El Paradigma Hero Estándar

• Deja de hacer texto centrado sobre una imagen oscura. Prueba secciones Hero asimétricas: Texto limpiamente alineado a la izquierda o a la derecha. El fondo debe presentar una imagen relevante de alta calidad con un desvanecimiento estilístico sutil (oscureciendo o aclarando gradualmente hacia el color de fondo dependiendo de si está en modo Claro u Oscuro).

Navegación y Menús

• Ampliación del Dock de Mac OS: Barra de navegación en el borde; los iconos escalan fluidamente al pasar el ratón.
• Botón Magnético: Botones que se acercan físicamente al cursor.
• Menú Pegajoso: Sub-elementos que se separan del botón principal como un líquido viscoso.
• Isla Dinámica: Un componente de UI en forma de píldora que se transforma para mostrar estado/alertas.
• Menú Radial Contextual: Un menú circular que se expande exactamente en las coordenadas del clic.
• Marcación Rápida Flotante: Un FAB que sale disparado en una línea curva de acciones secundarias.
• Revelación de Mega Menú: Menús desplegables de pantalla completa que muestran contenido complejo con atenuación escalonada.

Diseño y Cuadrículas

• Cuadrícula Bento: Agrupación asimétrica basada en mosaicos (ej., Centro de Control de Apple).
• Diseño Masonry: Cuadrícula escalonada sin alturas de fila fijas (ej., Pinterest).
• Cuadrícula Croma: Bordes de cuadrícula o mosaicos que muestran sutiles, continuamente...

[truncado para traducción]