should-i-render

should-i-render es un servidor MCP de solo lectura para elegir componentes de React a partir de una instantánea medida y seleccionada. Responde preguntas sobre la idoneidad de componentes con veredictos concisos y datos de prueba, en lugar de devolver volcados de código fuente.

La instantánea incluida contiene actualmente el índice publicado de should-i-render. Se ejecuta sobre stdio, no necesita clave API, base de datos ni acceso a la red, y limita cada respuesta de texto a aproximadamente 500 tokens.

La beta gratuita alojada en vibecodng.com lee el índice en vivo e incluye 100 llamadas a herramientas por clave API y día UTC. Crea una clave en el navegador y luego conecta un cliente MCP compatible con HTTP a https://vibecodng.com/mcp. Usa este paquete npm cuando quieras una instantánea privada, sin conexión, versionada y sin cuota.

Uso local

{
  "mcpServers": {
    "should-i-render": {
      "command": "node",
      "args": ["/path/to/should-i-render/server.js"]
    }
  }
}

Se requiere Node 20 o superior. Ejecuta npm test para verificar la instantánea incluida, los metadatos de las herramientas, las respuestas estructuradas y el límite de respuesta.

Con npm, no es necesario clonar el repositorio:

{
  "mcpServers": {
    "should-i-render": {
      "command": "npx",
      "args": ["-y", "should-i-render@0.1.0"]
    }
  }
}

El servicio alojado podría añadir planes de pago más adelante para datos más actualizados, cuotas más altas y flujos de trabajo en equipo. El paquete publicado sin conexión permanece disponible bajo las licencias indicadas a continuación.

Herramientas

• find_component({task, pattern?, style?, palette?}) clasifica hasta tres opciones verificadas y adecuadas según la descripción de la tarea, el patrón, el estilo y los resultados medidos. Las advertencias de fallo se mantienen fuera de las recomendaciones. Pasa un slug de paleta para añadir sus variables CSS.

• palette_pick({mood?}) devuelve de una a tres paletas accesibles seleccionadas con roles hexadecimales y un bloque de variables CSS copiable.

• check_component({name}) devuelve el veredicto completo, las condiciones de omisión y la ficha de medición.

• alternatives({name}) clasifica candidatos del mismo patrón.

• install_plan({name}) devuelve dependencias, carencias del entorno básico, requisitos de proveedor, notas de configuración, licencia, crédito del autor, la página de galería medida, la fuente original y un comando exacto de shadcn cuando la fuente lo soporta.

• skip_list({pattern, style?}) muestra primero las advertencias de fallo explícitas y los peores resultados medidos.

Cada herramienta incluye un título, anotaciones de solo lectura, un esquema de salida y contenido estructurado junto con la respuesta de texto limitada.

Paletas

El paquete incluye 24 paletas originales de cuatro colores. Cada paleta define accent, surface, text y muted; cada par texto-sobre-superficie está validado con un contraste WCAG AA de 4.5:1 o superior. Usa palette_pick con un slug de paleta o estados de ánimo como dark, light, pastel, neon, retro, earth, warm, cold o mono.

:root {
  --bw-accent: #E85D4A;
  --bw-surface: #FFF7F1;
  --bw-text: #34231F;
  --bw-muted: #775F57;
}

La tematización automática se aplica a los componentes propios; las entradas de terceros necesitan mapeo manual.

Qué significa la ficha de medición

RENDERS es el resultado del montaje en el entorno de prueba preparado. A11Y es la suma de las violaciones de axe registradas. KB es el tamaño marginal del paquete gzip sobre la línea base del entorno. BARE es una segunda pasada de compilación y montaje sin los ayudantes preparados al estilo shadcn. PROVIDER significa que se midió un error de montaje por falta de proveedor.

El eje de estilo

El patrón y el estilo responden a preguntas diferentes. Un patrón es lo que hace el componente, como botón, calendario, carrusel o revelación de texto. Un estilo es el mundo visual al que pertenece, como minimal-flat, brutalism, spatial, bento o dark-futuristic. Filtrar por ambos es útil cuando la interacción está fija pero el lenguaje del producto no.

Los estilos son clasificaciones editoriales, no capacidades del paquete. Dos entradas con el mismo patrón y estilo pueden diferir notablemente en dependencias, hallazgos de accesibilidad, costo del paquete, compatibilidad básica y requisitos de proveedor.

Datos

data/components.json es una exportación puntual de registros de componentes publicados. Contiene descripción, resultados medidos, créditos de fuente y autor, metadatos de licencia, patrón y estilo, y rutas de vista previa relativas. No contiene bytes de imágenes o videos de vista previa. data/palettes.json es el catálogo de paletas incluido.

Establece SHOULD_I_RENDER_DATA=/ruta/a/components.json para probar otra instantánea con la misma estructura.

Limitaciones

• El entorno de prueba actualmente solo mide componentes de React.

• La cobertura es seleccionada, no un rastreo exhaustivo del registro.

• La instantánea es puntual; las API y dependencias de componentes upstream pueden cambiar después de la exportación.

• Los resultados del entorno son mediciones controladas, no aseguramiento de calidad en producción. No reemplazan las pruebas en tu aplicación de navegador, sistema de diseño, accesibilidad, seguridad o usuario.

• Las demostraciones se escriben contra la API fuente de cada componente y generan las capturas de pantalla. Una demostración puede cubrir el estado previsto sin cubrir cada propiedad, interacción, comportamiento del servidor o ruta de carga de datos.

• Un recuento de accesibilidad limpio significa que la demostración registrada no tuvo hallazgos de axe en este entorno. No es una certificación de accesibilidad.

• Los veredictos y las etiquetas de estilo son juicios editoriales basados en las mediciones registradas y las API fuente.

Licencia

El código del servidor tiene licencia MIT. Los metadatos del índice compilado tienen licencia CC BY 4.0 con atribución a mrkeyoor.com; los proyectos fuente de componentes individuales conservan sus propias licencias y créditos de autor.

Contribuciones

• ¿Encontraste un veredicto incorrecto o un registro de componente desactualizado? Abre un issue.

• Los cambios de código son bienvenidos para el servidor MCP y la lógica de clasificación. Mantén las respuestas dentro del límite y ejecuta npm test antes de abrir un pull request.

• data/components.json se genera a partir del índice medido de vibecodng, por lo que las correcciones de datos deben comenzar como un issue en lugar de una edición directa de la instantánea.