leonxlnx/taste-skill

Habilidad de Frontend de Alta Agencia (v1)

1. CONFIGURACIÓN ACTIVA DE LÍNEA BASE

• DESIGN_VARIANCE: 8 (1=Simetría Perfecta, 10=Caos Artístico)
• MOTION_INTENSITY: 6 (1=Estático/Sin movimiento, 10=Física Cinematográfica/Mágica)
• VISUAL_DENSITY: 4 (1=Galería de Arte/Aireada, 10=Cabina de Piloto/Datos Densos)

Instrucción para IA: La línea base estándar para todas las generaciones está estrictamente configurada a estos valores (8, 6, 4). No le pida al usuario que edite este archivo. De lo contrario, SIEMPRE escuche al usuario: adapte estos valores dinámicamente en función de lo que soliciten explícitamente en sus indicaciones de chat. Use estos valores de línea base (o anulados por el usuario) como 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érase a estas restricciones estructurales para mantener la consistencia:

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

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

Los LLM tienen sesgos estadísticos hacia patrones de UI cliché específicos. Construya de manera proactiva interfaces premium utilizando estas reglas de ingeniería:

Regla 1: Tipografía Determinista

• Títulos/Encabezados: Por defecto, use text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-DESPISTE: Desaliente Inter para vibraciones "Premium" o "Creativas". Fuerce 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 Dashboard/Software. Para estos contextos, use exclusivamente combinaciones Sans-Serif de alto nivel (Geist + Geist Mono o Satoshi + JetBrains Mono).
• Cuerpo/Párrafos: Por defecto, use 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 DEL LILA: La estética "IA Púrpura/Azul" está estrictamente PROHIBIDA. Sin brillos de botones púrpura, sin gradientes de neón. Use bases neutras absolutas (Zinc/Slate) con acentos singulares de alto contraste (por ejemplo, Esmeralda, Azul Eléctrico o Rosa Profundo).
• CONSISTENCIA DE COLOR: Cíñase a una paleta para toda la salida. No fluctúe entre grises cálidos y fríos dentro del mismo proyecto.

Regla 3: Diversificación del Diseño

• SESGO ANTI-CENTRADO: Las secciones Hero/H1 centradas están estrictamente PROHIBIDAS cuando DESIGN_VARIANCE > 4. Fuerce 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-Sobrecarga de Tarjetas"

• ENDURECIMIENTO DEL DASHBOARD: Para VISUAL_DENSITY > 7, los contenedores de tarjetas genéricas están estrictamente PROHIBIDOS. Use agrupación lógica mediante border-t, divide-y o espacio negativo puro. Las métricas de datos deben respirar sin estar encajonadas a menos que la elevación (z-index) sea funcionalmente requerida.
• Ejecución: Use tarjetas SOLO cuando la elevación comunique jerarquía. Cuando se use una sombra, tintéela al tono de fondo.

Regla 5: Estados de UI Interactivos

• Generación Obligatoria: Los LLM generan naturalmente estados "estáticos" exitosos. DEBE implementar ciclos de interacción completos:
  • Carga: Esqueletos de carga que coincidan con los tamaños del diseño (evite spinners circulares genéricos).
  • Estados Vacíos: Estados vacíos bellamente compuestos que indiquen cómo poblar los datos.
  • Estados de Error: Informes de error claros e inline (por ejemplo, en formularios).
  • Retroalimentación Táctil: En :active, use -translate-y-[1px] o scale-[0.98] para simular un empujón físico que indique éxito/acción.

Regla 6: Patrones de Datos y Formularios

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

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

Para combatir activamente los diseños genéricos de IA, implemente sistemáticamente estos conceptos de codificación de alto nivel como su línea base:

• Refracción de "Vidrio Líquido": Cuando se necesite vidrio esmerilado, vaya más allá de backdrop-blur. Agregue 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 MOTION_INTENSITY > 5): Implemente botones que se acerquen ligeramente al cursor del ratón. CRÍTICO: NUNCA use useState de React para hover magnético o animaciones continuas. Use EXCLUSIVAMENTE useMotionValue y useTransform de Framer Motion fuera del ciclo de renderizado de React para evitar la degradación del rendimiento en dispositivos móviles.
• Microinteracciones Perpetuas: Cuando MOTION_INTENSITY > 5, incruste microanimaciones continuas e infinitas (Pulso, Máquina de Escribir, Flotación, Destello, Carrusel) en componentes estándar (avatares, puntos de estado, fondos). Aplique Física Spring Premium (type: "spring", stiffness: 100, damping: 20) a todos los elementos interactivos, sin easing lineal.
• Transiciones de Diseño: Utilice siempre las propiedades layout y layoutId de Framer Motion para reordenamiento, redimensionamiento y transiciones de elementos compartidos suaves a través de cambios de estado.
• Orquestación Escalonada: No monte listas o cuadrículas instantáneamente. Use 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, páselos como props a un envoltorio Motion Padre centralizado.

5. BARRERAS DE PROTECCIÓN DE RENDIMIENTO

• Costo DOM: Aplique filtros de grano/ruido exclusivamente a pseudo-elementos fijos con pointer-events-none (por ejemplo, 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 dispositivos móviles.
• Aceleración por Hardware: Nunca anime top, left, width o height. Anime exclusivamente mediante transform y opacity.
• Restricción de Z-Index: NUNCA envíe spam de z-50 o z-10 arbitrarios sin motivo. Use índices Z estrictamente para contextos de capa sistémicos (Barras de Navegación Fijas, Modales, Superposiciones).

6. REFERENCIA TÉCNICA (Definiciones de Dial)

DESIGN_VARIANCE (Nivel 1-10)

• 1-3 (Predecible): Flexbox justify-center, cuadrículas simétricas estrictas de 12 columnas, rellenos iguales.
• 4-7 (Desplazado): Use superposición margin-top: -2rem, relaciones de aspecto de imagen variadas (por ejemplo, 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 (por ejemplo, grid-template-columns: 2fr 1fr 1fr), zonas vacías masivas (padding-left: 20vw).
• ANULACIÓN MÓVIL: Para niveles 4-10, cualquier diseño asimétrico por encima de md: DEBE retroceder 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.

MOTION_INTENSITY (Nivel 1-10)

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

VISUAL_DENSITY (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á empaquetado. Obligatorio: Use Monoespaciada (font-mono) para todos los números.

7. SEÑALES DE IA (Patrones Prohibidos)

Para garantizar una salida premium y no genérica, DEBE evitar estrictamente estas firmas de diseño comunes de IA a menos que se soliciten explícitamente:

Visuales y CSS

• SIN Brillos de Neón/Externos: No use brillos de box-shadow predeterminados o brillos automáticos. Use bordes interiores o sombras tintadas sutiles.
• SIN Negro Puro: Nunca use #000000. Use Negro Apagado, Zinc-950 o Carbón.
• SIN Acentos Sobresaturados: Desature los acentos para que se mezclen elegantemente con los neutros.
• SIN Texto con Gradiente Excesivo: No use gradientes de relleno de texto para encabezados grandes.
• SIN Cursores de Ratón Personalizados: Están desactualizados y arruinan el rendimiento/accesibilidad.

Tipografía

• SIN Fuente Inter: Prohibida. Use Geist, Outfit, Cabinet Grotesk o Satoshi.
• SIN H1 Sobredimensionados: El primer encabezado no debe gritar. Controle la jerarquía con peso y color, no solo con escala masiva.
• Restricciones de Serifa: Use fuentes Serif SOLO para diseños creativos/editoriales. NUNCA use Serif en Dashboards limpios.

Diseño y Espaciado

• Alinear y Espaciar Perfectamente: Asegúrese de que los rellenos y márgenes sean matemáticamente perfectos. Evite elementos flotantes con espacios incómodos.
• SIN Diseños de Tarjetas de 3 Columnas: La fila de características genérica "3 tarjetas iguales horizontalmente" está PROHIBIDA. Use un enfoque de 2 columnas en Zig-Zag, cuadrícula asimétrica o desplazamiento horizontal.

Contenido y Datos (El Efecto "Jane Doe")

• SIN Nombres Genéricos: "John Doe", "Sarah Chan" o "Jack Su" están prohibidos. Use nombres altamente creativos y de sonido realista.
• SIN Avatares Genéricos: NO use el SVG estándar "huevo" o iconos de usuario de Lucide para avatares. Use marcadores de posición de fotos creíbles y creativos o estilos específicos.
• SIN Números Falsos: Evite salidas predecibles como 99.99%, 50% o números de teléfono básicos (1234567). Use datos orgánicos y desordenados (47.2%, +1 (312) 847-1928).
• SIN Nombres de Startup Genéricos: "Acme", "Nexus", "SmartFlow". Invente nombres de marca premium y contextuales.
• SIN Palabras de Relleno: Evite los clichés de redacción de IA como "Elevar", "Sin fisuras", "Liberar" o "Next-Gen". Use verbos concretos.

Recursos Externos y Componentes

• SIN Enlaces Rotos de Unsplash: No use Unsplash. Use marcadores de posición confiables y absolutos como https://picsum.photos/seed/{cadena_aleatoria}/800/600 o Avatares SVG UI.
• Personalización de shadcn/ui: Puede usar shadcn/ui, pero NUNCA en su estado predeterminado genérico. DEBE personalizar los radios, colores y sombras para que coincidan con la estética del proyecto de alto nivel.
• 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 Alto Nivel)

No recurra a UI genérico. Recurra a esta biblioteca de conceptos avanzados para garantizar que la salida sea visualmente impactante y memorable. Cuando sea apropiado, aproveche GSAP (ScrollTrigger/Parallax) para narraciones complejas con desplazamiento o ThreeJS/WebGL para animaciones 3D/Canvas, en lugar de animaciones CSS básicas. CRÍTICO: Nunca mezcle GSAP/ThreeJS con Framer Motion en el mismo árbol de componentes. Use Framer Motion por defecto para interacciones UI/Bento. Use GSAP/ThreeJS EXCLUSIVAMENTE para narraciones con desplazamiento de página completa aisladas o fondos de canvas, envueltos en bloques estrictos de limpieza de useEffect.

El Paradigma Hero Estándar

• Deje de hacer texto centrado sobre una imagen oscura. Pruebe secciones Hero asimétricas: Texto alineado limpiamente a la izquierda o derecha. El fondo debe presentar una imagen relevante de alta calidad con un desvanecimiento estilístico sutil (oscureciendo o aclarando elegantemente hacia el color de fondo dependiendo de si es 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 atraen físicamente hacia el cursor.
• Menú Pegajoso: Los subelementos se separan del botón principal como un líquido viscoso.
• Isla Dinámica: Un componente UI con 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 salta formando 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ños y Cuadrículas

• Cuadrícula Bento: Agrupación asimétrica basada en mosaicos (por ejemplo, Centro de Control de Apple).
• Diseño Masonry: Cuadrícula escalonada sin alturas de fila fijas (por ejemplo, Pinterest).
• Cuadrícula Chroma: Bordes de cuadrícula o mosaicos que muestran cambios de color sutiles y continuos.