Un archivo .webmcp.css mapea selectores a acciones como addToCart o login. Sin permisos del sitio, con auto-reparación cuando el sitio se rediseña, órdenes en lenguaje natural, animaciones declarativas y, desde la 1.0, permisos, accesibilidad, tests, versionado y pagos declarados en el mismo CSS.
npm install -g webmcpcss
CSS estándar con propiedades webmcp-*. Los selectores que ya usas para dar estilo ahora también declaran qué puede hacer un agente.
/* webmcpcss generate https://tienda.com --auto */ [data-product] .btn-add { webmcp-tool: "addToCart"; webmcp-param-quantity: value(#qty); webmcp-confirmation: ".cart-badge"; }
También desde tu código fuente React/Vue/Svelte con --from-source, desde un diseño con design analyze, o desde cero con init --framework ia-first.
# stdio para Claude, Cursor, Goose… webmcpcss mcp --serve \ --css tienda.webmcp.css \ --url https://tienda.com [webmcpcss] MCP stdio listo · 2 herramientas
El agente lista las herramientas y las ejecuta de verdad con navegador headless.
webmcpcss repair https://tienda.com \ tienda.webmcp.css ✔ .btn-add → [data-cy="add"] ✔ archivo actualizado (1 reparación)
Modo visión: reencuentra el elemento por huella (texto, atributos, tag) y reescribe el selector.
TypeScript estricto, arquitectura modular y una CLI que cubre el ciclo completo: generar → validar → reparar → exportar → servir.
Catálogo visual de 58 componentes IA-First (botones, tarjetas, formularios, layout, animaciones e inteligentes) para Tailwind, Bootstrap, MUI, shadcn y CSS puro, cada uno con su .webmcp.css. Preview con editor en vivo, copiar código, favoritos e índice /api/components.json. webmcpcss components import tailwind-login-form o mcp --serve --hub para que lo descubran los agentes.
Alineado con el borrador del W3C: todo el código generado usa document.modelContext (con fallback al alias obsoleto) y la API declarativa se compila en ambos sentidos: standard scan lee <form toolname tooldescription> y genera el contrato; standard compile añade toolname/toolparamtitle a tu HTML; standard check dice qué expone una página.
generate --auto escanea la página sin grabar nada: formularios, botones, campos. Detecta el framework (React, Vue, Svelte, Angular, Tailwind…) y elige selectores estables.
generate --from-source analiza componentes JSX/Vue/Svelte sin navegador ni deploy, y avisa qué elementos necesitan data-tool. Úsalo como linter en CI.
stdio JSON-RPC para Claude Desktop/Code, Cursor, Goose, Windsurf… y modo REST (/api/tools, /api/call) con ejecución real vía navegador.
Plugin Claude Code (comandos + skill), Cursor (snippets y regla), CrewAI, AutoGen, LangGraph, DeerFlow, Flomny, JSON Schema, browser-inject (window.__WEBMCP_GRAPH__) y config MCP universal.
Selectores rotos tras un rediseño se reencuentran por fingerprint y el archivo se actualiza solo. Con análisis de fragilidad: hashes CSS-Modules, Vue scoped, styled-components…
Tu tool map como grafo de conocimiento navegable, dashboard Cytoscape con filtros por framework y exportación PNG/SVG/JSON, y bóveda Obsidian portable. Detecta el framework de cada selector frágil (CSS Modules, Vue scoped, styled-components…).
webmcpcss prompt "oculta el popup de cookies" interpreta la orden (con o sin LLM), localiza el elemento y la ejecuta con evidencia. También como herramienta MCP webmcpcss_prompt.
Parallax, isométrico, 3D, keyframes y escenas Three.js declaradas con webmcp-animation-*. Motor CSS / WAAPI / WebGL elegido por capacidades, resolución de conflictos con GSAP, Anime.js o Framer Motion y validate-conflicts para CI.
Cada ejecución, reparación, prompt o animación queda registrada. webmcpcss dashboard abre un panel local con métricas, fragilidad de selectores y el grafo del sitio.
La 1.0 convierte WebMCPcss en una plataforma completa: del diseño al contrato, del sitio legacy al agente con billetera. Diez módulos independientes, sin dependencias nuevas, cada uno con su comando, su API (import { security, web3, … } from 'webmcpcss'), su guía y salidas reales en examples/v1/.
webmcp-componentwebmcp-intent: submit|cancel|navigate|actionwebmcp-confirmation: needed|nonewebmcp-accessibility
webmcp-permissions: read-only|restricted|fullwebmcp-requires: auth|oauth|jwt|sessionwebmcp-scopewebmcp-rate-limit
webmcp-payment: requiredwebmcp-networkwebmcp-amountwebmcp-pay-to
Componentes IAButton, IAForm, IACard, IANav, IAHero e IAGrid que nacen con webmcp-component, webmcp-intent, webmcp-confirmation y webmcp-accessibility. Un asistente genera el componente y su contrato desde una frase, con o sin LLM.
De un mockup (PNG/JPEG, con LLM de visión), un archivo Figma o una descripción de texto a .webmcp.css + HTML de andamiaje. validate compara el diseño con el sitio implementado y optimize mejora nombres, selectores y confirmaciones con una puntuación IA-friendly.
Escanea sitios legacy (13 señales: tablas de maquetación, jQuery 1.x, WebForms, frames…) y propone tools con selectores estables. Un proxy de compatibilidad inyecta el WebMCP sin tocar el servidor, el inyector expone window.__WEBMCP_GRAPH__ y publish lo aporta a la comunidad.
16 reglas WCAG 2.2 AA evaluadas en la página real (alt, nombres accesibles, contraste, encabezados, landmarks, foco…), puntuación, umbrales para CI y correcciones declarativas con webmcp-accessibility que benefician a personas y agentes.
Suites Playwright o Cypress generadas desde el contrato: existencia de cada tool, parámetros, confirmaciones, formatos y ejecución segura. test run las ejecuta con Puppeteer sin instalar nada más, emite JUnit y crea el workflow de GitHub Actions.
Snapshots con hash por tool y huella de la página, diff semántico que detecta renombres, cambios de selector, parámetros y permisos con impacto SemVer, y migraciones con notas para que los agentes se actualicen solos.
webmcpcss version snapshot · diff v1.json v2.json · migrate v1.json v2.json --url …Guía →Documentación interactiva generada del .webmcp.css: HTML autocontenido con buscador y pestañas, Markdown, JSON, llms.txt y AGENTS.md, con ejemplos CLI/MCP/REST/prompt por tool. Servidor local con recarga en vivo.
webmcp-permissions: read-only|restricted|full, webmcp-requires (auth, OAuth, JWT, sesión), scopes y rate-limit por tool. Auditoría con puntuación, políticas sugeridas, JWT HS256 sin dependencias y simulación de qué puede hacer cada agente.
Traduce un objetivo en lenguaje natural (ES/EN) a una secuencia de tools con sus parámetros, aprende del historial local por sitio, penaliza acciones sensibles no pedidas y pone el login primero. Refinado opcional con LLM.
webmcpcss recommend "compra 2 zapatillas rojas" --url https://tienda.comGuía →Tools de pago con webmcp-payment, webmcp-network y webmcp-amount. Billetera de agente con límites por operación, sesión y día; micropagos x402/USDC sin gas, conector MetaMask/WalletConnect, 8 redes EVM, contrato WebMCPPayments.sol y ethers opcional.
webmcpcss assist "crea un formulario de contacto" -o contacto/ ℹ Plan (heuristic): deducido por vocabulario (sin LLM) ✔ form → tools: sendContact ✔ Escrito contacto/component.html ✔ Escrito contacto/component.webmcp.css /* contacto/component.webmcp.css */ [data-tool="send-contact-submit"] { webmcp-tool: "sendContact"; webmcp-component: "form"; webmcp-intent: "submit"; webmcp-confirmation: "needed"; webmcp-accessibility: "aria-label: Enviar mensaje"; webmcp-param-email: value(#send-contact-email); webmcp-param-message: value(#send-contact-message); /* … webmcp-trigger, webmcp-confirmation-selector */ }
El componente nace con intención, confirmación y accesibilidad declaradas. Con --llm ollama|openai|anthropic el plan lo hace un modelo.
webmcpcss retro scan ferreteria-legacy.html -o legacy.webmcp.css ℹ Ferretería El Tornillo · legacy 76/100 · 5 tools • table-layout (2) 2/2 tablas parecen de maquetación • inline-handlers (2) manejadores inline on*= • old-jquery (1) jQuery 1.x • asp-webforms (1) ids dinámicos, postbacks … 13 señales ✔ buscar form[name="frmBuscar"] input[name="btnBuscar"] ✔ enviarConsulta form[action="/contacto.asp"] input[type=submit] ✔ iniciarSesion a[title="Acceso clientes"] ✔ comprar input[onclick*="addCart"] ✔ verCarrito a[href="/carrito.asp"] ⚠ ASP.NET WebForms: se han preferido name/value y fingerprints ✔ Escrito legacy.webmcp.css webmcpcss retro proxy https://ferreteria-legacy.com \ --css legacy.webmcp.css --port 8080 ✔ proxy en http://localhost:8080 · inyecta <link rel="webmcp">, /.webmcp/webmcp.css y /.well-known/webmcp.json
Un sitio de 2004 con ASP.NET WebForms y jQuery 1.x queda operable por agentes sin tocar su servidor.
webmcpcss security validate --file tienda.webmcp.css \ --agent bot:restricted:orders:pay ℹ Puntuación 99/100 · 1 read-only, 2 restricted, 2 full • buscarProductos: read-only · none · riesgo low • anadirAlCarrito: restricted · session · riesgo medium • pagarPedido: full · oauth · scopes orders:pay · riesgo high ℹ descargarInforme (full) sin webmcp-rate-limit → webmcp-rate-limit: "5/min"; Agente bot ✔ buscarProductos ✖ anadirAlCarrito — requiere session; el agente trae auth ✖ pagarPedido — requiere nivel full; el agente es restricted ✔ enviarConsulta webmcpcss web3 validate --file tienda.webmcp.css • descargarInforme: required · 0.05 USDC · base · x402 → 0x1111111111111111111111111111111111111111
El mismo contrato dice quién puede hacer qué y cuánto cuesta. Los agentes pagan por 402 Payment Required con USDC sin gas.
webmcpcss version diff v1.snapshot.json v2.snapshot.json ℹ Impacto major · versión sugerida 2.0.0 · +2 −2 ~6 ↔1 ✖ tool-renamed buscarProductos → buscarCatalogo (los agentes deben actualizar sus llamadas) ✖ tool-removed descargarInforme #report • selector-changed pagarPedido #checkout → #checkout-now • param-added buscarCatalogo → categoria • context-added totalCarrito → .total webmcpcss recommend "inicia sesión y compra 2 zapatillas rojas" \ --css tienda.webmcp.css Para "inicia sesión y compra 2 zapatillas rojas" recomiendo estos 2 pasos (confianza 95 %): 1. anadirAlCarrito con cantidad="2" ⚠ requiere confirmación 2. pagarPedido ⚠ requiere confirmación Verifica el resultado leyendo: articulosCarrito.
Salidas reales de examples/v1/, regenerables con bash examples/v1/regen.sh y comprobadas en CI.
Declara en el mismo .webmcp.css qué identidad, permisos, pagos y límites exige cada herramienta. El servidor MCP verifica antes de ejecutar (ERC-8004, claves de sesión, pruebas ZK de humanidad, x402), ejecuta sin gas (stablecoins nativas en Sui, EIP-3009 / ERC-4337 en Base y Ethereum, gas gratuito en SKALE) y deja un registro de auditoría encadenado por hash. Cero dependencias nuevas: keccak, secp256k1, EIP-712, BLAKE2b, Ed25519 y BCS propios, verificados contra ethers y @mysten/sui.
webmcp-auth: erc8004|zk-proof|session-key|nonewebmcp-payment: x402|eip3009|sponsored|nonewebmcp-chain: sui|base|evm|skale
webmcp-spending-limit: "100 USDC/day"webmcp-rate-limit: "5 actions/minute"webmcp-allowed-contractswebmcp-allowed-hourswebmcp-requires-human-proof
webmcpcss trust verify-identity --agent "#1" --chain base --network base-sepolia ✔ verificado eip155:84532:0x8004A818…BD9e#1 owner: 0x21fd…e235 · nombre: Test Agent 004 · reputación: 50/100 (74 feedbacks) webmcpcss trust check-permission --tool purchase --file tienda.webmcp.css \ --agent "#7" --proof proof.json --amount "0.5 USDC" ✔ identity · ✔ expiry · ✔ nonce · ✔ signature · ✔ signer-authorized ✔ scope · ✔ rate-limit 1/5 · ✔ spending-limit 0.5 de 100 USDC/day ✔ permitido · restante 99.5 USDC/day webmcpcss trust execute-gasless --chain sui --tx '{"kind":"transfer","to":"0xab…","amount":"1 USDC"}' ✔ gasless en sui-mainnet · digest 7Kq… (gas 0, sin SUI)
trust_verify_identity, trust_check_permission, trust_execute_gasless, trust_get_audit_log; REST POST /api/trust/verify + X-Trust-Token; window.__WEBMCP_TRUST__ para agentes de navegación.webmcpcss trust audit-log --verify recalcula la cadena keccak; anclaje on-chain opcional.webmcpcss prompt traduce órdenes en español o inglés a acciones estructuradas, localiza el elemento de forma progresiva y las ejecuta sobre la página con captura de evidencia. Funciona sin LLM; mejora con Ollama, OpenAI o Anthropic.
webmcpcss prompt "pon la cantidad en 3 y aplica el cupón VERANO" \ --url https://tienda.com --css tienda.webmcp.css --execute ℹ Acción: fill → cantidad [heuristic, confianza 0.92] ℹ Elemento: #qty (vía label, 0.95) ✔ Valor "3" establecido en #qty ℹ Acción: click → cupón · herramienta applyCoupon ✔ applyCoupon ejecutada (confirmación .coupon-ok visible) ℹ Captura: despues.png
upload, changeColor, delete, move, click, fill, hide, setText, setStyle, other.--execute solo muestra lo que haría.webmcpcss_prompt y POST /api/prompt para que cualquier agente la use.Parallax, isométrico, transformaciones 3D, keyframes y escenas 2.5D con Three.js, descritas con propiedades webmcp-animation-*. El orquestador elige el motor (CSS, WAAPI o WebGL) según el navegador y nunca pisa las animaciones que el sitio ya tiene.
Demo en vivo con la misma lógica del motor CSS: capas a distinta velocidad de scroll y una tarjeta 3D que sigue al puntero. En tu sitio lo declara el archivo de la derecha.
#hero { webmcp-animation: "heroParallax"; webmcp-animation-type: parallax; webmcp-animation-layers: ".sky" 0.1, ".mountains" 0.5, ".ground" 0.8; } #card { webmcp-animation: "flipCard"; webmcp-animation-type: 3d-transform; webmcp-animation-perspective: 900px; webmcp-animation-rotation-y: 25deg; webmcp-animation-conflict: queue; /* respeta GSAP */ } #badge { webmcp-animation: "badgePop"; webmcp-animation-priority: critical; /* sustituye */ webmcp-animation-keyframes: '[{"transform":"scale(1)"}, {"transform":"scale(1.15)"}]'; } #scene { webmcp-animation: "depth"; webmcp-animation-type: three-scene; webmcp-animation-sandbox: shadow; webmcp-animation-fallback: "heroParallax"; } $ webmcpcss animate animations.webmcp.css --url https://tienda.com ✔ badgePop waapi (sustituyendo css:sitePulse) ✔ heroParallax css 3 capas ⊘ flipCard ignorada · conflicto con gsap@wa7 ✔ depth three sandbox shadow · WebGL
Capas con velocidad 0–1 y profundidad. CSS por scroll, ScrollTimeline o escena WebGL.
rotateX/rotateZ con preserve-3d. Tarjetas, mapas y cuadrículas.
Perspectiva, rotaciones, translateZ y escala compuestas; fusión con composite: add.
Fotogramas arbitrarios por WAAPI o @keyframes inyectados.
Planos 2.5D que siguen ratón y scroll. Three.js solo si se usa; fallback sin WebGL.
low → critical y estrategias replace, queue, ignore, merge.registerExternal() para las tuyas.--dry-run con informe de conflictos previstos, fallback por animación y respeto de prefers-reduced-motion.webmcpcss_animate, POST /api/animate y runtime de 85 KB para incluir en tu web.validate-conflicts anim.webmcp.css --url … --strict simula en seco los conflictos con las animaciones del sitio; animate --sandbox las aísla en un shadow root.Estándar de animaciones → · Convivencia con otras librerías → · Ejemplos →
Si habla MCP, function calling, HTTP o controla un navegador — ya está soportado. Tabla completa y guías paso a paso →
| Integración | Agentes | Comando |
|---|---|---|
| 🔌 Servidor MCP | Claude DesktopClaude CodeCursorWindsurfGooseClineContinueCopilotGemini CLICodex CLIFlomny+7 | mcp --serve+ webmcpcss_prompt · webmcpcss_animate · --flomny |
| 🐍 Módulos Python | CrewAIAutoGen / AG2LangGraphLangChainDeerFlow | export --format crewai--format deerflow · --format autogen · --format langgraph |
| 🌐 Navegador | ChatGPT AtlasOperatorProject MarinerCometSkyvernBrowser Use+2 | export --format browser-inject |
| 🧠 JSON Schema / REST | LlamaIndexSemantic KernelOpenAIGeminiMistraln8nDifyManus+4 | export --format json-schema |
El grafo de examples/shopping-cart renderizado con Cytoscape.js — arrastra los nodos. Es el mismo motor de webmcpcss graph --dashboard.
Definiciones verificadas en vivo, mantenidas por la comunidad. Publica la tuya con webmcpcss publish --domain tusitio.com — el fork y el PR se abren solos.
Cargando índice…
Los agentes descubren todo con una sola petición HTTP: community-styles/index.json
Un comando para empezar. v1.3.0 · MIT · sin dependencias de pago · 656 tests · listo para producción.