moulkefta/Claude-Skills

Habilidad de Frontend de Alto Rendimiento

1. CONFIGURACIÓN DE LÍNEA BASE ACTIVA

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

Instrucción para IA: La línea base estándar para todas las generaciones está estrictamente establecida en estos valores (8, 6, 4). No le preguntes al usuario que edite este archivo. De lo contrario, ESCUCHA SIEMPRE al usuario: adapta estos valores dinámicamente según lo que solicite explícitamente en sus instrucciones 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 POR DEFECTO

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 (p.ej. framer-motion, lucide-react, zustand), DEBES verificar package.json. Si el paquete falta, DEBES mostrar el comando de instalación (p.ej. npm install nombre-del-paquete) antes de proporcionar el código. Nunca asumas que una biblioteca existe.
• Framework e Interactividad: React o Next.js. Por defecto, usa 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.
• Gestión de 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% de los estilos.
  • BLOQUEO DE VERSIÓN DE TAILWIND: Verifica package.json primero. No uses sintaxis 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 interrupción (sm, md, lg, xl).
  • Contiene los diseños de página usando max-w-[1400px] mx-auto o max-w-7xl.
  • Estabilidad de la Ventana [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-Matemáticas: NUNCA uses matemáticas complejas de porcentaje con flexbox (w-[calc(33%-1rem)]). USA SIEMPRE CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) para estructuras fiables.
• Iconos: DEBES usar exactamente @phosphor-icons/react o @radix-ui/react-icons como rutas de importación (verifica la versión instalada). Estandariza strokeWidth globalmente (p.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

• Títulos/Encabezados: Por defecto, usa text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-IMPROVISACIÓN: 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 Dashboard/Software. Para estos contextos, usa exclusivamente combinaciones Sans-Serif de alta gama (Geist + Geist Mono o Satoshi + JetBrains Mono).
• Cuerpo/Párrafos: Por defecto, usa 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 "Púrpura/Azul IA" está ESTRICTAMENTE PROHIBIDA. Sin brillos de botones morados, sin degradados de neón. Usa bases neutras absolutas (Zinc/Slate) con acentos únicos de alto contraste (p.ej., 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 DESIGN_VARIANCE > 4. Fuerza 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-Abuso de Tarjetas"

• ENDURECIMIENTO DE DASHBOARD: Para VISUAL_DENSITY > 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 necesaria.
• 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: Cargadores esqueléticos 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: Reporte de errores claro e inline (p.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 sobre el input. El texto de ayuda es opcional pero debe existir el marcado. El texto de error debajo del input. Usa un gap-2 estándar para los bloques de input.

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

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 glassmorfismo, ve más allá de backdrop-blur. Añade 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 del borde físico.
• Microfísica Magnética (Si MOTION_INTENSITY > 5): Implementa botones que se acerquen ligeramente al cursor del ratón. CRÍTICO: NUNCA uses useState de React para hover magnético o animaciones continuas. Usa EXCLUSIVAMENTE useMotionValue y useTransform de Framer Motion fuera del ciclo de renderizado de React para prevenir el colapso de rendimiento en móviles.
• Microinteracciones Perpetuas: Cuando MOTION_INTENSITY > 5, integra microanimaciones continuas e infinitas (Latido, Máquina de Escribir, Flotación, Brillo, Carrusel) en componentes estándar (avatares, puntos de estado, fondos). Aplica Física de Muelle 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 reordenamientos, redimensionamientos y transiciones de elementos compartidos suaves 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 Componentes de Cliente. Si los datos se obtienen asincrónicamente, pása los datos como props a un envoltorio Motion Padre centralizado.

5. BARRERAS DE PROTECCIÓN DE RENDIMIENTO

• Costo DOM: Aplica filtros de grano/ruido exclusivamente a pseudo-elementos fijos y con pointer-events: none (p.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 z-50 o z-10 arbitrarios sin que se te solicite. Usa í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): Usa superposición con margin-top: -2rem, relaciones de aspecto de imagen variadas (p.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 (p.ej., grid-template-columns: 2fr 1fr 1fr), zonas de vacío masivas (padding-left: 20vw).
• ANULACIÓN MÓVIL: Para los niveles 4-10, cualquier diseño asimétrico por encima de md: DEBE volver 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): Usa transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1). Usa cascadas de animation-delay para 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 paralaje. Usa hooks de Framer Motion. NUNCA uses 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 de Mando): Rellenos pequeños. Sin cajas de tarjetas; solo líneas de 1px para separar datos. Todo está empaquetado. Obligatorio: Usa Monoespaciada (font-mono) para todos los números.

7. SEÑALES DE IA (Patrones Prohibidos)

Para garantizar una salida premium y no genérica, 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 Externos/Neón: No uses brillos de box-shadow predeterminados o auto-brillos. Usa bordes interiores 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 Degradado 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/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 Dashboards limpios.

Diseño y Espaciado

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

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

• NO a Nombres Genéricos: "Juan Pérez", "María García" o "Carlos López" están prohibidos. Usa nombres altamente creativos y de sonido realista.
• NO a Avatares Genéricos: NO uses el icono de usuario SVG "huevo" estándar o de Lucide para avatares. Usa marcadores de posición de fotos creativos y creíbles o estilos específicos.
• NO a 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 Nombres de Startups Genéricos: "Acme", "Nexus", "SmartFlow". Inventa nombres de marca premium y contextuales.
• NO a Palabras de Relleno: Evita los clichés de redacción de IA como "Elevar", "Sin fisuras", "Desatar" o "Next-Gen". Usa verbos concretos.

Recursos Externos y Componentes

• NO a Enlaces Rotos de Unsplash: No uses Unsplash. Usa marcadores de posición absolutos y fiables como https://picsum.photos/seed/{cadena_aleatoria}/800/600 o Avatares de UI SVG.
• 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 de alta gama del proyecto.
• 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 UI genéricas. Recurre a esta biblioteca de conceptos avanzados para asegurar que la salida 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 CSS básico. 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, envuelto en bloques de limpieza useEffect estrictos.

El Paradigma Estándar de Hero

• 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 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 acercan físicamente al cursor.
• Menú Pegajoso: Los sub-elementos se separan del botón principal como un líquido viscoso.
• Isla Dinámica: Un componente de 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 surge en una línea curva de acciones secundarias.
• Revelación de Mega Menú: Desplegables de pantalla completa que desvanecen contenido complejo de forma escalonada.

Diseños y Cuadrículas

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

[truncado para traducción]