Webs con oficioWebs con oficio

Revisa el código de un componente o página y lista los fallos de accesibilidad WCAG 2.1, con su gravedad, el criterio incumplido y la corrección en código.

Lee un componente o página y corrige sus problemas de accesibilidad: HTML semántico, teclado, atributos ARIA y formularios, sin cambiar el diseño visual.

Decide si algo debe animarse y, si procede, escribe la animación con la curva, duración y propiedades adecuadas, con reduced motion incluido.

Escribe animaciones para apps Expo y React Native con Reanimated y Gesture Handler: gestos, hojas inferiores, transiciones de pantalla y háptica.

Convierte la descripción vaga de un efecto de movimiento web en su término exacto, para que sepas qué pedir a una IA o a un diseñador.

Aplica a la web los principios de interfaz de Apple: gestos, animaciones con resortes, transiciones interrumpibles, materiales translúcidos y tipografía.

Ayuda a instalar, usar, estilizar y depurar Sonner, la librería de toasts para React: Toaster, toasts de promesa, temas y posición.

Guía para diseñar webs brutalistas industriales: cuadrículas rígidas, tipografía de gran contraste y efectos analógicos, para dashboards o portfolios.

Guía para construir componentes de interfaz accesibles y componibles: API, estado, design tokens, estilos, publicación en npm o registro y documentación.

Cubre identidad de marca, tokens, logotipos, presentaciones, banners, iconos y fotos para redes sociales, apoyándose en habilidades hermanas y referencias.

Construye componentes con movimiento útil o audita animaciones existentes con criterios de Emil Kowalski, Jakub Krehel y Jhey Tompkins.

Define tokens de diseño en tres capas (primitivo, semántico, componente), variables CSS, escalas y especificaciones de componentes; también genera diapositivas.

Aplica la filosofía de Emil Kowalski sobre pulido de interfaz, animación y detalles invisibles, y revisa código de UI con tablas antes y después.

Recorre un código base o interfaz, propone como mucho 5-7 sitios donde el movimiento aporta y rechaza el resto. Solo lee, no modifica código.

Reglas de dirección de diseño para páginas con estructura AIDA, tipografía editorial, cuadrículas bento y animaciones de scroll con GSAP.

Guía de la API base de GSAP: to, from, fromTo, easing, duración, stagger y matchMedia para animación responsive y con movimiento reducido.

Explica cómo usar GSAP en Vue, Nuxt, Svelte y SvelteKit: ciclo de vida, selectores acotados y limpieza de animaciones al desmontar.

Guía para que las animaciones GSAP vayan fluidas: preferir transforms, evitar el layout thrashing, usar will-change y agrupar cambios.

Guía de los plugins de GSAP: registro, ScrollToPlugin, ScrollSmoother, Flip, Draggable, SplitText, plugins de SVG, CustomEase y GSDevTools.

Explica cómo usar GSAP en React y Next.js con el hook useGSAP, refs, gsap.context() y limpieza al desmontar componentes.

Guía de ScrollTrigger para GSAP: animaciones ligadas al scroll, secciones fijadas, scrub, paralaje y disparadores.

Guía de timelines de GSAP: gsap.timeline(), parámetro de posición, anidado y control de reproducción para encadenar animaciones.

Guía de las funciones auxiliares de gsap.utils: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap y pipe.

Crea, edita y publica webs, apps y juegos desde la CLI de Higgsfield, como app React y TanStack Start en un Cloudflare Worker.

Para webs donde el aspecto importa, genera primero imágenes de diseño por sección, las analiza y programa la web para que coincida con ellas.

Genera solo imágenes de pantallas y flujos de apps iOS o Android en marcos de móvil, con jerarquía clara y coherencia. No escribe código.

Genera una imagen horizontal por cada sección de una web, con paleta coherente y variedad de composición, como referencia para programarla.

Diseña, rediseña, critica o pule interfaces de webs y apps: jerarquía visual, tipografía, color, movimiento, accesibilidad y textos de la interfaz.

Revisa el código de movimiento de un proyecto y entrega una auditoría priorizada con planes autocontenidos. Solo planifica, no modifica código.

Guía para diseñar interfaces limpias tipo documento: paleta monocroma cálida, contraste tipográfico, cuadrículas bento planas y pasteles suaves.

Obliga a Claude a entregar archivos y respuestas completos, sin «resto igual» ni TODO, y a pausar con limpieza si no cabe todo.

Recomienda una única librería frontend para tu tarea (toasts, gráficos, arrastrar y soltar, OTP…) a partir de una lista curada de Emil Kowalski.

Crea varias versiones realmente distintas de una pieza de interfaz que describes y las muestra en un selector visual para que elijas la ganadora.

Audita una web o app ya hecha, detecta patrones genéricos de IA y aplica mejoras de diseño premium sin romper la funcionalidad ni reescribir todo.

Revisa código de animación y movimiento frente a un listón alto de calidad de Emil Kowalski; señala por defecto y solo aprueba si se lo gana.

Crea una landing en la que el scroll mueve una cámara que vuela de escena en escena sin cortes, con vídeos de Higgsfield y un motor de scroll propio.

Hace que Claude diseñe webs de aspecto caro: fija tipografías, espaciado, sombras, tarjetas y animaciones, y prohíbe los valores por defecto baratos.

Genera un archivo DESIGN.md con reglas de tipografía, color, layout y movimiento para que Google Stitch cree pantallas premium y no genéricas.

Lee tu briefing, infiere la dirección de diseño y crea landings, portfolios o rediseños que no parecen de plantilla, con auditoría previa en los rediseños.

Ayuda a construir interfaces accesibles con componentes shadcn/ui, estilos Tailwind CSS y diseños visuales en canvas: layouts, temas, modo oscuro y formularios.

Consulta una base local de estilos, paletas, tipografías, guías de UX e iconos para diseñar, revisar o corregir interfaces web, móviles y de escritorio.

Despliega tu aplicación o web en Vercel como vista previa y te devuelve el enlace; solo despliega a producción si lo pides de forma explícita.

Aplica 62 reglas de rendimiento de Vercel Engineering al escribir, revisar o refactorizar React y Next.js: cascadas de datos, tamaño de bundle y re-renders.

Integra en tu proyecto componentes React animados ya hechos: Magic UI (más de 150, sobre shadcn y Tailwind) y React Bits (más de 90 efectos).

Crea la animación web que pidas, como modelos 3D, scroll horizontal, WebGL, partículas o shaders, con foco en rendimiento GPU y accesibilidad.

Elige la herramienta adecuada (GSAP, Motion, Anime.js o Lenis) y crea animaciones React fluidas y accesibles: scroll, efectos magnéticos y revelados.

Audita una landing o app web y propone cambios concretos en copy, diseño, UX y confianza para que más visitantes se registren, compren o te contacten.

Aplica la filosofía de Emil Kowalski para pulir interfaces: decisiones de animación, detalles invisibles y revisiones en tabla Antes, Después y Por qué.

Crea un sistema de diseño con criterio: tokens, tipografía, color y componentes, desde tu producto, su personalidad y tus colores de marca.

Convierte un briefing en diseños HTML, CSS y SVG autocontenidos: maquetas, gráficos sociales, kits de marca, presentaciones e infografías, con tres variantes.

Crea galerías de imágenes interactivas con GSAP: filtros con transiciones FLIP, scroll infinito, masonry animado y lightbox.

Crea la cabecera de una web con GSAP: revelados por capas, parallax 3D, tipografía animada y vídeo de fondo, con alternativa para movimiento reducido.

Implementa en React microinteracciones con GSAP: cursor personalizado, botones magnéticos, tarjetas con inclinación, focos de luz e indicadores de scroll.

Crea transiciones entre páginas en React y Next.js con GSAP: barridos de overlay, elementos compartidos y animaciones de ruta coordinadas.

Crea pantallas de carga animadas con GSAP: barras de progreso, contadores de porcentaje, logos animados, esqueletos y secuencias de entrada cinematográficas.

Crea experiencias guiadas por el scroll con GSAP ScrollTrigger: parallax, elementos fijados, scroll horizontal y animaciones ligadas al desplazamiento.

Anima formas SVG con GSAP: trazado de rutas, morphing, iconos animados, formas orgánicas, divisores de onda y movimiento a lo largo de una ruta.

Crea tipografía cinética con GSAP en React: texto dividido por letras o palabras, scramble, glitch, rotación 3D, degradado animado y texto sobre curva.

Genera una landing page única y orientada a la conversión, con copy redactado primero y un proyecto Next.js completo; prohíbe los patrones típicos de IA.

Monta la estructura de una SPA lista para producción: elige el stack según tus requisitos y añade carga diferida, estados de error y accesibilidad.

Crea componentes de interfaz en React y TypeScript con animaciones, estados de carga y error, y accesibilidad incluida.

Revisa el código de tu interfaz contra las Web Interface Guidelines de Vercel y devuelve los incumplimientos por archivo y línea.