# Skills de Claude Code para webs, landings y diseño

Skills de Claude Code para crear landing pages, animar con GSAP, definir sistemas de diseño y revisar accesibilidad. Para diseñadores y equipos de producto.

Estas skills de Claude Code ayudan a construir y mejorar sitios web sin empezar de cero. Para arrancar, [crear una landing page orientada a conversión](https://skills.sgomez.dev/es/s/web--landing-page.md) escribe primero el texto y después la página, y [auditar la conversión de una web](https://skills.sgomez.dev/es/s/web--conversion-optimizer.md) propone cambios concretos de copy, diseño y confianza. Si ya tienes un sitio, [rediseñar una web existente](https://skills.sgomez.dev/es/s/redesign-skill.md) detecta los patrones genéricos y los sustituye.

La animación tiene varias skills con GSAP: [crear una experiencia de scroll](https://skills.sgomez.dev/es/s/web--gsap-scroll-experience.md), [construir un hero animado](https://skills.sgomez.dev/es/s/web--gsap-hero-cinematic.md), [animar texto letra a letra](https://skills.sgomez.dev/es/s/web--gsap-text-fx.md) o [hacer transiciones entre páginas](https://skills.sgomez.dev/es/s/web--gsap-page-transitions.md). Para la base visual, [definir un sistema de diseño](https://skills.sgomez.dev/es/s/web--design-system.md) fija tokens, tipografía y color, y [diseñar y pulir interfaces](https://skills.sgomez.dev/es/s/impeccable.md) trabaja la jerarquía y el detalle.

También hay revisión y publicación: [auditar la accesibilidad de una interfaz](https://skills.sgomez.dev/es/s/accessibility--a11y-audit.md) comprueba el cumplimiento de WCAG 2.1, [corregir problemas de accesibilidad](https://skills.sgomez.dev/es/s/accessibility--a11y-fix.md) los arregla, y [publicar en Vercel](https://skills.sgomez.dev/es/s/vercel-deploy.md) genera un enlace de vista previa. Cada una arranca con una petición en lenguaje natural dentro de Claude Code: describes la página o el problema y revisas lo que te devuelve.

Versión web: https://skills.sgomez.dev/es/web
Actualizado el 27 sept 2026

## Skills (62)

- [Auditoría de accesibilidad WCAG (/accessibility--a11y-audit)](https://skills.sgomez.dev/es/s/accessibility--a11y-audit.md): 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.
- [Corregir accesibilidad de la interfaz (/accessibility--a11y-fix)](https://skills.sgomez.dev/es/s/accessibility--a11y-fix.md): 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.
- [Crear una animación desde cero (/animate)](https://skills.sgomez.dev/es/s/animate.md): Decide si algo debe animarse y, si procede, escribe la animación con la curva, duración y propiedades adecuadas, con reduced motion incluido.
- [Animaciones para apps Expo (/animate-expo)](https://skills.sgomez.dev/es/s/animate-expo.md): Escribe animaciones para apps Expo y React Native con Reanimated y Gesture Handler: gestos, hojas inferiores, transiciones de pantalla y háptica.
- [Nombre de efectos de movimiento (/animation-vocabulary)](https://skills.sgomez.dev/es/s/animation-vocabulary.md): 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.
- [Diseño web fluido estilo Apple (/apple-design)](https://skills.sgomez.dev/es/s/apple-design.md): Aplica a la web los principios de interfaz de Apple: gestos, animaciones con resortes, transiciones interrumpibles, materiales translúcidos y tipografía.
- [Guía de Sonner, notificaciones toast (/ask-sonner)](https://skills.sgomez.dev/es/s/ask-sonner.md): Ayuda a instalar, usar, estilizar y depurar Sonner, la librería de toasts para React: Toaster, toasts de promesa, temas y posición.
- [Interfaces web brutalistas (/brutalist-skill)](https://skills.sgomez.dev/es/s/brutalist-skill.md): 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.
- [Componentes de interfaz accesibles (/building-components)](https://skills.sgomez.dev/es/s/building-components.md): Guía para construir componentes de interfaz accesibles y componibles: API, estado, design tokens, estilos, publicación en npm o registro y documentación.
- [Marca y diseño gráfico (/design)](https://skills.sgomez.dev/es/s/design.md): Cubre identidad de marca, tokens, logotipos, presentaciones, banners, iconos y fotos para redes sociales, apoyándose en habilidades hermanas y referencias.
- [Creación y auditoría de movimiento (/design-motion-principles)](https://skills.sgomez.dev/es/s/design-motion-principles.md): Construye componentes con movimiento útil o audita animaciones existentes con criterios de Emil Kowalski, Jakub Krehel y Jhey Tompkins.
- [Tokens y especificaciones de diseño (/design-system)](https://skills.sgomez.dev/es/s/design-system.md): Define tokens de diseño en tres capas (primitivo, semántico, componente), variables CSS, escalas y especificaciones de componentes; también genera diapositivas.
- [Pulido de interfaz y diseño (/emil-design-eng)](https://skills.sgomez.dev/es/s/emil-design-eng.md): 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.
- [Dónde conviene animar una interfaz (/find-animation-opportunities)](https://skills.sgomez.dev/es/s/find-animation-opportunities.md): 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.
- [Webs premium con GSAP (/gpt-tasteskill)](https://skills.sgomez.dev/es/s/gpt-tasteskill.md): 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.
- [GSAP: animaciones básicas (/gsap-core)](https://skills.sgomez.dev/es/s/gsap-core.md): 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.
- [GSAP en Vue y Svelte (/gsap-frameworks)](https://skills.sgomez.dev/es/s/gsap-frameworks.md): Explica cómo usar GSAP en Vue, Nuxt, Svelte y SvelteKit: ciclo de vida, selectores acotados y limpieza de animaciones al desmontar.
- [Rendimiento de animaciones GSAP (/gsap-performance)](https://skills.sgomez.dev/es/s/gsap-performance.md): Guía para que las animaciones GSAP vayan fluidas: preferir transforms, evitar el layout thrashing, usar will-change y agrupar cambios.
- [Plugins de GSAP (/gsap-plugins)](https://skills.sgomez.dev/es/s/gsap-plugins.md): Guía de los plugins de GSAP: registro, ScrollToPlugin, ScrollSmoother, Flip, Draggable, SplitText, plugins de SVG, CustomEase y GSDevTools.
- [GSAP en React y Next.js (/gsap-react)](https://skills.sgomez.dev/es/s/gsap-react.md): Explica cómo usar GSAP en React y Next.js con el hook useGSAP, refs, gsap.context() y limpieza al desmontar componentes.
- [Animaciones con scroll en GSAP (/gsap-scrolltrigger)](https://skills.sgomez.dev/es/s/gsap-scrolltrigger.md): Guía de ScrollTrigger para GSAP: animaciones ligadas al scroll, secciones fijadas, scrub, paralaje y disparadores.
- [Secuencias de animación con GSAP (/gsap-timeline)](https://skills.sgomez.dev/es/s/gsap-timeline.md): Guía de timelines de GSAP: gsap.timeline(), parámetro de posición, anidado y control de reproducción para encadenar animaciones.
- [Utilidades gsap.utils (/gsap-utils)](https://skills.sgomez.dev/es/s/gsap-utils.md): Guía de las funciones auxiliares de gsap.utils: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap y pipe.
- [Webs y apps con Higgsfield (/higgsfield-websites)](https://skills.sgomez.dev/es/s/higgsfield-websites.md): Crea, edita y publica webs, apps y juegos desde la CLI de Higgsfield, como app React y TanStack Start en un Cloudflare Worker.
- [Web en código desde imagen (/image-to-code-skill)](https://skills.sgomez.dev/es/s/image-to-code-skill.md): 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.
- [Imágenes de pantallas de apps (/imagegen-frontend-mobile)](https://skills.sgomez.dev/es/s/imagegen-frontend-mobile.md): 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.
- [Imágenes de diseño de landings (/imagegen-frontend-web)](https://skills.sgomez.dev/es/s/imagegen-frontend-web.md): Genera una imagen horizontal por cada sección de una web, con paleta coherente y variedad de composición, como referencia para programarla.
- [Diseñar y pulir interfaces web (/impeccable)](https://skills.sgomez.dev/es/s/impeccable.md): 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.
- [Auditoría y plan de animaciones (/improve-animations)](https://skills.sgomez.dev/es/s/improve-animations.md): Revisa el código de movimiento de un proyecto y entrega una auditoría priorizada con planes autocontenidos. Solo planifica, no modifica código.
- [Interfaces minimalistas editoriales (/minimalist-skill)](https://skills.sgomez.dev/es/s/minimalist-skill.md): Guía para diseñar interfaces limpias tipo documento: paleta monocroma cálida, contraste tipográfico, cuadrículas bento planas y pasteles suaves.
- [Código completo sin recortes (/output-skill)](https://skills.sgomez.dev/es/s/output-skill.md): Obliga a Claude a entregar archivos y respuestas completos, sin «resto igual» ni TODO, y a pausar con limpieza si no cabe todo.
- [Elegir librería de interfaz (/pick-ui-library)](https://skills.sgomez.dev/es/s/pick-ui-library.md): 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.
- [Variantes de un componente UI (/prototype)](https://skills.sgomez.dev/es/s/prototype.md): Crea varias versiones realmente distintas de una pieza de interfaz que describes y las muestra en un selector visual para que elijas la ganadora.
- [Rediseño de una web existente (/redesign-skill)](https://skills.sgomez.dev/es/s/redesign-skill.md): 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.
- [Revisión de animaciones (/review-animations)](https://skills.sgomez.dev/es/s/review-animations.md): 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.
- [Landing con vuelo por scroll (/scroll-world)](https://skills.sgomez.dev/es/s/scroll-world.md): 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.
- [Diseño web de agencia premium (/soft-skill)](https://skills.sgomez.dev/es/s/soft-skill.md): 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.
- [DESIGN.md para Google Stitch (/stitch-skill)](https://skills.sgomez.dev/es/s/stitch-skill.md): 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.
- [Frontend con criterio de diseño (/taste-skill)](https://skills.sgomez.dev/es/s/taste-skill.md): 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.
- [Interfaces con shadcn/ui y Tailwind (/ui-styling)](https://skills.sgomez.dev/es/s/ui-styling.md): Ayuda a construir interfaces accesibles con componentes shadcn/ui, estilos Tailwind CSS y diseños visuales en canvas: layouts, temas, modo oscuro y formularios.
- [Guía de diseño UI/UX (/ui-ux-pro-max)](https://skills.sgomez.dev/es/s/ui-ux-pro-max.md): 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.
- [Desplegar en Vercel (/vercel-deploy)](https://skills.sgomez.dev/es/s/vercel-deploy.md): 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.
- [Rendimiento en React y Next.js (/vercel-react-best-practices)](https://skills.sgomez.dev/es/s/vercel-react-best-practices.md): 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.
- [Componentes React animados (/web--animated-components)](https://skills.sgomez.dev/es/s/web--animated-components.md): 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).
- [Animaciones web cinematográficas (/web--animations)](https://skills.sgomez.dev/es/s/web--animations.md): Crea la animación web que pidas, como modelos 3D, scroll horizontal, WebGL, partículas o shaders, con foco en rendimiento GPU y accesibilidad.
- [Animaciones React nivel Awwwards (/web--awwwards-animations)](https://skills.sgomez.dev/es/s/web--awwwards-animations.md): Elige la herramienta adecuada (GSAP, Motion, Anime.js o Lenis) y crea animaciones React fluidas y accesibles: scroll, efectos magnéticos y revelados.
- [Auditoría de conversión web (/web--conversion-optimizer)](https://skills.sgomez.dev/es/s/web--conversion-optimizer.md): 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.
- [Pulido de interfaz y animación (/web--design-engineering)](https://skills.sgomez.dev/es/s/web--design-engineering.md): 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é.
- [Sistema de diseño completo (/web--design-system)](https://skills.sgomez.dev/es/s/web--design-system.md): Crea un sistema de diseño con criterio: tokens, tipografía, color y componentes, desde tu producto, su personalidad y tus colores de marca.
- [Diseño gráfico con IA (/web--graphic-design)](https://skills.sgomez.dev/es/s/web--graphic-design.md): 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.
- [Galerías animadas con GSAP (/web--gsap-creative-gallery)](https://skills.sgomez.dev/es/s/web--gsap-creative-gallery.md): Crea galerías de imágenes interactivas con GSAP: filtros con transiciones FLIP, scroll infinito, masonry animado y lightbox.
- [Héroe cinematográfico con GSAP (/web--gsap-hero-cinematic)](https://skills.sgomez.dev/es/s/web--gsap-hero-cinematic.md): 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.
- [Microinteracciones con GSAP (/web--gsap-micro-interactions)](https://skills.sgomez.dev/es/s/web--gsap-micro-interactions.md): Implementa en React microinteracciones con GSAP: cursor personalizado, botones magnéticos, tarjetas con inclinación, focos de luz e indicadores de scroll.
- [Transiciones de página con GSAP (/web--gsap-page-transitions)](https://skills.sgomez.dev/es/s/web--gsap-page-transitions.md): Crea transiciones entre páginas en React y Next.js con GSAP: barridos de overlay, elementos compartidos y animaciones de ruta coordinadas.
- [Pantallas de carga con GSAP (/web--gsap-preloader)](https://skills.sgomez.dev/es/s/web--gsap-preloader.md): Crea pantallas de carga animadas con GSAP: barras de progreso, contadores de porcentaje, logos animados, esqueletos y secuencias de entrada cinematográficas.
- [Animaciones de scroll con GSAP (/web--gsap-scroll-experience)](https://skills.sgomez.dev/es/s/web--gsap-scroll-experience.md): Crea experiencias guiadas por el scroll con GSAP ScrollTrigger: parallax, elementos fijados, scroll horizontal y animaciones ligadas al desplazamiento.
- [Animación de SVG con GSAP (/web--gsap-svg-morphing)](https://skills.sgomez.dev/es/s/web--gsap-svg-morphing.md): 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.
- [Efectos de texto con GSAP (/web--gsap-text-fx)](https://skills.sgomez.dev/es/s/web--gsap-text-fx.md): 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.
- [Landing page de alto nivel (/web--landing-page)](https://skills.sgomez.dev/es/s/web--landing-page.md): 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.
- [Arranque de una SPA profesional (/web--spa-scaffold)](https://skills.sgomez.dev/es/s/web--spa-scaffold.md): 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.
- [Componentes de interfaz cuidados (/web--ui-components-pro)](https://skills.sgomez.dev/es/s/web--ui-components-pro.md): Crea componentes de interfaz en React y TypeScript con animaciones, estados de carga y error, y accesibilidad incluida.
- [Revisión de interfaz web (/web-design-guidelines)](https://skills.sgomez.dev/es/s/web-design-guidelines.md): Revisa el código de tu interfaz contra las Web Interface Guidelines de Vercel y devuelve los incumplimientos por archivo y línea.