{ "$schema": "https://cochinoraptor.github.io/WebMCPcss/api/schema/components.json", "name": "WebMCPcss Component Hub", "version": "1.3.0", "generatedAt": "2026-09-13T23:39:44.107Z", "baseUrl": "https://cochinoraptor.github.io/WebMCPcss", "categories": [ { "id": "buttons", "label": "Botones", "count": 20 }, { "id": "cards", "label": "Tarjetas", "count": 10 }, { "id": "forms", "label": "Formularios", "count": 10 }, { "id": "layout", "label": "Layout", "count": 10 }, { "id": "animations", "label": "Animaciones", "count": 4 }, { "id": "intelligent", "label": "Inteligentes", "count": 4 } ], "libraries": [ { "id": "core", "label": "Core (sin librería)", "count": 18 }, { "id": "tailwind", "label": "Tailwind CSS", "count": 10 }, { "id": "bootstrap", "label": "Bootstrap", "count": 10 }, { "id": "mui", "label": "Material UI", "count": 10 }, { "id": "shadcn", "label": "shadcn/ui", "count": 10 } ], "components": [ { "id": "core-button-icon", "name": "Button Icon", "category": "buttons", "library": "core", "version": "1.0.0", "description": "Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.", "tags": [ "button", "icon", "download", "action", "core" ], "tools": [ { "name": "downloadReport", "selector": ".wm-btn--icon", "description": "Descarga el informe en PDF (requiere confirmación del usuario)", "params": [], "intent": "action", "confirmation": "needed" } ], "context": [], "animations": [], "hash": "1db6944641bd559f", "files": { "css": "components/core-button-icon/button-icon.webmcp.css", "html": "components/core-button-icon/button-icon.html", "meta": "components/core-button-icon/component.json", "page": "components/core-button-icon/" }, "importCommand": "npx webmcpcss components import core-button-icon", "promptExamples": [ "cambia el icono del botón Descargar por una flecha", "pon el botón con icono en gris" ], "animateExamples": [ "haz que el botón Descargar pulse suavemente", "aplica slide-up al botón con icono" ] }, { "id": "core-button-outline", "name": "Button Outline", "category": "buttons", "library": "core", "version": "1.0.0", "description": "Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.", "tags": [ "button", "outline", "navigate", "link", "core" ], "tools": [ { "name": "learnMore", "selector": ".wm-btn--outline", "description": "Abre más información o los detalles del elemento (navegación secundaria)", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [], "animations": [], "hash": "36476437ef609305", "files": { "css": "components/core-button-outline/button-outline.webmcp.css", "html": "components/core-button-outline/button-outline.html", "meta": "components/core-button-outline/component.json", "page": "components/core-button-outline/" }, "importCommand": "npx webmcpcss components import core-button-outline", "promptExamples": [ "cambia el borde del botón Saber más a morado", "convierte el botón outline en relleno" ], "animateExamples": [ "añade un brillo al pasar el ratón por el botón outline", "aplica fade-in al botón Saber más" ] }, { "id": "core-button-primary", "name": "Button Primary", "category": "buttons", "library": "core", "version": "1.0.0", "description": "Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.", "tags": [ "button", "primary", "submit", "cta", "core" ], "tools": [ { "name": "clickButton", "selector": ".wm-btn--primary", "description": "Ejecuta la acción principal del bloque (enviar, guardar o continuar)", "params": [], "intent": "submit", "confirmation": "none" } ], "context": [], "animations": [], "hash": "81d8e0c499f6f3ff", "files": { "css": "components/core-button-primary/button-primary.webmcp.css", "html": "components/core-button-primary/button-primary.html", "meta": "components/core-button-primary/component.json", "page": "components/core-button-primary/" }, "importCommand": "npx webmcpcss components import core-button-primary", "promptExamples": [ "cambia el color del botón primario a verde", "haz el botón Enviar más grande" ], "animateExamples": [ "aplica una animación de pulsación al botón primario", "haz que el botón Enviar aparezca con fade-in" ] }, { "id": "core-button-secondary", "name": "Button Secondary", "category": "buttons", "library": "core", "version": "1.0.0", "description": "Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.", "tags": [ "button", "secondary", "cancel", "core" ], "tools": [ { "name": "cancelAction", "selector": ".wm-btn--secondary", "description": "Cancela la acción en curso o vuelve al paso anterior sin efectos destructivos", "params": [], "intent": "cancel", "confirmation": "none" } ], "context": [], "animations": [], "hash": "ec2c7f8376b716e6", "files": { "css": "components/core-button-secondary/button-secondary.webmcp.css", "html": "components/core-button-secondary/button-secondary.html", "meta": "components/core-button-secondary/component.json", "page": "components/core-button-secondary/" }, "importCommand": "npx webmcpcss components import core-button-secondary", "promptExamples": [ "oculta el botón Cancelar", "cambia el texto del botón secundario a Volver" ], "animateExamples": [ "haz que el botón Cancelar aparezca deslizándose", "quita la animación del botón secundario" ] }, { "id": "tailwind-button-icon", "name": "Button Icon", "category": "buttons", "library": "tailwind", "version": "1.0.0", "description": "Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.", "tags": [ "button", "icon", "download", "action", "tailwind" ], "tools": [ { "name": "downloadReport", "selector": "[data-tool=\"downloadReport\"]", "description": "Descarga el informe en PDF (requiere confirmación del usuario)", "params": [], "intent": "action", "confirmation": "needed" } ], "context": [], "animations": [], "hash": "2c9ce868946adfca", "files": { "css": "components/tailwind-button-icon/button-icon.webmcp.css", "html": "components/tailwind-button-icon/button-icon.html", "meta": "components/tailwind-button-icon/component.json", "page": "components/tailwind-button-icon/" }, "importCommand": "npx webmcpcss components import tailwind-button-icon", "promptExamples": [ "cambia el icono del botón Descargar por una flecha", "pon el botón con icono en gris" ], "animateExamples": [ "haz que el botón Descargar pulse suavemente", "aplica slide-up al botón con icono" ] }, { "id": "tailwind-button-outline", "name": "Button Outline", "category": "buttons", "library": "tailwind", "version": "1.0.0", "description": "Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.", "tags": [ "button", "outline", "navigate", "link", "tailwind" ], "tools": [ { "name": "learnMore", "selector": "[data-tool=\"learnMore\"]", "description": "Abre más información o los detalles del elemento (navegación secundaria)", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [], "animations": [], "hash": "989eef7c7f281412", "files": { "css": "components/tailwind-button-outline/button-outline.webmcp.css", "html": "components/tailwind-button-outline/button-outline.html", "meta": "components/tailwind-button-outline/component.json", "page": "components/tailwind-button-outline/" }, "importCommand": "npx webmcpcss components import tailwind-button-outline", "promptExamples": [ "cambia el borde del botón Saber más a morado", "convierte el botón outline en relleno" ], "animateExamples": [ "añade un brillo al pasar el ratón por el botón outline", "aplica fade-in al botón Saber más" ] }, { "id": "tailwind-button-primary", "name": "Button Primary", "category": "buttons", "library": "tailwind", "version": "1.0.0", "description": "Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.", "tags": [ "button", "primary", "submit", "cta", "tailwind" ], "tools": [ { "name": "clickButton", "selector": "[data-tool=\"clickButton\"]", "description": "Ejecuta la acción principal del bloque (enviar, guardar o continuar)", "params": [], "intent": "submit", "confirmation": "none" } ], "context": [], "animations": [], "hash": "e867d4e35d8fcc31", "files": { "css": "components/tailwind-button-primary/button-primary.webmcp.css", "html": "components/tailwind-button-primary/button-primary.html", "meta": "components/tailwind-button-primary/component.json", "page": "components/tailwind-button-primary/" }, "importCommand": "npx webmcpcss components import tailwind-button-primary", "promptExamples": [ "cambia el color del botón primario a verde", "haz el botón Enviar más grande" ], "animateExamples": [ "aplica una animación de pulsación al botón primario", "haz que el botón Enviar aparezca con fade-in" ] }, { "id": "tailwind-button-secondary", "name": "Button Secondary", "category": "buttons", "library": "tailwind", "version": "1.0.0", "description": "Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.", "tags": [ "button", "secondary", "cancel", "tailwind" ], "tools": [ { "name": "cancelAction", "selector": "[data-tool=\"cancelAction\"]", "description": "Cancela la acción en curso o vuelve al paso anterior sin efectos destructivos", "params": [], "intent": "cancel", "confirmation": "none" } ], "context": [], "animations": [], "hash": "1af015c107c3f12f", "files": { "css": "components/tailwind-button-secondary/button-secondary.webmcp.css", "html": "components/tailwind-button-secondary/button-secondary.html", "meta": "components/tailwind-button-secondary/component.json", "page": "components/tailwind-button-secondary/" }, "importCommand": "npx webmcpcss components import tailwind-button-secondary", "promptExamples": [ "oculta el botón Cancelar", "cambia el texto del botón secundario a Volver" ], "animateExamples": [ "haz que el botón Cancelar aparezca deslizándose", "quita la animación del botón secundario" ] }, { "id": "bootstrap-button-icon", "name": "Button Icon", "category": "buttons", "library": "bootstrap", "version": "1.0.0", "description": "Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.", "tags": [ "button", "icon", "download", "action", "bootstrap" ], "tools": [ { "name": "downloadReport", "selector": ".btn[data-tool=\"downloadReport\"]", "description": "Descarga el informe en PDF (requiere confirmación del usuario)", "params": [], "intent": "action", "confirmation": "needed" } ], "context": [], "animations": [], "hash": "6c7aea9a7ab8a235", "files": { "css": "components/bootstrap-button-icon/button-icon.webmcp.css", "html": "components/bootstrap-button-icon/button-icon.html", "meta": "components/bootstrap-button-icon/component.json", "page": "components/bootstrap-button-icon/" }, "importCommand": "npx webmcpcss components import bootstrap-button-icon", "promptExamples": [ "cambia el icono del botón Descargar por una flecha", "pon el botón con icono en gris" ], "animateExamples": [ "haz que el botón Descargar pulse suavemente", "aplica slide-up al botón con icono" ] }, { "id": "bootstrap-button-outline", "name": "Button Outline", "category": "buttons", "library": "bootstrap", "version": "1.0.0", "description": "Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.", "tags": [ "button", "outline", "navigate", "link", "bootstrap" ], "tools": [ { "name": "learnMore", "selector": ".btn[data-tool=\"learnMore\"]", "description": "Abre más información o los detalles del elemento (navegación secundaria)", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [], "animations": [], "hash": "d60b931598664de7", "files": { "css": "components/bootstrap-button-outline/button-outline.webmcp.css", "html": "components/bootstrap-button-outline/button-outline.html", "meta": "components/bootstrap-button-outline/component.json", "page": "components/bootstrap-button-outline/" }, "importCommand": "npx webmcpcss components import bootstrap-button-outline", "promptExamples": [ "cambia el borde del botón Saber más a morado", "convierte el botón outline en relleno" ], "animateExamples": [ "añade un brillo al pasar el ratón por el botón outline", "aplica fade-in al botón Saber más" ] }, { "id": "bootstrap-button-primary", "name": "Button Primary", "category": "buttons", "library": "bootstrap", "version": "1.0.0", "description": "Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.", "tags": [ "button", "primary", "submit", "cta", "bootstrap" ], "tools": [ { "name": "clickButton", "selector": ".btn[data-tool=\"clickButton\"]", "description": "Ejecuta la acción principal del bloque (enviar, guardar o continuar)", "params": [], "intent": "submit", "confirmation": "none" } ], "context": [], "animations": [], "hash": "9fc95002e04aad68", "files": { "css": "components/bootstrap-button-primary/button-primary.webmcp.css", "html": "components/bootstrap-button-primary/button-primary.html", "meta": "components/bootstrap-button-primary/component.json", "page": "components/bootstrap-button-primary/" }, "importCommand": "npx webmcpcss components import bootstrap-button-primary", "promptExamples": [ "cambia el color del botón primario a verde", "haz el botón Enviar más grande" ], "animateExamples": [ "aplica una animación de pulsación al botón primario", "haz que el botón Enviar aparezca con fade-in" ] }, { "id": "bootstrap-button-secondary", "name": "Button Secondary", "category": "buttons", "library": "bootstrap", "version": "1.0.0", "description": "Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.", "tags": [ "button", "secondary", "cancel", "bootstrap" ], "tools": [ { "name": "cancelAction", "selector": ".btn[data-tool=\"cancelAction\"]", "description": "Cancela la acción en curso o vuelve al paso anterior sin efectos destructivos", "params": [], "intent": "cancel", "confirmation": "none" } ], "context": [], "animations": [], "hash": "9767d6a48def1c87", "files": { "css": "components/bootstrap-button-secondary/button-secondary.webmcp.css", "html": "components/bootstrap-button-secondary/button-secondary.html", "meta": "components/bootstrap-button-secondary/component.json", "page": "components/bootstrap-button-secondary/" }, "importCommand": "npx webmcpcss components import bootstrap-button-secondary", "promptExamples": [ "oculta el botón Cancelar", "cambia el texto del botón secundario a Volver" ], "animateExamples": [ "haz que el botón Cancelar aparezca deslizándose", "quita la animación del botón secundario" ] }, { "id": "mui-button-icon", "name": "Button Icon", "category": "buttons", "library": "mui", "version": "1.0.0", "description": "Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.", "tags": [ "button", "icon", "download", "action", "mui" ], "tools": [ { "name": "downloadReport", "selector": ".MuiButton-root[data-tool=\"downloadReport\"]", "description": "Descarga el informe en PDF (requiere confirmación del usuario)", "params": [], "intent": "action", "confirmation": "needed" } ], "context": [], "animations": [], "hash": "9d5a1a71c6323bbc", "files": { "css": "components/mui-button-icon/button-icon.webmcp.css", "html": "components/mui-button-icon/button-icon.html", "meta": "components/mui-button-icon/component.json", "page": "components/mui-button-icon/" }, "importCommand": "npx webmcpcss components import mui-button-icon", "promptExamples": [ "cambia el icono del botón Descargar por una flecha", "pon el botón con icono en gris" ], "animateExamples": [ "haz que el botón Descargar pulse suavemente", "aplica slide-up al botón con icono" ] }, { "id": "mui-button-outline", "name": "Button Outline", "category": "buttons", "library": "mui", "version": "1.0.0", "description": "Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.", "tags": [ "button", "outline", "navigate", "link", "mui" ], "tools": [ { "name": "learnMore", "selector": ".MuiButton-root[data-tool=\"learnMore\"]", "description": "Abre más información o los detalles del elemento (navegación secundaria)", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [], "animations": [], "hash": "8ef6a732a957f183", "files": { "css": "components/mui-button-outline/button-outline.webmcp.css", "html": "components/mui-button-outline/button-outline.html", "meta": "components/mui-button-outline/component.json", "page": "components/mui-button-outline/" }, "importCommand": "npx webmcpcss components import mui-button-outline", "promptExamples": [ "cambia el borde del botón Saber más a morado", "convierte el botón outline en relleno" ], "animateExamples": [ "añade un brillo al pasar el ratón por el botón outline", "aplica fade-in al botón Saber más" ] }, { "id": "mui-button-primary", "name": "Button Primary", "category": "buttons", "library": "mui", "version": "1.0.0", "description": "Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.", "tags": [ "button", "primary", "submit", "cta", "mui" ], "tools": [ { "name": "clickButton", "selector": ".MuiButton-root[data-tool=\"clickButton\"]", "description": "Ejecuta la acción principal del bloque (enviar, guardar o continuar)", "params": [], "intent": "submit", "confirmation": "none" } ], "context": [], "animations": [], "hash": "a1e67c68e327aa07", "files": { "css": "components/mui-button-primary/button-primary.webmcp.css", "html": "components/mui-button-primary/button-primary.html", "meta": "components/mui-button-primary/component.json", "page": "components/mui-button-primary/" }, "importCommand": "npx webmcpcss components import mui-button-primary", "promptExamples": [ "cambia el color del botón primario a verde", "haz el botón Enviar más grande" ], "animateExamples": [ "aplica una animación de pulsación al botón primario", "haz que el botón Enviar aparezca con fade-in" ] }, { "id": "mui-button-secondary", "name": "Button Secondary", "category": "buttons", "library": "mui", "version": "1.0.0", "description": "Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.", "tags": [ "button", "secondary", "cancel", "mui" ], "tools": [ { "name": "cancelAction", "selector": ".MuiButton-root[data-tool=\"cancelAction\"]", "description": "Cancela la acción en curso o vuelve al paso anterior sin efectos destructivos", "params": [], "intent": "cancel", "confirmation": "none" } ], "context": [], "animations": [], "hash": "0dc35e797d2b0ff4", "files": { "css": "components/mui-button-secondary/button-secondary.webmcp.css", "html": "components/mui-button-secondary/button-secondary.html", "meta": "components/mui-button-secondary/component.json", "page": "components/mui-button-secondary/" }, "importCommand": "npx webmcpcss components import mui-button-secondary", "promptExamples": [ "oculta el botón Cancelar", "cambia el texto del botón secundario a Volver" ], "animateExamples": [ "haz que el botón Cancelar aparezca deslizándose", "quita la animación del botón secundario" ] }, { "id": "shadcn-button-icon", "name": "Button Icon", "category": "buttons", "library": "shadcn", "version": "1.0.0", "description": "Botón con icono IA-First: acción puntual (descargar, compartir) con texto accesible y confirmación requerida; herramienta downloadReport.", "tags": [ "button", "icon", "download", "action", "shadcn" ], "tools": [ { "name": "downloadReport", "selector": "[data-slot=\"button\"][data-tool=\"downloadReport\"]", "description": "Descarga el informe en PDF (requiere confirmación del usuario)", "params": [], "intent": "action", "confirmation": "needed" } ], "context": [], "animations": [], "hash": "daecacd9bcdbb281", "files": { "css": "components/shadcn-button-icon/button-icon.webmcp.css", "html": "components/shadcn-button-icon/button-icon.html", "meta": "components/shadcn-button-icon/component.json", "page": "components/shadcn-button-icon/" }, "importCommand": "npx webmcpcss components import shadcn-button-icon", "promptExamples": [ "cambia el icono del botón Descargar por una flecha", "pon el botón con icono en gris" ], "animateExamples": [ "haz que el botón Descargar pulse suavemente", "aplica slide-up al botón con icono" ] }, { "id": "shadcn-button-outline", "name": "Button Outline", "category": "buttons", "library": "shadcn", "version": "1.0.0", "description": "Botón outline IA-First: navegación secundaria (saber más, ver detalles) con menor peso visual; herramienta learnMore con intención navigate.", "tags": [ "button", "outline", "navigate", "link", "shadcn" ], "tools": [ { "name": "learnMore", "selector": "[data-slot=\"button\"][data-tool=\"learnMore\"]", "description": "Abre más información o los detalles del elemento (navegación secundaria)", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [], "animations": [], "hash": "63dbd4f23f47f56a", "files": { "css": "components/shadcn-button-outline/button-outline.webmcp.css", "html": "components/shadcn-button-outline/button-outline.html", "meta": "components/shadcn-button-outline/component.json", "page": "components/shadcn-button-outline/" }, "importCommand": "npx webmcpcss components import shadcn-button-outline", "promptExamples": [ "cambia el borde del botón Saber más a morado", "convierte el botón outline en relleno" ], "animateExamples": [ "añade un brillo al pasar el ratón por el botón outline", "aplica fade-in al botón Saber más" ] }, { "id": "shadcn-button-primary", "name": "Button Primary", "category": "buttons", "library": "shadcn", "version": "1.0.0", "description": "Botón primario IA-First: ejecuta la acción principal del bloque (enviar, guardar, continuar) y la declara como herramienta clickButton.", "tags": [ "button", "primary", "submit", "cta", "shadcn" ], "tools": [ { "name": "clickButton", "selector": "[data-slot=\"button\"][data-tool=\"clickButton\"]", "description": "Ejecuta la acción principal del bloque (enviar, guardar o continuar)", "params": [], "intent": "submit", "confirmation": "none" } ], "context": [], "animations": [], "hash": "e984848efcae7816", "files": { "css": "components/shadcn-button-primary/button-primary.webmcp.css", "html": "components/shadcn-button-primary/button-primary.html", "meta": "components/shadcn-button-primary/component.json", "page": "components/shadcn-button-primary/" }, "importCommand": "npx webmcpcss components import shadcn-button-primary", "promptExamples": [ "cambia el color del botón primario a verde", "haz el botón Enviar más grande" ], "animateExamples": [ "aplica una animación de pulsación al botón primario", "haz que el botón Enviar aparezca con fade-in" ] }, { "id": "shadcn-button-secondary", "name": "Button Secondary", "category": "buttons", "library": "shadcn", "version": "1.0.0", "description": "Botón secundario IA-First: cancela o vuelve atrás sin efectos destructivos; herramienta cancelAction con intención cancel.", "tags": [ "button", "secondary", "cancel", "shadcn" ], "tools": [ { "name": "cancelAction", "selector": "[data-slot=\"button\"][data-tool=\"cancelAction\"]", "description": "Cancela la acción en curso o vuelve al paso anterior sin efectos destructivos", "params": [], "intent": "cancel", "confirmation": "none" } ], "context": [], "animations": [], "hash": "83226bc61d8923c1", "files": { "css": "components/shadcn-button-secondary/button-secondary.webmcp.css", "html": "components/shadcn-button-secondary/button-secondary.html", "meta": "components/shadcn-button-secondary/component.json", "page": "components/shadcn-button-secondary/" }, "importCommand": "npx webmcpcss components import shadcn-button-secondary", "promptExamples": [ "oculta el botón Cancelar", "cambia el texto del botón secundario a Volver" ], "animateExamples": [ "haz que el botón Cancelar aparezca deslizándose", "quita la animación del botón secundario" ] }, { "id": "core-product-card", "name": "Product Card", "category": "cards", "library": "core", "version": "1.0.0", "description": "Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.", "tags": [ "card", "product", "ecommerce", "cart", "core" ], "tools": [ { "name": "addToCart", "selector": "[data-component=\"product-card\"] [data-tool=\"addToCart\"]", "description": "Añade el producto de la tarjeta al carrito", "params": [ "productId" ], "intent": "action", "confirmation": "none" }, { "name": "viewDetails", "selector": "[data-component=\"product-card\"] [data-tool=\"viewDetails\"]", "description": "Abre la página de detalle del producto", "params": [ "productId" ], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "productName", "selector": "[data-component=\"product-card\"] [data-context=\"product-name\"]", "format": "text" }, { "name": "productPrice", "selector": "[data-component=\"product-card\"] [data-context=\"product-price\"]", "format": "currency" } ], "animations": [], "hash": "c249f5a0a53491fd", "files": { "css": "components/core-product-card/product-card.webmcp.css", "html": "components/core-product-card/product-card.html", "meta": "components/core-product-card/component.json", "page": "components/core-product-card/" }, "importCommand": "npx webmcpcss components import core-product-card", "promptExamples": [ "cambia el precio de la tarjeta a 39,90 €", "pon el botón Añadir al carrito en verde" ], "animateExamples": [ "haz que la tarjeta de producto aparezca con slide-up", "añade una elevación al pasar el ratón por la tarjeta" ] }, { "id": "core-profile-card", "name": "Profile Card", "category": "cards", "library": "core", "version": "1.0.0", "description": "Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).", "tags": [ "card", "profile", "user", "social", "core" ], "tools": [ { "name": "viewProfile", "selector": "[data-component=\"profile-card\"] [data-tool=\"viewProfile\"]", "description": "Abre el perfil completo de la persona", "params": [ "userId" ], "intent": "navigate", "confirmation": "none" }, { "name": "followUser", "selector": "[data-component=\"profile-card\"] [data-tool=\"followUser\"]", "description": "Sigue a la persona (acción social, requiere confirmación)", "params": [ "userId" ], "intent": "action", "confirmation": "needed" } ], "context": [ { "name": "profileName", "selector": "[data-component=\"profile-card\"] [data-context=\"profile-name\"]", "format": "text" }, { "name": "profileRole", "selector": "[data-component=\"profile-card\"] [data-context=\"profile-role\"]", "format": "text" } ], "animations": [], "hash": "276689651661d2e0", "files": { "css": "components/core-profile-card/profile-card.webmcp.css", "html": "components/core-profile-card/profile-card.html", "meta": "components/core-profile-card/component.json", "page": "components/core-profile-card/" }, "importCommand": "npx webmcpcss components import core-profile-card", "promptExamples": [ "cambia el nombre de la tarjeta de perfil a Ana Ruiz", "oculta el botón Seguir" ], "animateExamples": [ "aplica fade-in a la tarjeta de perfil", "haz que el avatar pulse suavemente" ] }, { "id": "tailwind-product-card", "name": "Product Card", "category": "cards", "library": "tailwind", "version": "1.0.0", "description": "Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.", "tags": [ "card", "product", "ecommerce", "cart", "tailwind" ], "tools": [ { "name": "addToCart", "selector": "[data-component=\"product-card\"] [data-tool=\"addToCart\"]", "description": "Añade el producto de la tarjeta al carrito", "params": [ "productId" ], "intent": "action", "confirmation": "none" }, { "name": "viewDetails", "selector": "[data-component=\"product-card\"] [data-tool=\"viewDetails\"]", "description": "Abre la página de detalle del producto", "params": [ "productId" ], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "productName", "selector": "[data-component=\"product-card\"] [data-context=\"product-name\"]", "format": "text" }, { "name": "productPrice", "selector": "[data-component=\"product-card\"] [data-context=\"product-price\"]", "format": "currency" } ], "animations": [], "hash": "9d0575397152e162", "files": { "css": "components/tailwind-product-card/product-card.webmcp.css", "html": "components/tailwind-product-card/product-card.html", "meta": "components/tailwind-product-card/component.json", "page": "components/tailwind-product-card/" }, "importCommand": "npx webmcpcss components import tailwind-product-card", "promptExamples": [ "cambia el precio de la tarjeta a 39,90 €", "pon el botón Añadir al carrito en verde" ], "animateExamples": [ "haz que la tarjeta de producto aparezca con slide-up", "añade una elevación al pasar el ratón por la tarjeta" ] }, { "id": "tailwind-profile-card", "name": "Profile Card", "category": "cards", "library": "tailwind", "version": "1.0.0", "description": "Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).", "tags": [ "card", "profile", "user", "social", "tailwind" ], "tools": [ { "name": "viewProfile", "selector": "[data-component=\"profile-card\"] [data-tool=\"viewProfile\"]", "description": "Abre el perfil completo de la persona", "params": [ "userId" ], "intent": "navigate", "confirmation": "none" }, { "name": "followUser", "selector": "[data-component=\"profile-card\"] [data-tool=\"followUser\"]", "description": "Sigue a la persona (acción social, requiere confirmación)", "params": [ "userId" ], "intent": "action", "confirmation": "needed" } ], "context": [ { "name": "profileName", "selector": "[data-component=\"profile-card\"] [data-context=\"profile-name\"]", "format": "text" }, { "name": "profileRole", "selector": "[data-component=\"profile-card\"] [data-context=\"profile-role\"]", "format": "text" } ], "animations": [], "hash": "2112b8d4ac54b3f3", "files": { "css": "components/tailwind-profile-card/profile-card.webmcp.css", "html": "components/tailwind-profile-card/profile-card.html", "meta": "components/tailwind-profile-card/component.json", "page": "components/tailwind-profile-card/" }, "importCommand": "npx webmcpcss components import tailwind-profile-card", "promptExamples": [ "cambia el nombre de la tarjeta de perfil a Ana Ruiz", "oculta el botón Seguir" ], "animateExamples": [ "aplica fade-in a la tarjeta de perfil", "haz que el avatar pulse suavemente" ] }, { "id": "bootstrap-product-card", "name": "Product Card", "category": "cards", "library": "bootstrap", "version": "1.0.0", "description": "Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.", "tags": [ "card", "product", "ecommerce", "cart", "bootstrap" ], "tools": [ { "name": "addToCart", "selector": ".card[data-component=\"product-card\"] [data-tool=\"addToCart\"]", "description": "Añade el producto de la tarjeta al carrito", "params": [ "productId" ], "intent": "action", "confirmation": "none" }, { "name": "viewDetails", "selector": ".card[data-component=\"product-card\"] [data-tool=\"viewDetails\"]", "description": "Abre la página de detalle del producto", "params": [ "productId" ], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "productName", "selector": ".card[data-component=\"product-card\"] [data-context=\"product-name\"]", "format": "text" }, { "name": "productPrice", "selector": ".card[data-component=\"product-card\"] [data-context=\"product-price\"]", "format": "currency" } ], "animations": [], "hash": "052a0a64150d75cc", "files": { "css": "components/bootstrap-product-card/product-card.webmcp.css", "html": "components/bootstrap-product-card/product-card.html", "meta": "components/bootstrap-product-card/component.json", "page": "components/bootstrap-product-card/" }, "importCommand": "npx webmcpcss components import bootstrap-product-card", "promptExamples": [ "cambia el precio de la tarjeta a 39,90 €", "pon el botón Añadir al carrito en verde" ], "animateExamples": [ "haz que la tarjeta de producto aparezca con slide-up", "añade una elevación al pasar el ratón por la tarjeta" ] }, { "id": "bootstrap-profile-card", "name": "Profile Card", "category": "cards", "library": "bootstrap", "version": "1.0.0", "description": "Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).", "tags": [ "card", "profile", "user", "social", "bootstrap" ], "tools": [ { "name": "viewProfile", "selector": ".card[data-component=\"profile-card\"] [data-tool=\"viewProfile\"]", "description": "Abre el perfil completo de la persona", "params": [ "userId" ], "intent": "navigate", "confirmation": "none" }, { "name": "followUser", "selector": ".card[data-component=\"profile-card\"] [data-tool=\"followUser\"]", "description": "Sigue a la persona (acción social, requiere confirmación)", "params": [ "userId" ], "intent": "action", "confirmation": "needed" } ], "context": [ { "name": "profileName", "selector": ".card[data-component=\"profile-card\"] [data-context=\"profile-name\"]", "format": "text" }, { "name": "profileRole", "selector": ".card[data-component=\"profile-card\"] [data-context=\"profile-role\"]", "format": "text" } ], "animations": [], "hash": "043dc3f263bc4099", "files": { "css": "components/bootstrap-profile-card/profile-card.webmcp.css", "html": "components/bootstrap-profile-card/profile-card.html", "meta": "components/bootstrap-profile-card/component.json", "page": "components/bootstrap-profile-card/" }, "importCommand": "npx webmcpcss components import bootstrap-profile-card", "promptExamples": [ "cambia el nombre de la tarjeta de perfil a Ana Ruiz", "oculta el botón Seguir" ], "animateExamples": [ "aplica fade-in a la tarjeta de perfil", "haz que el avatar pulse suavemente" ] }, { "id": "mui-product-card", "name": "Product Card", "category": "cards", "library": "mui", "version": "1.0.0", "description": "Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.", "tags": [ "card", "product", "ecommerce", "cart", "mui" ], "tools": [ { "name": "addToCart", "selector": ".MuiCard-root[data-component=\"product-card\"] [data-tool=\"addToCart\"]", "description": "Añade el producto de la tarjeta al carrito", "params": [ "productId" ], "intent": "action", "confirmation": "none" }, { "name": "viewDetails", "selector": ".MuiCard-root[data-component=\"product-card\"] [data-tool=\"viewDetails\"]", "description": "Abre la página de detalle del producto", "params": [ "productId" ], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "productName", "selector": ".MuiCard-root[data-component=\"product-card\"] [data-context=\"product-name\"]", "format": "text" }, { "name": "productPrice", "selector": ".MuiCard-root[data-component=\"product-card\"] [data-context=\"product-price\"]", "format": "currency" } ], "animations": [], "hash": "cc58367148b40a9b", "files": { "css": "components/mui-product-card/product-card.webmcp.css", "html": "components/mui-product-card/product-card.html", "meta": "components/mui-product-card/component.json", "page": "components/mui-product-card/" }, "importCommand": "npx webmcpcss components import mui-product-card", "promptExamples": [ "cambia el precio de la tarjeta a 39,90 €", "pon el botón Añadir al carrito en verde" ], "animateExamples": [ "haz que la tarjeta de producto aparezca con slide-up", "añade una elevación al pasar el ratón por la tarjeta" ] }, { "id": "mui-profile-card", "name": "Profile Card", "category": "cards", "library": "mui", "version": "1.0.0", "description": "Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).", "tags": [ "card", "profile", "user", "social", "mui" ], "tools": [ { "name": "viewProfile", "selector": ".MuiCard-root[data-component=\"profile-card\"] [data-tool=\"viewProfile\"]", "description": "Abre el perfil completo de la persona", "params": [ "userId" ], "intent": "navigate", "confirmation": "none" }, { "name": "followUser", "selector": ".MuiCard-root[data-component=\"profile-card\"] [data-tool=\"followUser\"]", "description": "Sigue a la persona (acción social, requiere confirmación)", "params": [ "userId" ], "intent": "action", "confirmation": "needed" } ], "context": [ { "name": "profileName", "selector": ".MuiCard-root[data-component=\"profile-card\"] [data-context=\"profile-name\"]", "format": "text" }, { "name": "profileRole", "selector": ".MuiCard-root[data-component=\"profile-card\"] [data-context=\"profile-role\"]", "format": "text" } ], "animations": [], "hash": "c2d8250b4c4f35be", "files": { "css": "components/mui-profile-card/profile-card.webmcp.css", "html": "components/mui-profile-card/profile-card.html", "meta": "components/mui-profile-card/component.json", "page": "components/mui-profile-card/" }, "importCommand": "npx webmcpcss components import mui-profile-card", "promptExamples": [ "cambia el nombre de la tarjeta de perfil a Ana Ruiz", "oculta el botón Seguir" ], "animateExamples": [ "aplica fade-in a la tarjeta de perfil", "haz que el avatar pulse suavemente" ] }, { "id": "shadcn-product-card", "name": "Product Card", "category": "cards", "library": "shadcn", "version": "1.0.0", "description": "Tarjeta de producto IA-First: imagen, nombre, precio y acciones addToCart / viewDetails; expone nombre y precio como contexto para agentes.", "tags": [ "card", "product", "ecommerce", "cart", "shadcn" ], "tools": [ { "name": "addToCart", "selector": "[data-slot=\"card\"][data-component=\"product-card\"] [data-tool=\"addToCart\"]", "description": "Añade el producto de la tarjeta al carrito", "params": [ "productId" ], "intent": "action", "confirmation": "none" }, { "name": "viewDetails", "selector": "[data-slot=\"card\"][data-component=\"product-card\"] [data-tool=\"viewDetails\"]", "description": "Abre la página de detalle del producto", "params": [ "productId" ], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "productName", "selector": "[data-slot=\"card\"][data-component=\"product-card\"] [data-context=\"product-name\"]", "format": "text" }, { "name": "productPrice", "selector": "[data-slot=\"card\"][data-component=\"product-card\"] [data-context=\"product-price\"]", "format": "currency" } ], "animations": [], "hash": "4806d4e56317aba3", "files": { "css": "components/shadcn-product-card/product-card.webmcp.css", "html": "components/shadcn-product-card/product-card.html", "meta": "components/shadcn-product-card/component.json", "page": "components/shadcn-product-card/" }, "importCommand": "npx webmcpcss components import shadcn-product-card", "promptExamples": [ "cambia el precio de la tarjeta a 39,90 €", "pon el botón Añadir al carrito en verde" ], "animateExamples": [ "haz que la tarjeta de producto aparezca con slide-up", "añade una elevación al pasar el ratón por la tarjeta" ] }, { "id": "shadcn-profile-card", "name": "Profile Card", "category": "cards", "library": "shadcn", "version": "1.0.0", "description": "Tarjeta de perfil IA-First: avatar, nombre, rol y biografía con acciones viewProfile / followUser (esta última con confirmación).", "tags": [ "card", "profile", "user", "social", "shadcn" ], "tools": [ { "name": "viewProfile", "selector": "[data-slot=\"card\"][data-component=\"profile-card\"] [data-tool=\"viewProfile\"]", "description": "Abre el perfil completo de la persona", "params": [ "userId" ], "intent": "navigate", "confirmation": "none" }, { "name": "followUser", "selector": "[data-slot=\"card\"][data-component=\"profile-card\"] [data-tool=\"followUser\"]", "description": "Sigue a la persona (acción social, requiere confirmación)", "params": [ "userId" ], "intent": "action", "confirmation": "needed" } ], "context": [ { "name": "profileName", "selector": "[data-slot=\"card\"][data-component=\"profile-card\"] [data-context=\"profile-name\"]", "format": "text" }, { "name": "profileRole", "selector": "[data-slot=\"card\"][data-component=\"profile-card\"] [data-context=\"profile-role\"]", "format": "text" } ], "animations": [], "hash": "f6d7034bba0cbbfc", "files": { "css": "components/shadcn-profile-card/profile-card.webmcp.css", "html": "components/shadcn-profile-card/profile-card.html", "meta": "components/shadcn-profile-card/component.json", "page": "components/shadcn-profile-card/" }, "importCommand": "npx webmcpcss components import shadcn-profile-card", "promptExamples": [ "cambia el nombre de la tarjeta de perfil a Ana Ruiz", "oculta el botón Seguir" ], "animateExamples": [ "aplica fade-in a la tarjeta de perfil", "haz que el avatar pulse suavemente" ] }, { "id": "core-contact-form", "name": "Contact Form", "category": "forms", "library": "core", "version": "1.0.0", "description": "Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.", "tags": [ "form", "contact", "declarative", "autosubmit", "core" ], "tools": [ { "name": "sendMessage", "selector": "form[data-form=\"contact-form\"] button[type=\"submit\"]", "description": "Envía un mensaje de contacto con nombre, correo y texto", "params": [ "name", "email", "message" ], "intent": "submit", "confirmation": "none" } ], "context": [], "animations": [], "hash": "8e07327a53739f74", "files": { "css": "components/core-contact-form/contact-form.webmcp.css", "html": "components/core-contact-form/contact-form.html", "meta": "components/core-contact-form/component.json", "page": "components/core-contact-form/" }, "importCommand": "npx webmcpcss components import core-contact-form", "promptExamples": [ "añade un campo de teléfono al formulario de contacto", "cambia el color del botón Enviar mensaje" ], "animateExamples": [ "aplica slide-up al formulario de contacto", "haz que el botón de enviar pulse cuando el formulario sea válido" ] }, { "id": "core-login-form", "name": "Login Form", "category": "forms", "library": "core", "version": "1.0.0", "description": "Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.", "tags": [ "form", "login", "auth", "declarative", "core" ], "tools": [ { "name": "login", "selector": "form[data-form=\"login-form\"] button[type=\"submit\"]", "description": "Inicia sesión con correo y contraseña", "params": [ "email", "password" ], "intent": "submit", "confirmation": "needed" } ], "context": [], "animations": [], "hash": "7152746fc0cced92", "files": { "css": "components/core-login-form/login-form.webmcp.css", "html": "components/core-login-form/login-form.html", "meta": "components/core-login-form/component.json", "page": "components/core-login-form/" }, "importCommand": "npx webmcpcss components import core-login-form", "promptExamples": [ "añade un enlace de “¿olvidaste tu contraseña?” bajo el formulario", "cambia el texto del botón Entrar a Acceder" ], "animateExamples": [ "haz que el formulario de login aparezca con fade-in", "agita el formulario cuando falle el acceso" ] }, { "id": "tailwind-contact-form", "name": "Contact Form", "category": "forms", "library": "tailwind", "version": "1.0.0", "description": "Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.", "tags": [ "form", "contact", "declarative", "autosubmit", "tailwind" ], "tools": [ { "name": "sendMessage", "selector": "form[data-form=\"contact-form\"] button[type=\"submit\"]", "description": "Envía un mensaje de contacto con nombre, correo y texto", "params": [ "name", "email", "message" ], "intent": "submit", "confirmation": "none" } ], "context": [], "animations": [], "hash": "f4d3319d18bf749a", "files": { "css": "components/tailwind-contact-form/contact-form.webmcp.css", "html": "components/tailwind-contact-form/contact-form.html", "meta": "components/tailwind-contact-form/component.json", "page": "components/tailwind-contact-form/" }, "importCommand": "npx webmcpcss components import tailwind-contact-form", "promptExamples": [ "añade un campo de teléfono al formulario de contacto", "cambia el color del botón Enviar mensaje" ], "animateExamples": [ "aplica slide-up al formulario de contacto", "haz que el botón de enviar pulse cuando el formulario sea válido" ] }, { "id": "tailwind-login-form", "name": "Login Form", "category": "forms", "library": "tailwind", "version": "1.0.0", "description": "Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.", "tags": [ "form", "login", "auth", "declarative", "tailwind" ], "tools": [ { "name": "login", "selector": "form[data-form=\"login-form\"] button[type=\"submit\"]", "description": "Inicia sesión con correo y contraseña", "params": [ "email", "password" ], "intent": "submit", "confirmation": "needed" } ], "context": [], "animations": [], "hash": "98a2b701aeec6126", "files": { "css": "components/tailwind-login-form/login-form.webmcp.css", "html": "components/tailwind-login-form/login-form.html", "meta": "components/tailwind-login-form/component.json", "page": "components/tailwind-login-form/" }, "importCommand": "npx webmcpcss components import tailwind-login-form", "promptExamples": [ "añade un enlace de “¿olvidaste tu contraseña?” bajo el formulario", "cambia el texto del botón Entrar a Acceder" ], "animateExamples": [ "haz que el formulario de login aparezca con fade-in", "agita el formulario cuando falle el acceso" ] }, { "id": "bootstrap-contact-form", "name": "Contact Form", "category": "forms", "library": "bootstrap", "version": "1.0.0", "description": "Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.", "tags": [ "form", "contact", "declarative", "autosubmit", "bootstrap" ], "tools": [ { "name": "sendMessage", "selector": "form[data-form=\"contact-form\"] button[type=\"submit\"]", "description": "Envía un mensaje de contacto con nombre, correo y texto", "params": [ "name", "email", "message" ], "intent": "submit", "confirmation": "none" } ], "context": [], "animations": [], "hash": "03a99a99cda61af8", "files": { "css": "components/bootstrap-contact-form/contact-form.webmcp.css", "html": "components/bootstrap-contact-form/contact-form.html", "meta": "components/bootstrap-contact-form/component.json", "page": "components/bootstrap-contact-form/" }, "importCommand": "npx webmcpcss components import bootstrap-contact-form", "promptExamples": [ "añade un campo de teléfono al formulario de contacto", "cambia el color del botón Enviar mensaje" ], "animateExamples": [ "aplica slide-up al formulario de contacto", "haz que el botón de enviar pulse cuando el formulario sea válido" ] }, { "id": "bootstrap-login-form", "name": "Login Form", "category": "forms", "library": "bootstrap", "version": "1.0.0", "description": "Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.", "tags": [ "form", "login", "auth", "declarative", "bootstrap" ], "tools": [ { "name": "login", "selector": "form[data-form=\"login-form\"] button[type=\"submit\"]", "description": "Inicia sesión con correo y contraseña", "params": [ "email", "password" ], "intent": "submit", "confirmation": "needed" } ], "context": [], "animations": [], "hash": "e5162358459004c5", "files": { "css": "components/bootstrap-login-form/login-form.webmcp.css", "html": "components/bootstrap-login-form/login-form.html", "meta": "components/bootstrap-login-form/component.json", "page": "components/bootstrap-login-form/" }, "importCommand": "npx webmcpcss components import bootstrap-login-form", "promptExamples": [ "añade un enlace de “¿olvidaste tu contraseña?” bajo el formulario", "cambia el texto del botón Entrar a Acceder" ], "animateExamples": [ "haz que el formulario de login aparezca con fade-in", "agita el formulario cuando falle el acceso" ] }, { "id": "mui-contact-form", "name": "Contact Form", "category": "forms", "library": "mui", "version": "1.0.0", "description": "Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.", "tags": [ "form", "contact", "declarative", "autosubmit", "mui" ], "tools": [ { "name": "sendMessage", "selector": "form[data-form=\"contact-form\"] button[type=\"submit\"]", "description": "Envía un mensaje de contacto con nombre, correo y texto", "params": [ "name", "email", "message" ], "intent": "submit", "confirmation": "none" } ], "context": [], "animations": [], "hash": "ffa467cb6a165df2", "files": { "css": "components/mui-contact-form/contact-form.webmcp.css", "html": "components/mui-contact-form/contact-form.html", "meta": "components/mui-contact-form/component.json", "page": "components/mui-contact-form/" }, "importCommand": "npx webmcpcss components import mui-contact-form", "promptExamples": [ "añade un campo de teléfono al formulario de contacto", "cambia el color del botón Enviar mensaje" ], "animateExamples": [ "aplica slide-up al formulario de contacto", "haz que el botón de enviar pulse cuando el formulario sea válido" ] }, { "id": "mui-login-form", "name": "Login Form", "category": "forms", "library": "mui", "version": "1.0.0", "description": "Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.", "tags": [ "form", "login", "auth", "declarative", "mui" ], "tools": [ { "name": "login", "selector": "form[data-form=\"login-form\"] button[type=\"submit\"]", "description": "Inicia sesión con correo y contraseña", "params": [ "email", "password" ], "intent": "submit", "confirmation": "needed" } ], "context": [], "animations": [], "hash": "5a14833ac9a979ac", "files": { "css": "components/mui-login-form/login-form.webmcp.css", "html": "components/mui-login-form/login-form.html", "meta": "components/mui-login-form/component.json", "page": "components/mui-login-form/" }, "importCommand": "npx webmcpcss components import mui-login-form", "promptExamples": [ "añade un enlace de “¿olvidaste tu contraseña?” bajo el formulario", "cambia el texto del botón Entrar a Acceder" ], "animateExamples": [ "haz que el formulario de login aparezca con fade-in", "agita el formulario cuando falle el acceso" ] }, { "id": "shadcn-contact-form", "name": "Contact Form", "category": "forms", "library": "shadcn", "version": "1.0.0", "description": "Formulario de contacto IA-First (nombre, email, mensaje) con API declarativa WebMCP y toolautosubmit: un agente puede rellenarlo y enviarlo sin intervención.", "tags": [ "form", "contact", "declarative", "autosubmit", "shadcn" ], "tools": [ { "name": "sendMessage", "selector": "form[data-form=\"contact-form\"] button[type=\"submit\"]", "description": "Envía un mensaje de contacto con nombre, correo y texto", "params": [ "name", "email", "message" ], "intent": "submit", "confirmation": "none" } ], "context": [], "animations": [], "hash": "5018a1ead30296e6", "files": { "css": "components/shadcn-contact-form/contact-form.webmcp.css", "html": "components/shadcn-contact-form/contact-form.html", "meta": "components/shadcn-contact-form/component.json", "page": "components/shadcn-contact-form/" }, "importCommand": "npx webmcpcss components import shadcn-contact-form", "promptExamples": [ "añade un campo de teléfono al formulario de contacto", "cambia el color del botón Enviar mensaje" ], "animateExamples": [ "aplica slide-up al formulario de contacto", "haz que el botón de enviar pulse cuando el formulario sea válido" ] }, { "id": "shadcn-login-form", "name": "Login Form", "category": "forms", "library": "shadcn", "version": "1.0.0", "description": "Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.", "tags": [ "form", "login", "auth", "declarative", "shadcn" ], "tools": [ { "name": "login", "selector": "form[data-form=\"login-form\"] button[type=\"submit\"]", "description": "Inicia sesión con correo y contraseña", "params": [ "email", "password" ], "intent": "submit", "confirmation": "needed" } ], "context": [], "animations": [], "hash": "7eb14a31631bfd43", "files": { "css": "components/shadcn-login-form/login-form.webmcp.css", "html": "components/shadcn-login-form/login-form.html", "meta": "components/shadcn-login-form/component.json", "page": "components/shadcn-login-form/" }, "importCommand": "npx webmcpcss components import shadcn-login-form", "promptExamples": [ "añade un enlace de “¿olvidaste tu contraseña?” bajo el formulario", "cambia el texto del botón Entrar a Acceder" ], "animateExamples": [ "haz que el formulario de login aparezca con fade-in", "agita el formulario cuando falle el acceso" ] }, { "id": "core-hero", "name": "Hero", "category": "layout", "library": "core", "version": "1.0.0", "description": "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.", "tags": [ "layout", "hero", "landing", "cta", "core" ], "tools": [ { "name": "startNow", "selector": "[data-component=\"hero\"] [data-tool=\"startNow\"]", "description": "Llamada a la acción principal del hero: empieza el registro o la prueba", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "watchDemo", "selector": "[data-component=\"hero\"] [data-tool=\"watchDemo\"]", "description": "Abre la demostración en vídeo", "params": [], "intent": "action", "confirmation": "none" } ], "context": [ { "name": "heroTitle", "selector": "[data-component=\"hero\"] [data-context=\"hero-title\"]", "format": "text" }, { "name": "heroSubtitle", "selector": "[data-component=\"hero\"] [data-context=\"hero-subtitle\"]", "format": "text" } ], "animations": [ { "name": "heroTitleIn", "type": "keyframes", "selector": "[data-component=\"hero\"] [data-context=\"hero-title\"]" } ], "hash": "175fef9fcdd30872", "files": { "css": "components/core-hero/hero.webmcp.css", "html": "components/core-hero/hero.html", "meta": "components/core-hero/component.json", "page": "components/core-hero/" }, "importCommand": "npx webmcpcss components import core-hero", "promptExamples": [ "cambia el título del hero a “Componentes nativos para agentes”", "pon el botón Empezar ahora en verde" ], "animateExamples": [ "aplica parallax al fondo del hero", "haz que el subtítulo aparezca con retardo" ] }, { "id": "core-navbar", "name": "Navbar", "category": "layout", "library": "core", "version": "1.0.0", "description": "Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.", "tags": [ "layout", "navigation", "navbar", "header", "core" ], "tools": [ { "name": "goHome", "selector": "nav[data-component=\"navbar\"] [data-tool=\"goHome\"]", "description": "Vuelve a la página de inicio", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "openMenu", "selector": "nav[data-component=\"navbar\"] [data-tool=\"openMenu\"]", "description": "Abre o cierra el menú de navegación (móvil)", "params": [], "intent": "action", "confirmation": "none" }, { "name": "signUp", "selector": "nav[data-component=\"navbar\"] [data-tool=\"signUp\"]", "description": "Abre el registro de cuenta (llamada a la acción de la barra)", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "activeSection", "selector": "nav[data-component=\"navbar\"] [aria-current=\"page\"]", "format": "text" } ], "animations": [], "hash": "3ee419358ff9e5b4", "files": { "css": "components/core-navbar/navbar.webmcp.css", "html": "components/core-navbar/navbar.html", "meta": "components/core-navbar/component.json", "page": "components/core-navbar/" }, "importCommand": "npx webmcpcss components import core-navbar", "promptExamples": [ "añade un enlace “Precios” a la barra de navegación", "cambia el color de fondo de la navbar" ], "animateExamples": [ "haz que la navbar aparezca deslizándose desde arriba", "añade fade-in a los enlaces del menú" ] }, { "id": "tailwind-hero", "name": "Hero", "category": "layout", "library": "tailwind", "version": "1.0.0", "description": "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.", "tags": [ "layout", "hero", "landing", "cta", "tailwind" ], "tools": [ { "name": "startNow", "selector": "[data-component=\"hero\"] [data-tool=\"startNow\"]", "description": "Llamada a la acción principal del hero: empieza el registro o la prueba", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "watchDemo", "selector": "[data-component=\"hero\"] [data-tool=\"watchDemo\"]", "description": "Abre la demostración en vídeo", "params": [], "intent": "action", "confirmation": "none" } ], "context": [ { "name": "heroTitle", "selector": "[data-component=\"hero\"] [data-context=\"hero-title\"]", "format": "text" }, { "name": "heroSubtitle", "selector": "[data-component=\"hero\"] [data-context=\"hero-subtitle\"]", "format": "text" } ], "animations": [ { "name": "heroTitleIn", "type": "keyframes", "selector": "[data-component=\"hero\"] [data-context=\"hero-title\"]" } ], "hash": "4e1f02ab7b95d494", "files": { "css": "components/tailwind-hero/hero.webmcp.css", "html": "components/tailwind-hero/hero.html", "meta": "components/tailwind-hero/component.json", "page": "components/tailwind-hero/" }, "importCommand": "npx webmcpcss components import tailwind-hero", "promptExamples": [ "cambia el título del hero a “Componentes nativos para agentes”", "pon el botón Empezar ahora en verde" ], "animateExamples": [ "aplica parallax al fondo del hero", "haz que el subtítulo aparezca con retardo" ] }, { "id": "tailwind-navbar", "name": "Navbar", "category": "layout", "library": "tailwind", "version": "1.0.0", "description": "Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.", "tags": [ "layout", "navigation", "navbar", "header", "tailwind" ], "tools": [ { "name": "goHome", "selector": "nav[data-component=\"navbar\"] [data-tool=\"goHome\"]", "description": "Vuelve a la página de inicio", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "openMenu", "selector": "nav[data-component=\"navbar\"] [data-tool=\"openMenu\"]", "description": "Abre o cierra el menú de navegación (móvil)", "params": [], "intent": "action", "confirmation": "none" }, { "name": "signUp", "selector": "nav[data-component=\"navbar\"] [data-tool=\"signUp\"]", "description": "Abre el registro de cuenta (llamada a la acción de la barra)", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "activeSection", "selector": "nav[data-component=\"navbar\"] [aria-current=\"page\"]", "format": "text" } ], "animations": [], "hash": "342277d4a2c5efac", "files": { "css": "components/tailwind-navbar/navbar.webmcp.css", "html": "components/tailwind-navbar/navbar.html", "meta": "components/tailwind-navbar/component.json", "page": "components/tailwind-navbar/" }, "importCommand": "npx webmcpcss components import tailwind-navbar", "promptExamples": [ "añade un enlace “Precios” a la barra de navegación", "cambia el color de fondo de la navbar" ], "animateExamples": [ "haz que la navbar aparezca deslizándose desde arriba", "añade fade-in a los enlaces del menú" ] }, { "id": "bootstrap-hero", "name": "Hero", "category": "layout", "library": "bootstrap", "version": "1.0.0", "description": "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.", "tags": [ "layout", "hero", "landing", "cta", "bootstrap" ], "tools": [ { "name": "startNow", "selector": "[data-component=\"hero\"] [data-tool=\"startNow\"]", "description": "Llamada a la acción principal del hero: empieza el registro o la prueba", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "watchDemo", "selector": "[data-component=\"hero\"] [data-tool=\"watchDemo\"]", "description": "Abre la demostración en vídeo", "params": [], "intent": "action", "confirmation": "none" } ], "context": [ { "name": "heroTitle", "selector": "[data-component=\"hero\"] [data-context=\"hero-title\"]", "format": "text" }, { "name": "heroSubtitle", "selector": "[data-component=\"hero\"] [data-context=\"hero-subtitle\"]", "format": "text" } ], "animations": [ { "name": "heroTitleIn", "type": "keyframes", "selector": "[data-component=\"hero\"] [data-context=\"hero-title\"]" } ], "hash": "1c5a9b7c36a25dcc", "files": { "css": "components/bootstrap-hero/hero.webmcp.css", "html": "components/bootstrap-hero/hero.html", "meta": "components/bootstrap-hero/component.json", "page": "components/bootstrap-hero/" }, "importCommand": "npx webmcpcss components import bootstrap-hero", "promptExamples": [ "cambia el título del hero a “Componentes nativos para agentes”", "pon el botón Empezar ahora en verde" ], "animateExamples": [ "aplica parallax al fondo del hero", "haz que el subtítulo aparezca con retardo" ] }, { "id": "bootstrap-navbar", "name": "Navbar", "category": "layout", "library": "bootstrap", "version": "1.0.0", "description": "Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.", "tags": [ "layout", "navigation", "navbar", "header", "bootstrap" ], "tools": [ { "name": "goHome", "selector": ".navbar[data-component=\"navbar\"] [data-tool=\"goHome\"]", "description": "Vuelve a la página de inicio", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "openMenu", "selector": ".navbar[data-component=\"navbar\"] [data-tool=\"openMenu\"]", "description": "Abre o cierra el menú de navegación (móvil)", "params": [], "intent": "action", "confirmation": "none" }, { "name": "signUp", "selector": ".navbar[data-component=\"navbar\"] [data-tool=\"signUp\"]", "description": "Abre el registro de cuenta (llamada a la acción de la barra)", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "activeSection", "selector": ".navbar[data-component=\"navbar\"] [aria-current=\"page\"]", "format": "text" } ], "animations": [], "hash": "aeaa785757c3e6bb", "files": { "css": "components/bootstrap-navbar/navbar.webmcp.css", "html": "components/bootstrap-navbar/navbar.html", "meta": "components/bootstrap-navbar/component.json", "page": "components/bootstrap-navbar/" }, "importCommand": "npx webmcpcss components import bootstrap-navbar", "promptExamples": [ "añade un enlace “Precios” a la barra de navegación", "cambia el color de fondo de la navbar" ], "animateExamples": [ "haz que la navbar aparezca deslizándose desde arriba", "añade fade-in a los enlaces del menú" ] }, { "id": "mui-hero", "name": "Hero", "category": "layout", "library": "mui", "version": "1.0.0", "description": "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.", "tags": [ "layout", "hero", "landing", "cta", "mui" ], "tools": [ { "name": "startNow", "selector": "[data-component=\"hero\"] [data-tool=\"startNow\"]", "description": "Llamada a la acción principal del hero: empieza el registro o la prueba", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "watchDemo", "selector": "[data-component=\"hero\"] [data-tool=\"watchDemo\"]", "description": "Abre la demostración en vídeo", "params": [], "intent": "action", "confirmation": "none" } ], "context": [ { "name": "heroTitle", "selector": "[data-component=\"hero\"] [data-context=\"hero-title\"]", "format": "text" }, { "name": "heroSubtitle", "selector": "[data-component=\"hero\"] [data-context=\"hero-subtitle\"]", "format": "text" } ], "animations": [ { "name": "heroTitleIn", "type": "keyframes", "selector": "[data-component=\"hero\"] [data-context=\"hero-title\"]" } ], "hash": "3bbe4e6ecae91871", "files": { "css": "components/mui-hero/hero.webmcp.css", "html": "components/mui-hero/hero.html", "meta": "components/mui-hero/component.json", "page": "components/mui-hero/" }, "importCommand": "npx webmcpcss components import mui-hero", "promptExamples": [ "cambia el título del hero a “Componentes nativos para agentes”", "pon el botón Empezar ahora en verde" ], "animateExamples": [ "aplica parallax al fondo del hero", "haz que el subtítulo aparezca con retardo" ] }, { "id": "mui-navbar", "name": "Navbar", "category": "layout", "library": "mui", "version": "1.0.0", "description": "Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.", "tags": [ "layout", "navigation", "navbar", "header", "mui" ], "tools": [ { "name": "goHome", "selector": ".MuiAppBar-root[data-component=\"navbar\"] [data-tool=\"goHome\"]", "description": "Vuelve a la página de inicio", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "openMenu", "selector": ".MuiAppBar-root[data-component=\"navbar\"] [data-tool=\"openMenu\"]", "description": "Abre o cierra el menú de navegación (móvil)", "params": [], "intent": "action", "confirmation": "none" }, { "name": "signUp", "selector": ".MuiAppBar-root[data-component=\"navbar\"] [data-tool=\"signUp\"]", "description": "Abre el registro de cuenta (llamada a la acción de la barra)", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "activeSection", "selector": ".MuiAppBar-root[data-component=\"navbar\"] [aria-current=\"page\"]", "format": "text" } ], "animations": [], "hash": "32ec589ea98761a7", "files": { "css": "components/mui-navbar/navbar.webmcp.css", "html": "components/mui-navbar/navbar.html", "meta": "components/mui-navbar/component.json", "page": "components/mui-navbar/" }, "importCommand": "npx webmcpcss components import mui-navbar", "promptExamples": [ "añade un enlace “Precios” a la barra de navegación", "cambia el color de fondo de la navbar" ], "animateExamples": [ "haz que la navbar aparezca deslizándose desde arriba", "añade fade-in a los enlaces del menú" ] }, { "id": "shadcn-hero", "name": "Hero", "category": "layout", "library": "shadcn", "version": "1.0.0", "description": "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.", "tags": [ "layout", "hero", "landing", "cta", "shadcn" ], "tools": [ { "name": "startNow", "selector": "[data-component=\"hero\"] [data-tool=\"startNow\"]", "description": "Llamada a la acción principal del hero: empieza el registro o la prueba", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "watchDemo", "selector": "[data-component=\"hero\"] [data-tool=\"watchDemo\"]", "description": "Abre la demostración en vídeo", "params": [], "intent": "action", "confirmation": "none" } ], "context": [ { "name": "heroTitle", "selector": "[data-component=\"hero\"] [data-context=\"hero-title\"]", "format": "text" }, { "name": "heroSubtitle", "selector": "[data-component=\"hero\"] [data-context=\"hero-subtitle\"]", "format": "text" } ], "animations": [ { "name": "heroTitleIn", "type": "keyframes", "selector": "[data-component=\"hero\"] [data-context=\"hero-title\"]" } ], "hash": "e3463665b1895159", "files": { "css": "components/shadcn-hero/hero.webmcp.css", "html": "components/shadcn-hero/hero.html", "meta": "components/shadcn-hero/component.json", "page": "components/shadcn-hero/" }, "importCommand": "npx webmcpcss components import shadcn-hero", "promptExamples": [ "cambia el título del hero a “Componentes nativos para agentes”", "pon el botón Empezar ahora en verde" ], "animateExamples": [ "aplica parallax al fondo del hero", "haz que el subtítulo aparezca con retardo" ] }, { "id": "shadcn-navbar", "name": "Navbar", "category": "layout", "library": "shadcn", "version": "1.0.0", "description": "Barra de navegación IA-First: logo, enlaces con aria-current, menú móvil y CTA; herramientas goHome / openMenu / signUp y contexto activeSection.", "tags": [ "layout", "navigation", "navbar", "header", "shadcn" ], "tools": [ { "name": "goHome", "selector": "nav[data-component=\"navbar\"] [data-tool=\"goHome\"]", "description": "Vuelve a la página de inicio", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "openMenu", "selector": "nav[data-component=\"navbar\"] [data-tool=\"openMenu\"]", "description": "Abre o cierra el menú de navegación (móvil)", "params": [], "intent": "action", "confirmation": "none" }, { "name": "signUp", "selector": "nav[data-component=\"navbar\"] [data-tool=\"signUp\"]", "description": "Abre el registro de cuenta (llamada a la acción de la barra)", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "activeSection", "selector": "nav[data-component=\"navbar\"] [aria-current=\"page\"]", "format": "text" } ], "animations": [], "hash": "5917ad225d38dc77", "files": { "css": "components/shadcn-navbar/navbar.webmcp.css", "html": "components/shadcn-navbar/navbar.html", "meta": "components/shadcn-navbar/component.json", "page": "components/shadcn-navbar/" }, "importCommand": "npx webmcpcss components import shadcn-navbar", "promptExamples": [ "añade un enlace “Precios” a la barra de navegación", "cambia el color de fondo de la navbar" ], "animateExamples": [ "haz que la navbar aparezca deslizándose desde arriba", "añade fade-in a los enlaces del menú" ] }, { "id": "core-isometric-2-5d", "name": "2.5D Isometric", "category": "animations", "library": "core", "version": "1.0.0", "description": "Animación reutilizable de proyección isométrica 2.5D (rotación X/Z con perspectiva) declarada con webmcp-animation-type: isometric.", "tags": [ "animation", "isometric", "2.5d", "3d", "core" ], "tools": [], "context": [], "animations": [ { "name": "isoTilt", "type": "isometric", "selector": "[data-animation=\"isometric-2-5d\"]" } ], "hash": "91faa987edd5f980", "files": { "css": "components/core-isometric-2-5d/isometric-2-5d.webmcp.css", "html": "components/core-isometric-2-5d/isometric-2-5d.html", "meta": "components/core-isometric-2-5d/component.json", "page": "components/core-isometric-2-5d/" }, "importCommand": "npx webmcpcss components import core-isometric-2-5d", "promptExamples": [ "aplica la animación 2.5D al botón Comprar" ], "animateExamples": [ "reduce la inclinación isométrica a 40 grados", "convierte la escena isométrica en un flip 3D" ] }, { "id": "core-fade-in", "name": "Fade In", "category": "animations", "library": "core", "version": "1.0.0", "description": "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.", "tags": [ "animation", "fade", "entrance", "core" ], "tools": [], "context": [], "animations": [ { "name": "fadeIn", "type": "keyframes", "selector": "[data-animation=\"fade-in\"]" } ], "hash": "dfade1a04e77856d", "files": { "css": "components/core-fade-in/fade-in.webmcp.css", "html": "components/core-fade-in/fade-in.html", "meta": "components/core-fade-in/component.json", "page": "components/core-fade-in/" }, "importCommand": "npx webmcpcss components import core-fade-in", "promptExamples": [ "aplica la animación fade-in al botón Comprar" ], "animateExamples": [ "haz el fade-in más lento (1.5 s)", "aplica el fade-in a todas las tarjetas del catálogo" ] }, { "id": "core-pulse", "name": "Pulse", "category": "animations", "library": "core", "version": "1.0.0", "description": "Animación reutilizable de pulsación infinita (scale 1 → 1.06) declarada con webmcp-animation; ideal para llamadas a la acción.", "tags": [ "animation", "pulse", "loop", "cta", "core" ], "tools": [], "context": [], "animations": [ { "name": "pulse", "type": "keyframes", "selector": "[data-animation=\"pulse\"]" } ], "hash": "402b7b8bd3093f8e", "files": { "css": "components/core-pulse/pulse.webmcp.css", "html": "components/core-pulse/pulse.html", "meta": "components/core-pulse/component.json", "page": "components/core-pulse/" }, "importCommand": "npx webmcpcss components import core-pulse", "promptExamples": [ "aplica la animación pulse al botón Comprar" ], "animateExamples": [ "haz la pulsación más sutil", "detén la pulsación cuando el usuario pase el ratón" ] }, { "id": "core-slide-up", "name": "Slide Up", "category": "animations", "library": "core", "version": "1.0.0", "description": "Animación reutilizable de entrada deslizando hacia arriba (translateY 32px → 0 con fade) declarada con webmcp-animation.", "tags": [ "animation", "slide", "entrance", "core" ], "tools": [], "context": [], "animations": [ { "name": "slideUp", "type": "keyframes", "selector": "[data-animation=\"slide-up\"]" } ], "hash": "a1e849555efd3a99", "files": { "css": "components/core-slide-up/slide-up.webmcp.css", "html": "components/core-slide-up/slide-up.html", "meta": "components/core-slide-up/component.json", "page": "components/core-slide-up/" }, "importCommand": "npx webmcpcss components import core-slide-up", "promptExamples": [ "aplica la animación slide-up al botón Comprar" ], "animateExamples": [ "cambia el slide-up por un slide desde la izquierda", "añade 200 ms de retardo al slide-up" ] }, { "id": "core-checkout-form", "name": "Checkout Form", "category": "intelligent", "library": "core", "version": "1.0.1", "description": "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.", "tags": [ "form", "checkout", "payment", "security", "declarative", "intelligent", "core" ], "tools": [ { "name": "placeOrder", "selector": "form[data-form=\"checkout\"] button[type=\"submit\"]", "description": "Confirma el pedido con la dirección y el método de envío indicados", "params": [ "email", "address", "shipping" ], "intent": "submit", "confirmation": "needed" }, { "name": "applyCoupon", "selector": "form[data-form=\"checkout\"] [data-tool=\"applyCoupon\"]", "description": "Aplica un cupón de descuento al pedido", "params": [ "code" ], "intent": "action", "confirmation": "none" } ], "context": [ { "name": "orderTotal", "selector": "form[data-form=\"checkout\"] [data-context=\"order-total\"]", "format": "currency" }, { "name": "cartCount", "selector": "form[data-form=\"checkout\"] [data-context=\"cart-count\"]", "format": "number" } ], "animations": [], "hash": "17e7b804e2f1aef9", "files": { "css": "components/core-checkout-form/checkout-form.webmcp.css", "html": "components/core-checkout-form/checkout-form.html", "meta": "components/core-checkout-form/component.json", "page": "components/core-checkout-form/" }, "importCommand": "npx webmcpcss components import core-checkout-form", "promptExamples": [ "añade un campo de teléfono al formulario de pago", "cambia el texto del botón a Confirmar pedido" ], "animateExamples": [ "agita el formulario si el cupón no es válido", "haz que el total pulse al cambiar" ] }, { "id": "core-hero-section", "name": "Hero Section (parallax)", "category": "intelligent", "library": "core", "version": "1.0.0", "description": "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.", "tags": [ "layout", "hero", "parallax", "animation", "intelligent", "core" ], "tools": [ { "name": "exploreCatalog", "selector": "[data-component=\"hero-section\"] [data-tool=\"exploreCatalog\"]", "description": "Abre el catálogo de componentes", "params": [], "intent": "navigate", "confirmation": "none" }, { "name": "contactSales", "selector": "[data-component=\"hero-section\"] [data-tool=\"contactSales\"]", "description": "Abre el formulario de contacto con ventas", "params": [], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "heroTitle", "selector": "[data-component=\"hero-section\"] [data-context=\"hero-title\"]", "format": "text" }, { "name": "heroSubtitle", "selector": "[data-component=\"hero-section\"] [data-context=\"hero-subtitle\"]", "format": "text" } ], "animations": [ { "name": "heroParallax", "type": "parallax", "selector": "[data-component=\"hero-section\"]" }, { "name": "heroXTitleIn", "type": "keyframes", "selector": "[data-component=\"hero-section\"] .wm-heroX__title" } ], "hash": "db3dd45dbd337988", "files": { "css": "components/core-hero-section/hero-section.webmcp.css", "html": "components/core-hero-section/hero-section.html", "meta": "components/core-hero-section/component.json", "page": "components/core-hero-section/" }, "importCommand": "npx webmcpcss components import core-hero-section", "promptExamples": [ "cambia el título del hero a “Componentes que hablan con agentes”", "pon el botón Explorar catálogo en verde" ], "animateExamples": [ "aumenta la profundidad del parallax del hero", "haz que el subtítulo aparezca 300 ms después del título" ] }, { "id": "core-parallax-scene", "name": "Parallax Scene (2.5D)", "category": "intelligent", "library": "core", "version": "1.0.0", "description": "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.", "tags": [ "animation", "three", "2.5d", "parallax", "scene", "intelligent", "core" ], "tools": [ { "name": "replayScene", "selector": "[data-component=\"parallax-scene\"] [data-tool=\"replayScene\"]", "description": "Vuelve a reproducir la escena 2.5D desde el principio", "params": [], "intent": "action", "confirmation": "none" } ], "context": [ { "name": "sceneStatus", "selector": "[data-component=\"parallax-scene\"] [data-context=\"scene-status\"]", "format": "text" } ], "animations": [ { "name": "isoScene", "type": "three-scene", "selector": "[data-component=\"parallax-scene\"] [data-scene]" } ], "hash": "15c8053c09d5f18a", "files": { "css": "components/core-parallax-scene/parallax-scene.webmcp.css", "html": "components/core-parallax-scene/parallax-scene.html", "meta": "components/core-parallax-scene/component.json", "page": "components/core-parallax-scene/" }, "importCommand": "npx webmcpcss components import core-parallax-scene", "promptExamples": [ "cambia el color de la capa naranja a rosa", "oculta el botón Reproducir de la escena" ], "animateExamples": [ "haz que la escena reaccione también al scroll", "añade una cuarta capa a la escena isométrica" ] }, { "id": "core-smart-product-card", "name": "Smart Product Card", "category": "intelligent", "library": "core", "version": "1.0.0", "description": "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.", "tags": [ "card", "product", "context", "security", "a11y", "intelligent", "core" ], "tools": [ { "name": "buyNow", "selector": "[data-component=\"smart-product-card\"] [data-tool=\"buyNow\"]", "description": "Compra el producto de la tarjeta en la cantidad indicada (va directo al pago)", "params": [ "productId", "quantity" ], "intent": "action", "confirmation": "needed" }, { "name": "openProduct", "selector": "[data-component=\"smart-product-card\"] [data-tool=\"openProduct\"]", "description": "Abre la ficha completa del producto", "params": [ "productId" ], "intent": "navigate", "confirmation": "none" } ], "context": [ { "name": "featuredName", "selector": "[data-component=\"smart-product-card\"] [data-context=\"featured-name\"]", "format": "text" }, { "name": "featuredPrice", "selector": "[data-component=\"smart-product-card\"] [data-context=\"featured-price\"]", "format": "currency" }, { "name": "featuredStock", "selector": "[data-component=\"smart-product-card\"] [data-context=\"featured-stock\"]", "format": "number" }, { "name": "featuredRating", "selector": "[data-component=\"smart-product-card\"] [data-context=\"featured-rating\"]", "format": "number" } ], "animations": [ { "name": "smartCardLift", "type": "keyframes", "selector": "[data-component=\"smart-product-card\"]" } ], "hash": "9e04271161214dbf", "files": { "css": "components/core-smart-product-card/smart-product-card.webmcp.css", "html": "components/core-smart-product-card/smart-product-card.html", "meta": "components/core-smart-product-card/component.json", "page": "components/core-smart-product-card/" }, "importCommand": "npx webmcpcss components import core-smart-product-card", "promptExamples": [ "cambia el descuento de la tarjeta a -30 %", "oculta la valoración de la tarjeta inteligente" ], "animateExamples": [ "haz que la tarjeta se eleve más al pasar el ratón", "añade fade-in a la tarjeta inteligente" ] } ] }