Habilidad Frontend de Alto Rendimiento (v1)

¿Qué hace Habilidad Frontend de Alto Rendimiento (v1)?

1. CONFIGURACIÓN ACTIVA DE LÍNEA BASE

• DESVIACIÓN DE DISEÑO: 8 (1=Simetría Perfecta, 10=Caos Artístico)
• INTENSIDAD DE MOVIMIENTO: 6 (1=Estático/Sin movimiento, 10=Física Cinematográfica/Mágica)
• DENSIDAD VISUAL: 4 (1=Galería de Arte/Espacioso, 10=Cabina de Piloto/Datos Densos)

Instrucción para la IA: La línea base estándar para todas las generaciones está estrictamente establecida en estos valores (8, 6, 4). No preguntes al usuario si debe editar este archivo. De lo contrario, ESCUCHA SIEMPRE al usuario: adapta estos valores de forma dinámica según lo que solicite explícitamente en sus mensajes de chat. Utiliza 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 coherencia:

• VERIFICACIÓN DE DEPENDENCIAS [OBLIGATORIA]: Antes de importar CUALQUIER librería de terceros (ej. framer-motion, lucide-react, zustand), DEBES comprobar package.json. Si el paquete falta, DEBES mostrar el comando de instalación (ej. npm install nombre-del-paquete) antes de proporcionar el código. Nunca asumas que una librería existe.
• Framework e Interactividad: React o Next.js. Por defecto, usa Componentes de Servidor (RSC).
  • SEGURIDAD DE 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 UI interactivo específico DEBE extraerse como un componente hoja aislado con 'use client' al principio. Los Componentes de Servidor deben representar 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 primero package.json. No uses sintaxis v4 en proyectos v3.
  • GUARDA DE CONFIGURACIÓN DE T4: Para v4, NO uses el plugin tailwindcss en postcss.config.js. Usa @tailwindcss/postcss o el plugin de Vite.
• POLÍTICA ANTI-EMOJIS [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.
• Capacidad de Respuesta y Espaciado:
  • Estandariza los puntos de ruptura (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 en iOS).
  • Grid sobre Flex-Matemáticas: 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 fiables.
• Iconos: DEBES usar exactamente las rutas de importación @phosphor-icons/react o @radix-ui/react-icons (verifica la versión instalada). Estandariza el strokeWidth globalmente (ej., usa 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 específicos de UI cliché. Construye de forma proactiva interfaces premium utilizando estas reglas de ingeniería:

Regla 1: Tipografía Determinista

• Pantallas/Titulares: Por defecto, usa text-4xl md:text-6xl tracking-tighter leading-none.
  • ANTI-DESCOMPOSICIÓ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 "IA Púrpura/Azul" está ESTRICTAMENTE PROHIBIDA. Sin brillos de botones morados, sin gradientes neón. Usa bases neutras absolutas (Zinc/Pizarra) con acentos singulares de alto contraste (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 del Diseño

• ANTI-SESGO DE CENTRADO: Las secciones Hero/H1 centradas están ESTRICTAMENTE PROHIBIDAS cuando DESVIACIÓN DE DISEÑO > 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 DEL DASHBOARD: Para DENSIDAD VISUAL > 7, los contenedores genéricos de tarjetas 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, tintéala con el tono del fondo.

Regla 5: Estados de UI Interactivos

• Generación Obligatoria: Los LLM generan naturalmente estados "estáticos" exitosos. DEBES implementar ciclos de interacción completos:
  • Carga: Indicadores de carga 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: Informes de error claros en línea (ej., formularios).
  • Retroalimentación Táctil: Al :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 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-Decadencia)

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. 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 INTENSIDAD DE 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.
• Microinteracciones Perpetuas: Cuando INTENSIDAD DE MOVIMIENTO > 5, incrusta microanimaciones 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 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 reordenaciones, 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 árbol de Componentes de Cliente idéntico. Si los datos se obtienen de forma asíncrona, pasa los datos como props a un envoltorio central de Motion Padre.

5. BARRERAS DE RENDIMIENTO

• Costo del DOM: Aplica filtros de grano/ruido exclusivamente a pseudo-elementos fijos con pointer-events: none (ej., fixed inset-0 z-50 pointer-events-none) y NUNCA a contenedores con scroll para evitar repintados continuos de la 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 añadas z-50 o z-10 arbitrarios sin motivo. Usa z-index estrictamente para contextos de capa sistémica (Barras de Navegación Fijas, Modales, Superposiciones).

6. REFERENCIA TÉCNICA (Definiciones de Diales)

DESVIACIÓN DE DISEÑO (Nivel 1-10)

• 1-3 (Predecible): Flexbox justify-center, cuadrículas simétricas estrictas de 12 columnas, paddings iguales.
• 4-7 (Desplazado): Usa margin-top: -2rem superpuesto, 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 niveles 4-10, cualquier diseño asimétrico por encima de md: DEBE volverse 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 DE 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 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 scroll o paralaje. 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 huecos 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 Piloto): Paddings pequeños. Sin cajas de tarjetas; solo líneas de 1px para separar datos. Todo está empaquetado. Obligatorio: Usa Monospace (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 neón/externos: No uses brillos box-shadow predeterminados o auto-brillos. Usa bordes internos o sombras tintadas 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 mezclen elegantemente con los neutros.
• NO al Texto con Degradado Excesivo: No uses degradados de relleno de texto para titulares 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 paddings y márgenes sean matemáticamente perfectos. Evita elementos flotantes con huecos incómodos.
• NO a los Diseños de 3 Columnas de Tarjetas: La fila de características genérica de "3 tarjetas iguales en horizontal" está PROHIBIDA. Usa un enfoque de 2 columnas en zigzag, cuadrícula asimétrica o desplazamiento horizontal.

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

• NO a los Nombres Genéricos: "John Doe", "Sarah Chan" o "Jack Su" 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 Cursis: "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 y Componentes Externos

• NO a los 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 SVG UI Avatars.
• 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 premium 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 la UI genérica. Recurre a esta biblioteca de conceptos avanzados para garantizar que la salida sea visualmente impactante y memorable. Cuando sea apropiado, aprovecha GSAP (ScrollTrigger/Parallax) para narraciones complejas con scroll 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 UI/Bento. Usa GSAP/ThreeJS EXCLUSIVAMENTE para narraciones aisladas de página completa con scroll o fondos de Canvas, envueltos en bloques estrictos de limpieza useEffect.

El Paradigma Estándar del Héroe

• Deja de hacer texto centrado sobre una imagen oscura. Prueba secciones Hero asimétricas: Texto limpiamente alineado a la izquierda o 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 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 se escalan de forma fluida al pasar el ratón.
• Botón Magnético: Botones que se acercan físicamente al 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 emerge en una línea curva de acciones secundarias.
• Revelación de Mega Menú: Desplegables de pantalla completa que muestran contenido complejo con efecto escalonado.

Diseños 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 Chroma: Bordes de cuadrícula o mosaicos que muestran un bucle de gradiente sutil y continuo.

9. PROCEDIMIENTO DE CONFIGURACIÓN Y PRIMEROS PASOS

Para usar esta habilidad, los usuarios deben instalar la versión v1 por su nombre:

claude mcp add shawon-builds/Ai-skill

O configúrala en tu archivo de configuración del agente. Asegúrate de que el agente receptor tenga acceso de lectura al archivo SKILL.md completo para la inicialización.

10. MATRIZ DE COMPATIBILIDAD

Plataforma del Agente	Compatibilidad	Notas
Claude Code	✅ Total	Probado con la versión de la CLI.
Cursor	✅ Total	Funciona con la configuración de agente personalizada.
Codium	✅ Parcial	El cumplimiento de la política de emojis puede variar.
CodeGPT	❌ No	No hay soporte para instrucciones tan detalladas del sistema.
GitHub Copilot Chat	⚠️ Parcial	Puede usar las reglas para archivos de contexto.
Windsurf (Codeium)	✅ Total	Compatibilidad completa con la batería de reglas.

11. HISTORIAL DE VERSIONES

• v1 (Actual): Comportamiento original de taste-skill. Preservado para compatibilidad total hacia atrás. Documentación completa de reglas de diseño, sistema de diales y patrones prohibidos.
• v2 (Predeterminado): design-taste-frontend - La habilidad nueva y mejorada. Utiliza un enfoque modular y una sintaxis de reglas actualizada. No compatible con v1.