Todos los componentes

BotonesCore (sin librería)

☆

Button Icon

Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.

downloadReport

BotonesCore (sin librería)

☆

Button Outline

Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.

learnMore

BotonesCore (sin librería)

☆

Button Primary

Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.

clickButton

BotonesCore (sin librería)

☆

Button Secondary

Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.

cancelAction

BotonesTailwind CSS

☆

Button Icon

Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.

downloadReport

BotonesTailwind CSS

☆

Button Outline

Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.

learnMore

BotonesTailwind CSS

☆

Button Primary

Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.

clickButton

BotonesTailwind CSS

☆

Button Secondary

Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.

cancelAction

BotonesBootstrap

☆

Button Icon

Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.

downloadReport

BotonesBootstrap

☆

Button Outline

Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.

learnMore

BotonesBootstrap

☆

Button Primary

Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.

clickButton

BotonesBootstrap

☆

Button Secondary

Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.

cancelAction

BotonesMaterial UI

☆

Button Icon

Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.

downloadReport

BotonesMaterial UI

☆

Button Outline

Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.

learnMore

BotonesMaterial UI

☆

Button Primary

Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.

clickButton

BotonesMaterial UI

☆

Button Secondary

Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.

cancelAction

Botonesshadcn/ui

☆

Button Icon

Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.

downloadReport

Botonesshadcn/ui

☆

Button Outline

Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.

learnMore

Botonesshadcn/ui

☆

Button Primary

Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.

clickButton

Botonesshadcn/ui

☆

Button Secondary

Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.

cancelAction

TarjetasCore (sin librería)

☆

Product Card

Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.

addToCartviewDetails

TarjetasCore (sin librería)

☆

Profile Card

Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).

viewProfilefollowUser

TarjetasTailwind CSS

☆

Product Card

Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.

addToCartviewDetails

TarjetasTailwind CSS

☆

Profile Card

Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).

viewProfilefollowUser

TarjetasBootstrap

☆

Product Card

Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.

addToCartviewDetails

TarjetasBootstrap

☆

Profile Card

Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).

viewProfilefollowUser

TarjetasMaterial UI

☆

Product Card

Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.

addToCartviewDetails

TarjetasMaterial UI

☆

Profile Card

Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).

viewProfilefollowUser

Tarjetasshadcn/ui

☆

Product Card

Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.

addToCartviewDetails

Tarjetasshadcn/ui

☆

Profile Card

Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).

viewProfilefollowUser

FormulariosCore (sin librería)

☆

Contact Form

Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.

sendMessage

FormulariosCore (sin librería)

☆

Login Form

Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.

login

FormulariosTailwind CSS

☆

Contact Form

Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.

sendMessage

FormulariosTailwind CSS

☆

Login Form

Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.

login

FormulariosBootstrap

☆

Contact Form

Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.

sendMessage

FormulariosBootstrap

☆

Login Form

Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.

login

FormulariosMaterial UI

☆

Contact Form

Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.

sendMessage

FormulariosMaterial UI

☆

Login Form

Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.

login

Formulariosshadcn/ui

☆

Contact Form

Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.

sendMessage

Formulariosshadcn/ui

☆

Login Form

Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.

login

LayoutCore (sin librería)

☆

Hero

Sección hero IA-First: título, subtítulo y dos llamadas a la acción; herramientas startNow / watchDemo, contexto heroTitle y animación de entrada del título.

startNowwatchDemo

LayoutCore (sin librería)

☆

Navbar

Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.

goHomeopenMenusignUp

LayoutTailwind CSS

☆

Hero

Sección hero IA-First: título, subtítulo y dos llamadas a la acción; herramientas startNow / watchDemo, contexto heroTitle y animación de entrada del título.

startNowwatchDemo

LayoutTailwind CSS

☆

Navbar

Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.

goHomeopenMenusignUp

LayoutBootstrap

☆

Hero

Sección hero IA-First: título, subtítulo y dos llamadas a la acción; herramientas startNow / watchDemo, contexto heroTitle y animación de entrada del título.

startNowwatchDemo

LayoutBootstrap

☆

Navbar

Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.

goHomeopenMenusignUp

LayoutMaterial UI

☆

Hero

Sección hero IA-First: título, subtítulo y dos llamadas a la acción; herramientas startNow / watchDemo, contexto heroTitle y animación de entrada del título.

startNowwatchDemo

LayoutMaterial UI

☆

Navbar

Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.

goHomeopenMenusignUp

Layoutshadcn/ui

☆

Hero

Sección hero IA-First: título, subtítulo y dos llamadas a la acción; herramientas startNow / watchDemo, contexto heroTitle y animación de entrada del título.

startNowwatchDemo

Layoutshadcn/ui

☆

Navbar

Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.

goHomeopenMenusignUp

AnimacionesCore (sin librería)

☆

2.5D Isometric

Animación reutilizable de proyección isométrica 2.5D (rotación X/Z con perspectiva) declarada con webmcp-animation-type: isometric.

isoTilt

AnimacionesCore (sin librería)

☆

Fade In

Animación reutilizable de aparición gradual (opacity 0 → 1) declarada con webmcp-animation; se ejecuta con el runtime de WebMCPcss cuando el elemento entra en pantalla.

fadeIn

AnimacionesCore (sin librería)

☆

Pulse

Animación reutilizable de pulsación infinita (scale 1 → 1.06) declarada con webmcp-animation; ideal para llamadas a la acción.

pulse

AnimacionesCore (sin librería)

☆

Slide Up

Animación reutilizable de entrada deslizando hacia arriba (translateY 32px → 0 con fade) declarada con webmcp-animation.

slideUp

InteligentesCore (sin librería)

☆

Checkout Form

Formulario de pago IA-First: dirección, envío y cupón con API declarativa, permisos full, autenticación requerida, límite de uso y confirmación obligatoria; expone total y artículos como contexto.

placeOrderapplyCoupon

InteligentesCore (sin librería)

☆

Hero Section (parallax)

Sección hero inteligente IA-First: fondo parallax por capas, entrada animada del título y CTAs declaradas como herramientas; combina el estándar de animaciones con el contrato de agentes.

exploreCatalogcontactSales

InteligentesCore (sin librería)

☆

Parallax Scene (2.5D)

Escena 2.5D isométrica IA-First con Three.js (webmcp-animation-type: three-scene): capas de color con parallax al ratón, botón para reproducirla y contexto con el estado; todo declarado en CSS.

replayScene

InteligentesCore (sin librería)

☆

Smart Product Card

Tarjeta de producto inteligente IA-First: además de comprar y ver detalles expone stock, valoración y precio como contexto, declara permisos por herramienta, accesibilidad y una elevación animada al pasar el ratón.

buyNowopenProduct