por Juanjo LunaWebs y apps
596 skills, de la más popular a la menos. Aquí tienes las 300 primeras; para el resto, usa el buscador.
-
Desarrollar con Angular
Te ayuda a generar código y guiar la arquitectura de Angular para componentes, servicios, formularios, inyección de dependencias, rutas, SSR, accesibilidad, animaciones, estilos y pruebas. Sirve cuando construyes apps Angular o herramientas de CLI.
-
Patrones de Compose Multiplatform
Aporta patrones de Compose Multiplatform y Jetpack Compose para proyectos KMP. Te sirve para gestionar estado, navegación, tema, rendimiento y UI específica de cada plataforma.
-
Patrones de Dart y Flutter
Recoge patrones listos para producción en Dart y Flutter sobre estado, navegación, temas, rendimiento, red y arquitectura limpia. Te ayuda a construir apps con prácticas sólidas y coherentes.
-
Patrones frontend para React y Next.js
Te ayuda a construir o revisar componentes de React y Next.js, estado de la aplicación y rendimiento de renderizado, cuando trabajas en interfaces web.
-
Patrones frontend con React y Next.js
Te ayuda a desarrollar interfaces con React y Next.js cuando necesitas mejorar la gestión del estado, el rendimiento y las buenas prácticas de la UI.
-
Patrones frontend con React y Next.js
Te ayuda a desarrollar interfaces con React y Next.js cuando necesitas mejorar la gestión del estado, el rendimiento y las buenas prácticas de la UI.
-
Aplicar patrones de frontend
Te ayuda a desarrollar interfaces con React y Next.js siguiendo buenas prácticas. Sirve para mejorar el rendimiento, la gestión de estado y la calidad general de la UI.
-
Usar Next.js con Turbopack
Te ayuda a decidir cuándo usar Turbopack o webpack en Next.js 16+, cuando quieres mejorar el empaquetado incremental y la velocidad de desarrollo.
-
Usar Turbopack en Next.js
Te ayuda a entender Next.js 16+ y Turbopack para compilar de forma incremental, usar caché en disco y acelerar el desarrollo. Sirve para decidir cuándo usar Turbopack en lugar de webpack.
-
Patrones Nuxt 4 seguros
Te ayuda a crear apps Nuxt 4 con carga diferida, reglas de ruta y obtención de datos segura para SSR. Sirve cuando quieres evitar problemas de hidratación y mejorar el rendimiento.
-
Patrones de React
Te ayuda a escribir componentes React modernos cuando necesitas usar hooks correctamente, separar componentes de servidor y cliente, gestionar datos y mejorar accesibilidad y rendimiento.
-
Crear artefactos web complejos
Crea artefactos HTML complejos para claude.ai con React, Tailwind CSS y shadcn/ui. Te sirve cuando necesitas una pieza web con varios componentes, estado o navegación, no una página simple.
-
Crear interfaces de usuario
Te ayuda a construir interfaces web accesibles, responsivas y listas para producción. Te sirve cuando creas o modificas pantallas, componentes y diseños que deben verse bien.
-
Crear interfaz de interacción de incidencias
Añade un nuevo tipo de interacción en hilos de incidencias de Paperclip de principio a fin. Sirve cuando el repositorio introduce tarjetas como solicitudes de confirmación, casillas o preguntas al usuario.
-
Guía de diseño de Paperclip
Te ayuda a crear y mantener componentes de interfaz coherentes con el sistema de diseño de Paperclip. Sirve cuando añades componentes, cambias páginas o quieres seguir las pautas visuales del frontend.
-
Mantener Storybook
Mantiene alineadas las historias de Paperclip con el mapa de funcionalidades y la interfaz real. Sirve para corregir desajustes, actualizar prototipos y ampliar la cobertura de historias.
-
Revisar historias de Storybook
Revisa historias de Paperclip para una funcionalidad usando Storybook, el código de producción y las pruebas del navegador. Sirve para separar evidencias de componentes, interacción y aspecto visual.
-
Diseñar webs con buen gusto
Te ayuda a diseñar, retocar o revisar páginas web con un estilo cuidado y menos genérico. Sirve para landings, webs de marketing, portfolios, páginas de producto y pantallas de apps que se ven demasiado planas o “hechas por IA”.
-
Crear widget de chat flotante
Te ayuda a crear un widget de chat flotante autónomo con pantalla de bienvenida, enlaces sociales, botón de reunión y campo para escribir mensajes. Sirve como archivo HTML único y sin dependencias.
-
Crear paneles de control
Te ayuda a crear un panel de administración o analítica en un solo archivo HTML. Sirve para pantallas con barra lateral, métricas, tablas y gráficos.
-
Diseñar paneles de citas
Te ayuda a crear un panel con aspecto de producto de consumo para citas o emparejamiento. Sirve cuando los datos y las señales de comunidad son la parte principal de la pantalla.
-
Panel FlowAI para equipos
Te ayuda a crear un panel interactivo de gestión de equipos con estilo FlowAI, tablas, gráficos, tema claro y oscuro y exportación a CSV. Sirve para administrar miembros, actividad y rendimiento del equipo.
-
Crear apps gamificadas
Te ayuda a diseñar un prototipo de app móvil con retos, experiencia, niveles y barra de progreso. Sirve para apps de hábitos, motivación o explicaciones con estilo de juego.
-
Pantalla de app móvil
Crea una pantalla de app móvil dentro de un marco realista de iPhone. Te sirve cuando necesitas maquetas de una app para iOS, Android o una pantalla de teléfono.
-
Flujo de onboarding móvil
Crea un flujo de bienvenida móvil con varias pantallas de registro y llamadas a la acción. Te sirve cuando quieres diseñar la entrada o alta de una app en el móvil.
-
Animación de UI con una sola forma
Crea una pieza animada en la que una sola forma cambia de botón a cargador, controles y paneles. Te sirve para mostrar transiciones de interfaz de forma limpia y rápida.
-
Página de inicio interactiva de OpenDesign
Crea una réplica fiel de la portada de open-design.ai con un héroe 3D, tipografías variables y animación al hacer scroll. Te sirve para mostrar el nivel visual de una web de marketing interactiva.
-
Landing editorial OpenDesign
Crea una página de inicio editorial de una sola página con un estilo visual muy cuidado. Te sirve para convertir un resumen de marca en una web de marketing lista para publicar.
-
Landing SaaS de una sola página
Crea una landing de SaaS con hero, funciones, prueba social, precios y llamada a la acción. Te sirve para presentar un producto o servicio en una web de marketing.
-
Prototipo web general
Crea un prototipo web de escritorio en un solo archivo HTML. Te sirve como opción por defecto para landings, páginas de marketing o documentación.
-
Prototipo web brutalista
Crea un prototipo web con estilo brutalista e inspiración industrial. Te sirve cuando quieres una web con tipografía fuerte, bloques duros y estética de imprenta.
-
Prototipo web editorial
Crea un prototipo web minimalista con aire editorial. Te sirve para páginas con mucho espacio en blanco, tipografía elegante y diseño sobrio.
-
Prototipo web suave
Crea un prototipo web con estética suave y redondeada. Te sirve para interfaces amables, luminosas y con movimiento sutil.
-
Experiencia visual en WebGL
Crea una experiencia visual en tiempo real con WebGL, shaders o escenas 3D. Te sirve cuando quieres gráficos generativos o animaciones de alto impacto en el navegador.
-
Mejorar interfaces frontend
Te ayuda a diseñar, revisar y pulir interfaces de webs y apps para mejorar experiencia, accesibilidad, jerarquía, color y contenido. Úsalo cuando quieras hacer una pantalla más clara, sólida o atractiva.
-
Diseñar interfaces frontend
Crea interfaces web, componentes y páginas con un acabado visual cuidado y apto para producción. Te sirve cuando quieres construir o mejorar una web, app o dashboard con buen diseño.
-
Revisar interfaz web
Revisa el código de una interfaz web para comprobar si cumple buenas prácticas de interfaz, accesibilidad y experiencia de uso. Te sirve cuando quieres auditar o mejorar una web.
-
Crear artefactos web complejos
Te ayuda a crear artefactos web complejos con varias partes usando React, Tailwind CSS y shadcn/ui. Sirve cuando necesitas una interfaz con estado, rutas o componentes avanzados.
-
Automatizar tareas en Brilliant Directories
Te ayuda a automatizar tareas de Brilliant Directories cuando necesitas gestionar este servicio desde otras herramientas. Conviene revisar primero los esquemas disponibles para usar los campos correctos.
-
Automatizar tareas en Bubble
Te ayuda a automatizar tareas de Bubble cuando necesitas gestionar este servicio desde otras herramientas. Conviene revisar primero los esquemas disponibles para usar los campos correctos.
-
Revisar página 404
Te ayuda a revisar plantillas, HTML renderizado o componentes compartidos de una página 404 personalizada. Sirve cuando quieres comprobar el resultado final que verá el navegador, no solo el código fuente.
-
Revisar página Acerca de
Te ayuda a auditar metadatos, rastreabilidad, datos estructurados e indexabilidad de una página Acerca de. Sirve cuando quieres verificar el HTML y la respuesta HTTP finales, no solo los archivos fuente.
-
Revisar notificaciones accesibles
Te ayuda a revisar plantillas, HTML renderizado o componentes compartidos de notificaciones. Sirve cuando quieres comprobar el resultado final que verá el navegador, no solo el código fuente.
-
Revisar tablas accesibles
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de un sistema de diseño relacionados con tablas semánticas para lectores de pantalla. Sirve cuando quieres comprobar la semántica, el teclado, el foco y los nombres accesibles.
-
Crear tooltips accesibles
Te ayuda a revisar plantillas, HTML renderizado o componentes compartidos de tooltips accesibles. Sirve cuando quieres comprobar el resultado final que verá el navegador, no solo el código fuente.
-
Revisar accesskey únicas
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para asegurar que los valores de accesskey no se repiten. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Hacer accesibles los acordeones
Te ayuda a revisar plantillas, HTML renderizado o componentes compartidos de acordeones navegables con teclado. Sirve cuando quieres comprobar el resultado final que verá el navegador, no solo el código fuente.
-
Revisar aviso de afiliación
Te ayuda a auditar metadatos, rastreabilidad, datos estructurados e indexabilidad para mostrar avisos claros de afiliación. Sirve cuando quieres verificar el HTML y la respuesta HTTP finales, no solo los archivos fuente.
-
Revisar páginas noindex
Te ayuda a auditar todas las páginas marcadas como noindex. Sirve cuando quieres verificar el HTML y la respuesta HTTP finales, no solo los archivos fuente.
-
Añadir texto alternativo a imágenes
Te ayuda a revisar imágenes, marcado y transformaciones de CDN o compilación para ofrecer texto alternativo útil. Sirve cuando quieres valorar el tamaño, la carga y el impacto visual de las imágenes, especialmente las que aparecen al principio de la página.
-
Revisar scroll suave en anclas
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para ofrecer una opción de scroll instantáneo en enlaces internos. Sirve cuando quieres comprobar la semántica, el teclado y el comportamiento del foco.
-
Optimizar GIF animados
Te ayuda a revisar cargas lentas de páginas, recursos pesados o retrasos de renderizado para convertir GIF animados a vídeo. Sirve cuando quieres identificar el cuello de botella real antes de recomendar cambios.
-
Mejorar rendimiento de animaciones
Te ayuda a revisar hojas de estilo, estilos de componentes y comportamiento adaptable para usar transform y opacity en las animaciones. Sirve cuando quieres comprobar el diseño renderizado en varios tamaños y estados antes de proponer una solución.
-
Revisar atributos ARIA permitidos
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para usar solo los atributos ARIA permitidos en cada rol. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Poner nombre accesible a comandos ARIA
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para dar nombres accesibles a elementos de comando ARIA. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Evitar roles ARIA obsoletos
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para no usar roles ARIA obsoletos. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Poner nombre a diálogos ARIA
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para asegurar que los diálogos tengan un nombre accesible. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Evitar aria-hidden en body
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para no usar aria-hidden en el cuerpo del documento. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Quitar foco de elementos ocultos
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para eliminar elementos con foco dentro de contenedores ocultos por aria-hidden. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Poner nombre a campos de formulario
Te ayuda a revisar campos de formulario nativos y widgets personalizados para que tengan un nombre accesible. Sirve cuando quieres comprobar formularios, cajas de texto, listas desplegables y controles similares.
-
Poner nombre a elementos interactivos
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para dar nombres accesibles a todos los elementos interactivos. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Anunciar contenido dinámico
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para anunciar contenido dinámico con regiones ARIA live. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Poner nombre a medidores
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para dar nombres accesibles a los elementos meter. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Poner nombre a barras de progreso
Te ayuda a revisar HTML renderizado, componentes interactivos o patrones de diseño para dar nombres accesibles a las barras de progreso. Sirve cuando quieres comprobar la semántica, el teclado y los nombres accesibles.
-
Añadir atributos ARIA obligatorios
Revisa componentes HTML interactivos para comprobar que incluyen los atributos ARIA obligatorios. Te sirve cuando necesitas validar la accesibilidad de controles personalizados o interfaces con roles ARIA.
-
Comprobar hijos ARIA obligatorios
Revisa widgets ARIA compuestos para asegurar que cada rol tenga los elementos hijos que exige. Te sirve cuando sustituyes listas, selectores o menús nativos por componentes hechos con div o span.
-
Comprobar padre ARIA obligatorio
Revisa componentes HTML interactivos para confirmar que los roles ARIA están dentro del contenedor correcto. Te sirve cuando validas estructuras personalizadas que dependen de una jerarquía ARIA concreta.
-
Validar roles ARIA
Revisa HTML interactivo para comprobar que los valores de los roles ARIA son válidos. Te sirve cuando auditas componentes personalizados y quieres evitar errores de accesibilidad.
-
Evitar hijos enfocables en role text
Revisa elementos con role="text" para evitar que tengan hijos que se puedan enfocar. Te sirve cuando corriges problemas de accesibilidad en componentes con texto y controles mezclados.
-
Poner nombre a campos conmutables
Revisa campos de activación para comprobar que tienen un nombre accesible claro. Te sirve cuando validas interruptores, casillas o controles similares y quieres que se entiendan bien con lector de pantalla.
-
Poner nombre a tooltips
Revisa tooltips para asegurar que tienen un nombre accesible. Te sirve cuando auditas componentes de ayuda emergente y necesitas que se identifiquen correctamente con tecnologías de asistencia.
-
Nombrar elementos de árbol ARIA
Revisa árboles personalizados para comprobar que cada elemento del árbol tiene un nombre accesible. Te sirve cuando construyes exploradores de archivos, menús anidados u otras vistas jerárquicas.
-
Validar atributos ARIA
Revisa HTML interactivo para asegurar que los atributos ARIA son correctos y están bien usados. Te sirve cuando auditas accesibilidad en componentes personalizados o de diseño.
-
Validar valores de atributos ARIA
Revisa HTML interactivo para comprobar que los atributos ARIA usan valores correctos. Te sirve cuando validas componentes personalizados y quieres evitar configuraciones inválidas.
-
Añadir descripciones de audio
Revisa vídeos para añadir descripciones de audio de lo que ocurre en pantalla. Te sirve cuando quieres hacer el contenido más accesible para personas con discapacidad visual.
-
Evitar autofocus en formularios
Revisa formularios para evitar que un campo se enfoque automáticamente al abrir la página. Te sirve cuando quieres mejorar la usabilidad y la accesibilidad al entrar en una interfaz.
-
Evitar reproducción automática de medios
Revisa páginas para evitar que el audio o el vídeo se reproduzcan solos. Te sirve cuando quieres reducir molestias y mejorar la experiencia de uso.
-
Usar formato AVIF
Revisa imágenes y transformaciones de publicación para usar AVIF en navegadores modernos. Te sirve cuando quieres reducir peso sin perder de vista el impacto en la carga inicial.
-
Optimizar back-forward cache
Revisa la navegación para mejorar la restauración desde memoria del navegador. Te sirve cuando quieres que volver atrás o adelante sea más rápido y fluido.
-
Detectar enlaces bloqueados
Revisa HTML y JavaScript para encontrar enlaces o recursos bloqueados por listas de bloqueo de anuncios. Te sirve cuando necesitas evitar que parte de la página deje de cargarse para algunos usuarios.
-
Crear navegación breadcrumb accesible
Revisa plantillas y componentes para crear migas de pan accesibles. Te sirve cuando quieres que la navegación secundaria sea clara y usable con teclado y lector de pantalla.
-
Corregir imágenes rotas
Revisa imágenes y su carga para encontrar y arreglar recursos que no se muestran. Te sirve cuando quieres mejorar la experiencia y evitar huecos o errores visuales.
-
Auditar rendimiento en navegador
Revisa el rendimiento real en el navegador para encontrar el cuello de botella. Te sirve cuando necesitas medir la causa de una página lenta antes de proponer cambios.
-
Poner nombre a botones
Revisa botones para comprobar que tienen un nombre accesible claro. Te sirve cuando auditas interfaces interactivas y quieres que los botones se entiendan bien con tecnologías de asistencia.
-
Hacer accesibles los carruseles
Revisa carruseles para mejorar su accesibilidad en plantillas y componentes. Te sirve cuando quieres que se puedan usar mejor con teclado y lector de pantalla.
-
Limpiar comentarios de producción
Revisa plantillas y componentes para eliminar comentarios y código de depuración antes de publicar. Te sirve cuando quieres dejar el sitio más limpio y evitar información innecesaria en producción.
-
Diseño adaptable con contenedores
Revisa cómo adaptar componentes según el espacio real que tienen, no solo según la pantalla. Sirve cuando compruebas estilos y comportamiento responsive en distintos tamaños e ինտերacciones.
-
Hacer contenido sin CSS
Revisa que el significado de una página no dependa solo del estilo visual. Sirve cuando compruebas el orden del DOM, la estructura semántica y las relaciones entre formularios y contenido.
-
Priorizar imágenes críticas
Te ayuda a cargar antes las imágenes más importantes de la página. Sirve cuando revisas su tamaño, cómo se muestran y su impacto en lo que se ve al abrir la página.
-
Usar @property en CSS
Te ayuda a definir propiedades personalizadas tipadas para animaciones y sistemas de diseño. Sirve cuando quieres que ciertos errores de uso se vean claramente en CSS.
-
Limitar repintados con CSS
Revisa cómo usar contención CSS para reducir el área que se vuelve a pintar. Sirve cuando compruebas estilos y comportamiento responsive en distintos tamaños e interacciones.
-
Inline de CSS crítico
Te ayuda a incluir antes el CSS esencial para que la página se vea más rápido. Sirve cuando revisas estilos y comportamiento responsive en distintos tamaños e interacciones.
-
Usar variables CSS
Te ayuda a usar propiedades personalizadas de CSS como tokens de diseño. Sirve cuando revisas estilos y comportamiento responsive en distintos tamaños e interacciones.
-
Maquetar con CSS Grid
Te ayuda a crear diseños en dos dimensiones con CSS Grid. Sirve cuando revisas estilos y comportamiento responsive en distintos tamaños e interacciones.
-
Cargar CSS sin bloquear
Revisa cómo cargar CSS para no retrasar el renderizado inicial. Sirve cuando compruebas estilos y comportamiento responsive en distintos tamaños e interacciones.
-
Ordenar archivos CSS
Te ayuda a colocar los archivos CSS en el orden correcto para evitar problemas de estilo. Sirve cuando revisas estilos y comportamiento responsive en distintos tamaños e interacciones.
-
Añadir estilos de impresión
Te ayuda a crear una hoja de estilos para imprimir correctamente una página. Sirve cuando revisas estilos y comportamiento responsive en distintos tamaños e interacciones.
-
Reducir saltos de diseño
Revisa cómo evitar que el contenido se mueva mientras carga una página. Sirve cuando confirmas en datos reales cuál es el problema que provoca cambios de posición.
-
Accesibilidad en Web Components
Revisa que los componentes personalizados tengan buen soporte de accesibilidad. Sirve cuando compruebas ARIA, teclado y asociación con formularios en el código de un Web Component.
-
Estilos para modo oscuro
Te ayuda a adaptar los estilos al modo oscuro con prefers-color-scheme. Sirve cuando revisas estilos y comportamiento responsive en distintos tamaños e interacciones.
-
Ocultar elementos decorativos
Revisa que los elementos decorativos no molesten a lectores de pantalla ni al teclado. Sirve cuando inspeccionas la semántica, el foco y el nombre accesible de un componente.
-
Cargar scripts con defer y async
Te ayuda a cargar scripts sin bloquear la página al inicio. Sirve cuando revisas plantillas, HTML renderizado o componentes compartidos y quieres validar el marcado final del navegador.
-
Usar listas de definición
Revisa que las listas de definición estén construidas con la estructura correcta. Sirve cuando inspeccionas semántica, teclado, foco, nombres accesibles y salida en lector de pantalla.
-
Definir dimensiones de imágenes
Te ayuda a revisar imágenes y el código que las transforma para poner ancho y alto correctos. Sirve para evitar saltos de diseño y valorar si una imagen de adorno realmente afecta a la página.
-
Definir dirección del texto
Te ayuda a comprobar que el HTML final indique bien la dirección del texto para idiomas de derecha a izquierda. Sirve al revisar plantillas o componentes compartidos.
-
Maquetar listas de definiciones
Te ayuda a revisar listas de definiciones en HTML para que estén bien estructuradas. Sirve al comprobar componentes y su comportamiento con teclado y lectores de pantalla.
-
Comprobar el doctype HTML
Te ayuda a verificar que un documento HTML empiece con el doctype correcto. Sirve al revisar la plantilla raíz de sitios renderizados en servidor o páginas estáticas.
-
Reducir tamaño del DOM
Te ayuda a revisar páginas lentas para simplificar un DOM demasiado grande o complejo. Sirve cuando Lighthouse, DevTools o datos reales muestran que ese es el problema.
-
Hacer accesible el arrastre
Te ayuda a revisar componentes de arrastrar y soltar para que puedan usarse con accesibilidad. Sirve al comprobar el HTML final y su comportamiento real en el navegador.
-
Evitar IDs duplicados activos
Te ayuda a comprobar que los elementos activos no repitan IDs en el HTML final. Sirve al revisar componentes interactivos y su uso con teclado y lectores de pantalla.
-
Evitar IDs duplicados en ARIA
Te ayuda a comprobar que las referencias ARIA apunten a IDs únicos en el HTML final. Sirve al revisar componentes interactivos y su accesibilidad real.
-
Detectar bloqueos por adblockers
Te ayuda a revisar una web cuando reglas de bloqueo de anuncios rompen el diseño o funciones. Sirve para encontrar problemas causados por clases o IDs típicos de publicidad.
-
Evitar CSS embebido e inline
Te ayuda a revisar estilos para sacar el CSS embebido o en línea cuando perjudica el diseño. Sirve al comprobar la página en varios tamaños de pantalla y estados interactivos.
-
Corregir encabezados vacíos
Te ayuda a revisar que los encabezados tengan texto visible y útil. Sirve al comprobar componentes y su lectura con teclado y lectores de pantalla.
-
Corregir enlaces vacíos
Te ayuda a revisar enlaces rotos o sin contenido para que funcionen bien. Sirve al comprobar componentes y su lectura con teclado y lectores de pantalla.
-
Gestionar errores de imágenes
Te ayuda a manejar con cuidado los fallos de carga de imágenes. Sirve al revisar imágenes, su prioridad de carga y su impacto en la parte visible de la página.
-
Configurar favicon
Te ayuda a comprobar que un sitio tenga favicon bien configurado. Sirve al revisar los enlaces en el `<head>` o al preparar la infraestructura de iconos de un proyecto nuevo.
-
Implementar favicons para todos
Te ayuda a revisar el HTML final para que los favicons funcionen bien en todos los dispositivos. Sirve al comprobar plantillas o componentes compartidos.
-
Ajustar fetchpriority de recursos
Te ayuda a optimizar la carga de recursos importantes para mejorar el LCP. Sirve cuando quieres dar prioridad a lo que la página necesita antes para mostrarse más rápido.
-
Usar figure y figcaption
Te ayuda a revisar imágenes con pie de foto para que usen la estructura HTML adecuada. Sirve al comprobar el marcado y su impacto en la carga y en lo que se ve primero.
-
Hacer accesible la subida de archivos
Te ayuda a revisar formularios de subida de archivos para que sean accesibles. Sirve al comprobar el HTML final y su uso real con teclado y lectores de pantalla.
-
Mejorar nombres de archivos de imagen
Te ayuda a revisar nombres de imágenes para que describan mejor su contenido. Sirve al auditar recursos visuales y su tratamiento en la web.
-
Optimizar First Contentful Paint
Te ayuda a mejorar el tiempo en que aparece el primer contenido visible. Sirve cuando una página carga lenta por problemas reales detectados en DevTools, Lighthouse o datos de uso.
-
Evitar contenido parpadeante
Te ayuda a revisar contenido que parpadea para prevenir riesgos de convulsiones. Sirve al comprobar componentes y su comportamiento real en el navegador.
-
Aplicar patrones Flexbox
Te ayuda a revisar estilos y maquetación para usar Flexbox de forma correcta. Sirve al comprobar el diseño en distintos tamaños de pantalla y estados.
-
Gestionar el foco en interacciones
Te ayuda a controlar adónde va el foco cuando la interfaz cambia. Sirve al revisar componentes interactivos y su accesibilidad con teclado y lectores de pantalla.
-
Evitar foco oculto
Te ayuda a comprobar que menús fijos, banners o widgets no tapen el elemento enfocado. Sirve al revisar la navegación con teclado a zoom realista.
-
Ordenar el foco lógicamente
Te ayuda a revisar que el foco avance en un orden lógico por la interfaz. Sirve al comprobar componentes interactivos y su accesibilidad real.
-
Mostrar estilos de foco
Te ayuda a añadir indicadores de foco visibles y personalizados en los estilos. Sirve al revisar cómo se ven en distintos tamaños de pantalla y estados interactivos.
-
Revisar tamaños de fuente en CSS
Te ayuda a comprobar los valores de `font-size` en CSS, sobre todo en texto, etiquetas y menús. Úsalo cuando revises diseño móvil y accesibilidad.
-
Detectar varias etiquetas en campos
Te ayuda a revisar que cada campo de un formulario tenga una sola etiqueta. Úsalo cuando compruebes componentes o patrones de diseño con foco, navegación por teclado y lectores de pantalla.
-
Asociar etiquetas a campos
Te ayuda a comprobar que las etiquetas estén vinculadas correctamente con los controles de formulario. Úsalo cuando revises componentes o plantillas con comportamiento accesible.
-
Validar formularios accesibles
Te ayuda a revisar que los formularios se validen de forma accesible en el navegador. Úsalo cuando compruebes el HTML final que ve el usuario y no solo el código fuente del framework.
-
Poner título a iframes
Te ayuda a revisar que los iframes y frames tengan un título claro. Úsalo cuando compruebes componentes o plantillas con navegación por teclado y lectores de pantalla.
-
Auditar frontend con checklist global
Te ayuda a revisar cualquier proyecto frontend contra todo el corpus de reglas de la Front-End Checklist desde un único punto de entrada. Sirve cuando necesitas una auditoría amplia y centralizada del frontend.
-
Revisar frontend con checklist
Te ayuda a revisar código y páginas web con la Front-End Checklist para detectar problemas de accesibilidad, rendimiento, SEO, seguridad y otros aspectos del frontend. Sirve cuando estás escribiendo, revisando o publicando HTML, CSS o JavaScript, o cuando quieres auditar una URL pública.
-
Revisar jerarquía de encabezados
Te ayuda a comprobar que los encabezados sigan un orden lógico. Úsalo cuando revises plantillas o componentes con navegación por teclado y lectores de pantalla.
-
Corregir el orden de encabezados
Te ayuda a revisar que los encabezados aparezcan en un orden lógico. Úsalo cuando compruebes contenido renderizado, plantillas o componentes con accesibilidad.
-
Evitar scroll horizontal
Te ayuda a revisar diseños que se salen de la pantalla en móviles. Úsalo cuando compruebes reglas de ancho, desbordamiento y ajustes para pantallas pequeñas.
-
Usar elementos semánticos HTML5
Te ayuda a revisar plantillas y componentes para usar elementos HTML semánticos. Úsalo cuando compruebes el marcado final que verá el navegador.
-
Mantener enlaces idénticos coherentes
Te ayuda a revisar que los enlaces iguales lleven siempre al mismo destino. Úsalo cuando compruebes componentes o patrones de diseño con accesibilidad.
-
Evitar texto alternativo redundante
Te ayuda a revisar que el texto alternativo de las imágenes no repita información innecesaria. Úsalo cuando compruebes componentes o plantillas con accesibilidad.
-
Texto alternativo en botones imagen
Te ayuda a comprobar que los botones con imágenes tengan un texto alternativo correcto. Sirve cuando revisas componentes o HTML renderizado y necesitas validar su accesibilidad.
-
Tipos semánticos de input
Te ayuda a revisar que los campos de formulario usen el tipo correcto de entrada. Sirve cuando compruebas plantillas o componentes y quieres validar el HTML final que ve el navegador.
-
Optimizar interacción hasta pintar
Te ayuda a revisar por qué una página tarda en responder o en mostrar cambios tras una acción. Sirve cuando analizas cargas lentas, recursos pesados o retrasos de renderizado.
-
Reducir intersticiales
Te ayuda a revisar modales, avisos y pop-ups que pueden bloquear la página. Sirve cuando quieres evaluar su impacto en SEO y accesibilidad, como el foco y la gestión del teclado.
-
Corregir enlaces inválidos
Te ayuda a revisar que los enlaces de una página funcionen y tengan una dirección válida. Sirve especialmente en aplicaciones con mucho JavaScript o enlaces generados dinámicamente.
-
Reducir tamaño de JavaScript
Te ayuda a detectar si el peso de los archivos JavaScript está frenando una web. Sirve cuando analizas cargas lentas y quieres confirmar el problema en herramientas como DevTools o Lighthouse.
-
Evitar redirecciones JavaScript
Te ayuda a revisar si una página usa redirecciones hechas con JavaScript. Sirve cuando analizas lentitud de carga y quieres comprobar si ese cambio está empeorando el rendimiento.
-
Navegación por teclado
Te ayuda a comprobar que todos los elementos se puedan usar con el teclado. Sirve cuando revisas componentes o HTML renderizado y necesitas validar accesibilidad y orden de foco.
-
Coincidir texto visible y accesible
Te ayuda a comprobar que las etiquetas visibles coincidan con el nombre accesible. Sirve cuando revisas componentes o HTML renderizado para mejorar la accesibilidad.
-
Usar un solo main
Te ayuda a revisar que una página tenga un único elemento principal de contenido. Sirve cuando inspeccionas el HTML renderizado y quieres validar la estructura semántica.
-
Usar regiones semánticas
Te ayuda a revisar que la página use bien las regiones semánticas de navegación y contenido. Sirve cuando inspeccionas componentes o HTML renderizado y quieres mejorar la accesibilidad.
-
Comprobar el atributo lang
Te ayuda a revisar que una página HTML declare correctamente el idioma. Sirve cuando hay contenido en varios idiomas o quieres validar el atributo lang en el documento.
-
Optimizar la pintura principal
Te ayuda a revisar qué está retrasando el momento en que se muestra el contenido principal. Sirve cuando analizas páginas lentas, imágenes pesadas o problemas de renderizado.
-
Desactivar lazy loading arriba
Te ayuda a comprobar que el contenido visible al abrir la página no se cargue tarde por error. Sirve cuando analizas recursos pesados o retrasos en la primera vista.
-
Cargar contenido con lazy loading
Te ayuda a aplicar carga diferida en contenido que no se ve al abrir la página. Sirve cuando quieres reducir el peso inicial sin afectar lo que está fuera de la vista.
-
Evitar JavaScript legado
Te ayuda a revisar si se está sirviendo JavaScript antiguo a navegadores modernos. Sirve cuando analizas cargas lentas y quieres reducir código innecesario.
-
Comprobar enlaces rotos
Te ayuda a revisar que los enlaces de una página funcionen correctamente. Sirve cuando validas plantillas, componentes o HTML final antes de publicarlo.
-
Enlaces dentro de texto
Te ayuda a revisar enlaces que aparecen dentro de párrafos o bloques de texto. Sirve cuando quieres comprobar si el estilo visual dificulta que se reconozcan como enlaces.
-
Usar texto de enlace claro
Te ayuda a revisar que el texto de un enlace diga a dónde lleva. Sirve cuando inspeccionas componentes o HTML y quieres mejorar la accesibilidad y la claridad.
-
Usar listas correctas
Te ayuda a revisar que las listas tengan una estructura HTML correcta. Sirve cuando inspeccionas plantillas o componentes y quieres evitar listas mal construidas.
-
Corregir elementos li
Te ayuda a revisar que los elementos de lista estén dentro de una lista válida. Sirve cuando el HTML se reparte entre componentes o se usan `<li>` sin su contenedor adecuado.
-
Mostrar indicadores de carga
Te ayuda a revisar si conviene mostrar avisos de carga mientras una página responde. Sirve cuando analizas lentitud y quieres confirmar antes dónde está el problema.
-
Usar propiedades lógicas CSS
Te ayuda a revisar estilos CSS para que funcionen mejor con idiomas y escrituras de derecha a izquierda. Sirve cuando trabajas con diseños responsivos y necesitas compatibilidad internacional.
-
Evitar metadatos en el cuerpo
Te ayuda a revisar la estructura HTML para detectar etiquetas meta metidas por error dentro del cuerpo de la página. Sirve cuando plugins, widgets o JavaScript pueden haber insertado noindex, canonical, description, viewport u OG tags donde no corresponde.
-
Evitar redirecciones meta refresh
Te ayuda a revisar componentes o patrones de diseño para evitar redirecciones con meta refresh. Sirve cuando quieres comprobar la semántica, el teclado, el foco, los nombres accesibles y la salida para lectores de pantalla.
-
Hacer modales accesibles
Te ayuda a revisar diálogos modales para que se puedan usar con teclado y lectores de pantalla. Sirve cuando quieres comprobar la semántica, el foco, los nombres accesibles y el comportamiento real en el navegador.
-
Usar regiones landmark de navegación
Te ayuda a revisar plantillas, HTML renderizado o componentes compartidos para usar regiones de navegación accesibles. Sirve cuando quieres validar el marcado real del navegador y no solo la abstracción del framework.
-
Añadir contenido fallback noscript
Te ayuda a revisar plantillas, HTML renderizado o componentes compartidos para ofrecer contenido alternativo sin JavaScript. Sirve cuando quieres validar el marcado real del navegador y no solo la abstracción del framework.
-
Añadir texto alternativo a objetos
Te ayuda a revisar componentes o patrones de diseño para ofrecer texto alternativo en objetos incrustados. Sirve cuando quieres comprobar la semántica, el foco, los nombres accesibles y la salida para lectores de pantalla.
-
Revisar orientación en móviles
Te ayuda a revisar diseños mobile-first, tabletas, flujos a pantalla completa, formularios, paneles o interfaces multimedia. Sirve cuando quieres comprobar el comportamiento en vertical y horizontal sin asumir restricciones innecesarias.
-
Hacer paginación accesible
Te ayuda a revisar plantillas, HTML renderizado o componentes compartidos para que la paginación se pueda usar con teclado y lectores de pantalla. Sirve cuando quieres validar el marcado real del navegador y no solo la abstracción del framework.
-
Sustituir efectos parallax
Te ayuda a revisar componentes o patrones de diseño para ofrecer alternativas a los efectos parallax. Sirve cuando quieres comprobar la semántica, el foco, los nombres accesibles y la salida para lectores de pantalla.
-
Permitir pegar en formularios
Revisa componentes y formularios para comprobar que se puede pegar texto en los campos de entrada como se espera. Te ayuda cuando estás verificando la interacción del teclado, el foco y lo que oye un lector de pantalla.
-
Usar resource hints para cargar antes
Revisa páginas lentas y recursos pesados para comprobar si conviene añadir pistas de recurso y acelerar la carga. Te sirve cuando quieres confirmar primero cuál es el cuello de botella real con DevTools, Lighthouse o datos de usuarios.
-
Optimizar imágenes con picture
Revisa imágenes, marcado y transformaciones del CDN o del proceso de compilación para usar la etiqueta `<picture>` con una imagen de respaldo. Te sirve cuando quieres comprobar tamaño real, carga y impacto en lo que se ve al abrir la página.
-
Escribir en lenguaje claro
Revisa componentes y contenidos para comprobar que el texto es claro y fácil de entender. Te ayuda cuando quieres mejorar la experiencia de uso y la accesibilidad sin cambiar la función de la interfaz.
-
Usar preconnect para acelerar
Revisa páginas lentas y recursos de terceros para comprobar si conviene conectar antes con esos orígenes. Te sirve cuando quieres confirmar primero el problema real de carga antes de tocar nada.
-
Usar JPEG progresivo
Revisa imágenes, marcado y transformaciones del CDN o del proceso de compilación para usar codificación JPEG progresiva. Te sirve cuando quieres comprobar tamaño real, carga y efecto en lo que ve el usuario al abrir la página.
-
Preparar una PWA instalable
Revisa una aplicación web para comprobar si está lista para instalarse como PWA o para publicarla en Microsoft Store o Google Play mediante PWA Builder. Te ayuda cuando quieres preparar esa instalación o un aviso de instalación.
-
Respetar el movimiento reducido
Revisa componentes y páginas para comprobar que respetan la preferencia de reducir animaciones. Te ayuda cuando quieres validar el comportamiento del teclado, el foco y la accesibilidad en interfaces animadas.
-
Eliminar recursos que bloquean renderizado
Revisa páginas lentas y recursos pesados para comprobar si hay archivos que retrasan el renderizado inicial. Te sirve cuando quieres confirmar primero el cuello de botella real con herramientas de análisis.
-
Usar reset CSS
Revisa hojas de estilo y componentes para comprobar si conviene aplicar un reset o una normalización de estilos. Te ayuda cuando comparas el diseño en distintos tamaños de pantalla y estados de interacción.
-
Usar resource hints para cargar antes
Revisa páginas lentas y recursos pesados para comprobar si conviene añadir pistas de recurso y acelerar la carga. Te sirve cuando quieres confirmar primero cuál es el cuello de botella real con DevTools, Lighthouse o datos de usuarios.
-
Optimizar imágenes responsivas
Revisa imágenes, tarjetas, galerías y otros componentes que cambian de tamaño para comprobar que se sirven bien en cada pantalla. Te ayuda cuando el marcado y el CSS deben encajar para que `srcset` y `sizes` funcionen de verdad.
-
Servir imágenes al tamaño correcto
Revisa imágenes, marcado y transformaciones del CDN o del proceso de compilación para comprobar que se muestran al tamaño adecuado. Te sirve cuando quieres verificar tamaño real, carga y efecto en la parte visible al abrir la página.
-
Usar unidades relativas responsivas
Revisa hojas de estilo y componentes para comprobar si usan unidades relativas que se adapten mejor a distintos tamaños de pantalla. Te ayuda cuando comparas el diseño en varias resoluciones y estados de interacción.
-
Preparar imágenes para pantallas retina
Revisa imágenes, marcado y transformaciones del CDN o del proceso de compilación para comprobar que se ven nítidas en pantallas de alta densidad. Te sirve cuando quieres valorar tamaño real, carga y presencia inicial en pantalla.
-
Navegar la web con navegador real
Controla un navegador de verdad para interactuar con páginas, formularios, capturas y flujos web complejos. Te sirve cuando una tarea requiere hacer clics, iniciar sesión o trabajar con contenido que se renderiza en el navegador.
-
Automatizar navegación web
Te ayuda a navegar por sitios, rellenar formularios, hacer clic, tomar capturas y extraer datos con un navegador. Sirve cuando necesitas automatizar tareas web o probar una aplicación.
-
Automatizar Safari en macOS
Te ayuda a controlar Safari real en macOS desde la terminal, manteniendo sesiones y logins. Sirve para automatizar navegación, leer páginas y ejecutar acciones en el navegador.
-
Auditar fichas de App Store y Google Play
Te ayuda a revisar y mejorar la ficha de tu app en App Store o Google Play. Sirve cuando quieres más visibilidad, más descargas o una mejor conversión desde la tienda.
-
Mejorar la conversión de páginas
Te ayuda a aumentar el porcentaje de personas que convierten en una página o formulario. Sirve cuando una landing, portada o formulario no está dando resultados.
-
Mejorar el onboarding de usuarios
Te ayuda a optimizar la experiencia justo después del registro para que la gente empiece a usar el producto. Sirve cuando se inscriben usuarios pero no llegan a activarse.
-
Crear y optimizar paywalls
Te ayuda a diseñar pantallas de pago y de mejora dentro del producto. Sirve cuando quieres que más usuarios gratuitos pasen a planes de pago.
-
Crear popups que convierten
Te ayuda a diseñar popups, modales y banners para captar leads o impulsar una acción. Sirve cuando necesitas una capa extra para convertir más visitantes.
-
Añadir schema a una web
Te ayuda a añadir o corregir datos estructurados en una web para que Google muestre resultados enriquecidos. Sirve cuando quieres mejorar schema markup, JSON-LD, FAQ, productos o reseñas en buscadores.
-
Optimizar registros y pruebas
Te ayuda a mejorar los flujos de registro, creación de cuenta o activación de una prueba. Sirve cuando la gente abandona el formulario, no completa el alta o hay demasiados pasos.
-
Planificar la estructura web
Te ayuda a organizar las páginas, la navegación y la estructura de una web. Sirve cuando quieres definir el mapa del sitio, las URLs, los enlaces internos o la jerarquía de contenidos.
-
Controlar el navegador de Agent
Te ayuda a navegar, hacer clic, escribir, capturar pantallas y depurar en el navegador visible del agente. Sirve cuando necesitas actuar en una web con el navegador habilitado.
-
Crear presentaciones académicas desde papers
Crea o mejora presentaciones PowerPoint académicas en chino a partir de un paper o notas de lectura. Sirve para exposiciones de clase, seminarios y defensas.
-
Experiencias web 3D
Te ayuda a crear o depurar escenas 3D para webs, configuradores de producto o porfolios con Three.js, React Three Fiber o Spline. Sirve para revisar recursos, carga, controles, alternativas y rendimiento.
-
Auditar accesibilidad WCAG
Te ayuda a auditar páginas y recorridos frente a un alcance WCAG definido. Sirve para detectar barreras de teclado, lector de pantalla, foco o contraste y planificar correcciones verificadas.
-
Detectar y corregir accesibilidad
Detecta y corrige problemas de accesibilidad WCAG 2.2 en una página o base de código. Sirve cuando quieres un informe priorizado o un ciclo de auditoría, edición y verificación.
-
Comparar cambios de accesibilidad
Compara las violaciones de accesibilidad de una página en vivo con una referencia anterior. Sirve cuando quieres ver solo los problemas nuevos, los corregidos y los existentes.
-
Escanear accesibilidad de una página
Audita una página en vivo para localizar problemas de accesibilidad y devuelve una lista de correcciones con selectores. Sirve cuando no quieres editar, solo identificar qué arreglar.
-
Generar esquemas de página
Te ayuda a crear un esquema a partir del contenido visible de una página y su URL. Sirve para estructurar información de forma clara.
-
Generar marcado Schema
Te ayuda a crear marcado Schema a partir del tipo de entidad o de los datos de una página y su URL canónica. Sirve para ayudar a los buscadores a entender mejor una web.
-
Crear interfaces Android con Compose
Te ayuda a construir interfaces modernas en Android con Jetpack Compose. Sirve cuando manejas estado, navegación, rendimiento y Material Design 3.
-
Desarrollar con Angular moderno
Te ayuda a trabajar con Angular v20+ y sus patrones modernos, como Signals, componentes autónomos y aplicaciones sin zona. Sirve cuando construyes o mantienes apps Angular actuales.
-
Mejorar Angular con buenas prácticas
Te ayuda a optimizar y revisar código Angular para mejorar rendimiento, tamaño del paquete y eficiencia de renderizado. Sirve cuando quieres aplicar buenas prácticas en Angular.
-
Gestionar estado en Angular
Te ayuda a elegir y usar soluciones modernas de estado en Angular, como Signals, NgRx y RxJS. Sirve cuando configuras estado global o migras patrones antiguos.
-
Aplicar patrones de interfaz en Angular
Te ayuda a construir componentes Angular para estados de carga, errores y visualización de datos. Sirve cuando trabajas con contenido asíncrono o estados de componente.
-
Crear animaciones con Anime.js
Te ayuda a crear animaciones web complejas y de alto rendimiento con Anime.js. Sirve cuando quieres animar interfaces o elementos interactivos en JavaScript.
-
Evitar interfaces genéricas
Te ayuda a dejar de publicar interfaces genéricas y a aprovechar mejor el sistema de diseño del producto. Sirve cuando revisas una pantalla y quieres más personalidad y mejor acabado.
-
Crear webs con Astro
Te ayuda a construir webs centradas en contenido con Astro y sin JavaScript por defecto. Sirve cuando quieres sitios rápidos con Markdown, MDX e integración de varios frameworks.
-
Diseñar layouts en Avalonia
Te ayuda a crear diseños modernos en Avalonia UI usando Zafiro.Avalonia. Sirve cuando quieres reutilizar estilos, componentes genéricos y evitar repetir XAML.
-
Crear ViewModels en Avalonia
Te ayuda a crear ViewModels y asistentes de manera óptima en Avalonia con Zafiro y ReactiveUI. Sirve cuando necesitas seguir patrones recomendados para esta parte de la interfaz.
-
Desarrollar en Avalonia con Zafiro
Te ayuda a seguir las normas, convenciones y reglas obligatorias para desarrollar interfaces Avalonia UI con Zafiro. Sirve cuando trabajas con este kit y quieres mantener un estilo coherente.
-
Crear playgrounds interactivos
Te ayuda a crear exploradores visuales en HTML con controles y vista previa en vivo cuando quieres mostrar o probar una idea de forma interactiva. Sirve para temas que se entienden mejor manipulando opciones en pantalla.
-
Analizar renderizado y rutas SSR
Te ayuda a revisar cómo una página se genera en el servidor y cómo se entregan los datos al navegador. Sirve cuando quieres comparar lo que oculta una plantilla con lo que realmente hace el controlador o la ruta.
-
Analizar apps web y APIs
Te ayuda a inspeccionar sitios web, APIs y flujos reales del navegador. Sirve cuando necesitas seguir sesiones, autenticación, cargas, trabajadores o diferencias entre lo que ve el frontend y lo que hace el backend.
-
Analizar WebSocket y SSE
Te ayuda a revisar conexiones en tiempo real, sus mensajes y sus reconexiones. Sirve cuando necesitas entender el intercambio de datos, la autenticación o cómo los mensajes cambian el estado mostrado o guardado.
-
Crear interfaces accesibles
Te ayuda a implementar interfaces compatibles con WCAG 2.2 y tecnologías de apoyo. Sirve cuando revisas accesibilidad, aplicas patrones ARIA o diseñas experiencias inclusivas.
-
Migrar de AngularJS a Angular
Te ayuda a migrar aplicaciones de AngularJS a Angular con modo híbrido y cambios graduales. Sirve al actualizar aplicaciones antiguas o modernizar código legado de Angular.
-
Diseñar landing pages de marca
Te ayuda a crear landing pages con una identidad visual definida y acabado pulido. Sirve cuando quieres una página de inicio o marketing sin tener aún un estilo visual claro.
-
Diseñar microinteracciones
Te ayuda a añadir animaciones, transiciones y pequeños detalles de interacción en la interfaz. Sirve cuando quieres mejorar estados de carga, respuesta visual o la sensación general de uso.
-
Diseñar apps Android
Te ayuda a crear interfaces nativas para Android siguiendo Material Design 3 y Jetpack Compose. Sirve cuando diseñas pantallas, construyes vistas con Compose o quieres respetar las guías de Google.
-
Diseñar apps iOS
Te ayuda a crear interfaces nativas para iOS con SwiftUI y las guías de Apple. Sirve cuando diseñas pantallas para iPhone o iPad y quieres seguir el estilo recomendado por Apple.
-
Patrones de App Router en Next.js
Te ayuda a trabajar con Next.js 14+ App Router, Server Components, streaming y rutas paralelas. Sirve al crear aplicaciones Next.js, implementar SSR/SSG u optimizar la carga de datos.
-
Modernizar aplicaciones React
Te ayuda a actualizar aplicaciones React a versiones recientes, pasar de clases a hooks y adoptar funciones concurrentes. Sirve al modernizar código React o al migrar a Hooks.
-
Arquitectura React Native
Te ayuda a crear apps móviles con React Native y Expo, navegación, módulos nativos, sincronización sin conexión y patrones multiplataforma. Sirve al desarrollar apps móviles o integrar funciones nativas.
-
Diseñar apps con React Native
Te ayuda a crear aplicaciones móviles multiplataforma con estilos, navegación y animaciones en React Native. Sirve cuando construyes una app móvil o quieres animaciones fluidas y rendimiento adecuado.
-
Gestión de estado en React
Te ayuda a elegir y configurar gestión de estado moderna en React con Redux Toolkit, Zustand, Jotai y React Query. Sirve al manejar estado global, estado del servidor o comparar soluciones.
-
Crear diseños adaptables
Te ayuda a construir interfaces que se adaptan a distintos tamaños de pantalla con CSS moderno. Sirve cuando necesitas rejillas fluidas, tipografía flexible o comportamientos responsive por componentes.
-
Editar interfaces con precisión visual
Te ayuda a hacer cambios en interfaces usando contexto visual como capturas o anotaciones. Sirve para editar componentes cuando importa la posición de los elementos o su referencia visual.
-
Diseñar componentes web reutilizables
Te ayuda a crear componentes de interfaz en React, Vue o Svelte con patrones reutilizables. Sirve cuando construyes bibliotecas de componentes, defines APIs de UI o montas un sistema de diseño frontend.
-
Evitar interfaces genéricas
Te ayuda a diseñar o revisar pantallas para que no se vean genéricas o poco cuidadas. Te sirve cuando quieres basarte en ejemplos reales y cerrar una interfaz con criterios exigentes.
-
Revisar app para Apple App Store
Revisa una base de código buscando mejoras para la App Store de Apple y posibles motivos de rechazo. Te sirve antes de publicar o actualizar una app iOS.
-
Crear Azure Static Web Apps
Te ayuda a configurar y desplegar sitios estáticos en Azure Static Web Apps. Sirve para desarrollo local, configuración y despliegue con GitHub Actions.
-
Depurar webs con Chrome DevTools
Te ayuda a automatizar y analizar páginas web con Chrome DevTools. Sirve para hacer capturas, revisar redes y estudiar rendimiento.
-
Trabajar con CMS y tiendas online
Te ayuda a construir y modificar sitios y sistemas de contenido en plataformas como WordPress, Shopify, Wix o Webflow. Sirve cuando trabajas con temas, plugins, paneles, modelos de contenido o exportaciones estáticas.
-
Usar Fluent UI en Blazor
Te ayuda a crear aplicaciones Blazor con componentes Fluent UI de Microsoft. Úsala cuando configures la librería, uses sus controles o soluciones problemas de tema o interop.
-
Crear apps con agente y CopilotKit
Ayuda a construir apps web con un frontend React de CopilotKit y un agente hospedado en Microsoft Foundry. Te sirve cuando quieres unir interfaz, herramientas del agente y aprobaciones humanas.
-
Animaciones con GSAP y Framer
Crea animaciones al hacer scroll, efectos de paralaje, revelados y secciones fijadas cuando quieres dar movimiento a una web o app. También sirve para animaciones con GSAP ScrollTrigger y Framer Motion en Vanilla JS, React o Next.js.
-
Instalar Markstream en apps web
Te ayuda a instalar y configurar renderizadores Markdown en streaming para aplicaciones Vue, React, Svelte, Angular, Nuxt o Vue 2. Sirve cuando quieres ajustar dependencias, SSR y el modo de renderizado.
-
Añadir idiomas a next-intl
Te ayuda a incorporar un nuevo idioma en una aplicación Next.js que usa next-intl. Sirve cuando quieres ampliar la traducción de la web a más lenguas.
-
Patrones de composición en React
Ayuda a diseñar componentes React más flexibles y reutilizables con patrones de composición. Te sirve cuando quieres evitar muchas propiedades booleanas y organizar mejor la arquitectura de una librería o interfaz.
-
Buenas prácticas de React Native y Expo
Te ayuda a crear apps móviles con React Native y Expo siguiendo buenas prácticas de rendimiento. Te sirve cuando trabajas con listas, animaciones o módulos nativos.
-
Animaciones con View Transitions en React
Ayuda a crear transiciones suaves entre estados de interfaz en React usando View Transition API. Te sirve cuando quieres animar cambios de ruta, elementos compartidos o reordenaciones sin librerías externas.
-
Ingeniería frontend rigurosa
Te ayuda a desarrollar proyectos web siguiendo un flujo de construir, probar y revisar en navegador cuando quieres validar que todo funciona bien.
-
Desarrollar extensiones de navegador
Te ayuda a crear o mantener código de extensiones de navegador en la carpeta browser, incluyendo compatibilidad e idiomas.
-
Mantener la web de documentación
Te ayuda a trabajar en la web de documentación de Repomix dentro de la carpeta website, incluyendo configuración, idiomas y traducciones.
-
Auditar accesibilidad web WCAG 2.2
Revisa y corrige problemas de accesibilidad según WCAG 2.2 nivel A y AA en proyectos web. Te sirve para auditar interfaces, comprobar contraste e integrar estas comprobaciones en CI/CD.
-
Automatizar el navegador
Te ayuda a automatizar tareas en el navegador, como rellenar formularios, hacer capturas o extraer datos de páginas web. Sirve cuando necesitas repetir acciones web sin hacerlo a mano.
-
Capturar capturas de página completa
Te ayuda a hacer capturas completas de páginas web muy largas. Sirve cuando necesitas guardar una vista entera, incluso si la página carga contenido al desplazarse.
-
Crear interfaces con React y Next.js
Te ayuda a crear componentes e interfaces con React, Next.js, TypeScript y Tailwind CSS. Sirve cuando desarrollas una web, mejoras el rendimiento o revisas la calidad del código del frontend.
-
Implementar diseños de Figma
Te ayuda a convertir diseños de Figma en código de interfaz listo para producción. Sirve cuando necesitas reproducir una maqueta con fidelidad en una aplicación.
-
Automatizar navegador con Playwright
Te ayuda a automatizar un navegador real desde la terminal. Sirve para navegar, rellenar formularios, hacer capturas y extraer datos de una web.
-
Depurar interfaces con navegador
Te ayuda a probar y depurar interfaces web en un navegador persistente con Electron. Sirve para iterar rápido en problemas de interfaz.
-
Pulir funciones en navegador
Ajusta una función que ya funciona usando feedback directo en un navegador real. Te sirve cuando quieres afinar la experiencia de uso antes de publicar.
-
Gestionar componentes shadcn
Te ayuda a añadir, buscar, corregir y componer componentes de shadcn/ui en un proyecto. Sirve cuando trabajas con registries, presets o archivos components.json.
-
Capturar elementos HTML como imagen
Te ayuda a convertir elementos HTML en imágenes SVG, PNG, JPG o WebP. Sirve cuando necesitas conservar estilos, fuentes y pseudoelementos al guardar una captura de una página.
-
Diseñar y revisar interfaces UI/UX
Te ayuda a diseñar, construir o corregir interfaces para web, móvil y escritorio. Sirve cuando trabajas en pantallas, componentes, accesibilidad, tipografía, color o diseños responsivos.
-
Automatizar tareas en un navegador
Te ayuda a abrir webs, rellenar formularios, hacer clics, tomar capturas y extraer datos en un navegador Chromium. Sirve para automatización web, pruebas y revisión de aplicaciones.
-
Renderizar la sesión en HTML
Te ayuda a convertir la salida de la sesión en una página HTML lista para ver. Sirve cuando quieres un artefacto visual y autocontenido a partir de un análisis o contenido ya generado.
-
Diseñar interfaces web
Te ayuda a diseñar e integrar interfaces web con DirectDesign o NativeDesign. Sirve para crear prototipos, pulir la UI, ajustar sistemas de diseño o rehacer una página o panel.
-
Operar extensiones FrontendForge
Te ayuda a crear, actualizar, reconstruir, inspeccionar, publicar y borrar recursos de FrontendExtension en frontend-forge. Sirve para gestionar extensiones y resolver problemas de estado o publicación en Kubernetes.
-
Operar FrontendIntegration y extensiones
Te ayuda a crear y administrar recursos FrontendIntegration y la extensión frontend-forge. Sirve para revisar el ciclo de vida, el estado de compilación o la instalación de la extensión.
-
Generar YAML de FrontendIntegration
Te ayuda a crear YAML canónico de FrontendIntegration a partir de un modelo simplificado de menús. Sirve cuando quieres preparar la configuración de frontend-forge de forma estándar.
-
Describir imágenes con BLIP-2
Te ayuda a generar descripciones de imágenes y a responder preguntas sobre contenido visual. Sirve para buscar entre imágenes, hacer chat multimodal o relacionar texto e imagen.
-
Clasificar imágenes con CLIP
Te ayuda a relacionar imágenes y texto para clasificar, buscar o comparar contenido visual. Sirve para clasificación sin entrenamiento previo, búsqueda de imágenes o moderación de contenido.
-
Conversar con imágenes usando LLaVA
Te ayuda a hacer preguntas sobre imágenes y mantener conversaciones visuales. Sirve para chatbots con visión, análisis de imágenes o instrucciones sobre contenido visual.
-
Segmentar objetos en imágenes
Te ayuda a separar objetos en una imagen usando puntos, cajas o máscaras como guía. Sirve cuando necesitas recortar elementos o generar máscaras de todos los objetos.
-
Crear apps Angular 17
Te ayuda a crear aplicaciones Angular 17+ con componentes independientes, rutas avanzadas, NgRx y patrones con RxJS. Sirve para montar apps empresariales, optimizar el rendimiento y escribir pruebas en Angular.
-
Desarrollar apps Flutter
Te ayuda a crear aplicaciones multiplataforma con Flutter y Dart. Sirve para construir interfaces, gestionar estado, navegar entre pantallas y optimizar el rendimiento.
-
Desarrollar con Next.js
Te ayuda a crear aplicaciones con Next.js 14+ y App Router. Sirve para usar componentes de servidor, rutas, middleware, SEO, streaming y despliegue en Vercel.
-
Desarrollar aplicaciones React
Te ayuda a crear componentes y resolver problemas de renderizado en React 18 y Next.js. Úsalo para hooks personalizados, gestión de estado, componentes de servidor y mejoras de rendimiento.
-
Desarrollar apps con React Native
Crea y depura aplicaciones móviles con React Native y Expo. Te sirve para la navegación, los módulos nativos, el rendimiento de listas y los detalles específicos de iOS y Android.
-
Desarrollar en Vue
Crea aplicaciones Vue 3 y proyectos Nuxt 3 con Composition API. Úsalo para componentes reutilizables, estado con Pinia, apps híbridas y mejoras de rendimiento con Vite.
-
Desarrollar en Vue con JavaScript
Crea aplicaciones Vue 3 usando solo JavaScript, sin TypeScript. Te sirve para componentes, composables, rutas y estado con anotaciones JSDoc si quieres ayuda de tipos.
-
Auditar landing pages publicitarias
Te ayuda a revisar páginas de destino de campañas pagadas. Sirve para detectar problemas de mensaje, velocidad, formularios, confianza, accesibilidad y fricción de conversión.
-
Deck de lanzamiento de producto
Crea una presentación de lanzamiento con fondo oscuro, contenido claro, acentos naranja a rosa, tarjetas de características, precios y llamada a la acción.
-
Plantillas para Replit Slides
Te ayuda a crear presentaciones con ocho temas distintos para Replit Slides. Sirve cuando quieres elegir un estilo visual rápido entre varias opciones.
-
Deck HTML horizontal simple
Crea una presentación HTML horizontal sencilla para deslizar entre pantallas. Sirve cuando quieres un formato general sin estilo de revista.
-
Deck suizo internacional
Crea presentaciones con una retícula de 16 columnas, un único color de acento y 22 composiciones fijas. Sirve para diseños limpios y muy estructurados.
-
App gamificada de tareas
Crea una interfaz con portada, tareas diarias y detalle de misión con puntos de experiencia. Sirve para apps que quieren motivar con mecánicas de juego.
-
Maqueta de app móvil
Crea una vista de una app dentro de un marco de iPhone 15 Pro con una sola pantalla. Sirve para mostrar capturas o diseños de móvil.
-
Onboarding móvil
Crea una presentación con tres pantallas de móvil: bienvenida, propuesta de valor e inicio de sesión. Sirve para enseñar el arranque de una app.
-
Animaciones de marcos
Te ayuda a crear animaciones CSS en bucle como anillos, globos, temporizadores y efectos de parallax. Sirve para dar movimiento a interfaces o piezas visuales.
-
Diapositivas estilo Keynote
Crea presentaciones con acabado tipo Keynote, una idea por diapositiva y navegación con teclado. Sirve para charlas limpias y fáciles de seguir.
-
Crear página de precios
Crea una página de precios con tres planes, una tabla comparativa de características y preguntas frecuentes. Te sirve para presentar opciones de compra de forma clara.
-
Crear prototipo web interactivo
Crea un prototipo web funcional y clicable con navegación, sección principal, características y llamada a la acción. Te sirve para enseñar la estructura de una web antes de desarrollarla.
-
Crear landing page SaaS
Crea una página de aterrizaje de una sola sección para un producto SaaS con presentación, características, prueba social, precios y llamada a la acción. Te sirve para mostrar y vender un servicio online.
-
Crear página de espera
Crea una página minimalista de pre-lanzamiento con captura de correo, logotipo y capas decorativas. Te sirve para recoger interesados antes de lanzar un producto.
-
Crear prototipo web brutalista
Crea un prototipo web con estilo industrial suizo, números grandes y adornos ASCII. Te sirve para dar una apariencia fuerte y poco convencional.
-
Crear prototipo web editorial
Crea un prototipo web con estilo editorial minimalista, fondo monocromo cálido y tipografías serif y grotesca. Te sirve para diseñar páginas con aspecto elegante y sobrio.
-
Crear prototipo web suave
Crea un prototipo web con estética de Apple, tarjetas en relieve y animaciones suaves. Te sirve para diseñar interfaces limpias y delicadas.
-
设计前端页面代码
生成更有视觉冲击力的网页和应用界面代码。适合想做出更精致、动效更强的前端页面时使用。