WebMCPcssUn catálogo pensado para personas y agentes
El WebMCPcss Component Hub reúne componentes de interfaz cuyo comportamiento para agentes de IA está declarado en un archivo .webmcp.css: qué herramientas expone (webmcp-tool), con qué parámetros, qué intención tienen, si requieren confirmación y qué datos de contexto publican. El mismo archivo es CSS válido, así que puede convivir con tu hoja de estilos.
Qué encontrarás
- Adaptadores para Tailwind CSS, Bootstrap 5, Material UI y shadcn/ui, más una versión core sin dependencias.
- Componentes inteligentes con permisos, límites de uso, confirmación y animaciones declarativas (parallax, 2.5D con Three.js).
- Metadatos (
component.json) con controles del editor, ejemplos de prompts y componentes relacionados.
Cómo está hecho
El sitio es 100 % estático y se genera con npm run build:hub a partir de la carpeta components/ del repositorio, sin frameworks: HTML, CSS y JavaScript vanilla. Cada página incluye <meta name="webmcp-hub">, JSON-LD y, si el navegador soporta WebMCP, registra en document.modelContext las herramientas searchComponents, getComponent y toggleFavorite para que un agente pueda navegar el catálogo.
Accesibilidad
Navegación por teclado (pestañas con flechas, enlace "saltar al contenido"), estados aria-pressed/aria-selected, regiones aria-live para los resultados y respeto de prefers-reduced-motion. Los componentes declaran webmcp-accessibility con sus requisitos mínimos.
Licencia y contribuciones
Todo el contenido es MIT. Publica tu componente con npx webmcpcss components publish (abre un Pull Request automáticamente) o lee la guía de contribución.