shadcn-vue

Una poderosa herramienta de agente de IA que ayuda a los desarrolladores a crear instantáneamente componentes de UI de alta calidad

El servidor MCP de Shadcn-vue es una poderosa herramienta impulsada por IA que ayuda a los desarrolladores a crear instantáneamente componentes de UI modernos y hermosos a través de descripciones en lenguaje natural. Integra la biblioteca de componentes shadcn-vue y tailwindcss, se conecta sin problemas con los IDE principales y proporciona un flujo de trabajo de desarrollo de UI optimizado.

🌐 Idiomas disponibles:

❌ Sin shadcn-vue MCP

Los desarrolladores enfrentan múltiples desafíos al construir componentes de UI:

• ❌ Flujo de desarrollo tedioso: Cambiar constantemente entre el IDE, la documentación oficial y el navegador afecta gravemente la eficiencia y el enfoque del desarrollo.
• ❌ Dificultad en la selección de componentes: Ante numerosos componentes de shadcn-vue, los desarrolladores luchan por encontrar rápidamente el mejor ajuste para sus necesidades sin recomendaciones inteligentes.
• ❌ Alta carga de trabajo repetitiva: Implica escribir manualmente una gran cantidad de código repetitivo y manejar varios estados de componentes y lógica de interacción compleja.
• ❌ Garantía de calidad insuficiente: Es fácil pasar por alto estándares de calidad como accesibilidad (A11y), optimización de rendimiento y mejores prácticas de codificación, lo que lleva a una calidad inconsistente de los componentes.
• ❌ Altos costos de mantenimiento: A medida que el proyecto crece, mantener manualmente el estilo, comportamiento y dependencias de todos los componentes se vuelve excepcionalmente difícil, haciendo que la consistencia sea difícil de lograr.

✅ Con shadcn-vue MCP

shadcn-vue MCP proporciona una experiencia de desarrollo de componentes de UI inteligente que revoluciona el flujo de trabajo tradicional:

• ✅ Experiencia de desarrollo integral: Complete todo el proceso, desde la selección de componentes y la codificación hasta la vista previa, sin salir nunca de su editor, simplemente describiendo sus necesidades en lenguaje natural.
• ✅ Recomendación inteligente de componentes: La herramienta components-filter analiza inteligentemente sus requisitos y recomienda los componentes shadcn-vue más adecuados.
• ✅ Generación automática de código de alta calidad: component-builder genera automáticamente código de componentes Vue de alta calidad que cumple con los estándares de shadcn-vue y tailwindcss, con mejores prácticas integradas.
• ✅ Garantía de calidad integrada: component-quality-check realiza automáticamente comprobaciones de accesibilidad (A11y) y calidad de código en el código generado, asegurando componentes de nivel profesional.
• ✅ Documentación y vistas previas instantáneas: component-usage-doc proporciona documentación de componentes, API y ejemplos de uso en tiempo real para que pueda comenzar de inmediato.
• ✅ Asegura alta consistencia de diseño: Todos los componentes generados se adhieren estrictamente a una especificación de diseño unificada, asegurando consistencia visual e interactiva en toda la aplicación y mejorando el valor de la marca.

🌟 Características

• Descripciones en lenguaje natural:
  • Generación de UI impulsada por IA: Cree componentes de UI describiéndolos en lenguaje natural
• Soporte multi-IDE:
  • Integración con Cursor para flujos de trabajo sin interrupciones.
    • Soporte de Trae para desarrollo avanzado impulsado por IA.
    • Soporte de VSCode para una experiencia de codificación robusta.
    • Integración de VSCode + Cline (Beta) para colaboración mejorada.
• Biblioteca de componentes moderna:
  • Construida sobre la biblioteca de componentes shadcn-vue y tailwindcss para diseños modernos y responsivos.
• Soporte de TypeScript:
  • Soporte completo de TypeScript asegura un desarrollo seguro y escalable.
• Consulta de documentación inteligente:
  • Acceso en tiempo real a la documentación detallada de componentes shadcn-vue con vistas previas integradas de uso y mejores prácticas.
• Mejora de componentes:
  • Accesibilidad: Cumplimiento de WCAG 2.1, navegación por teclado, soporte ARIA
    • Rendimiento: División de código, tree shaking, paquetes optimizados
    • Consistencia: Sistema de diseño unificado, patrones de comportamiento consistentes
    • Mantenibilidad: Arquitectura de código limpia, componentes bien documentados
    • Experiencia del desarrollador: Soporte de TypeScript, recarga en caliente, APIs intuitivas

🚀 Comenzando

Requisitos previos

Antes de comenzar, asegúrese de tener Node.js instalado en su sistema.

• Versión recomendada de Node.js: 18.20.1 o posterior.

Usar una versión diferente podría provocar errores de instalación como Error: spawnSync code-insiders.cmd EINVAL. Degradar o actualizar a la versión recomendada es la mejor solución.

Instalación rápida: Instalación rápida por URL para copilot

Primero, necesita obtener una URL de conexión única del servicio Smithery que contenga sus credenciales personales. Visite la página de shadcn-vue-mcp en Smithery.

Paso 1. Haga clic en el botón Generar URL en la página.:

El sistema generará una URL única para usted, que incluye una clave API para autenticación. Copie esta URL completa.

Paso 2. Abra vscode, abra copilot y seleccione el modelo Agente. A continuación, agregue la URL que acaba de obtener al archivo de configuración MCP de su IDE.

1. En su proyecto IDE, busque o cree el archivo de configuración llamado mcp.json.
2. Agregue o combine el siguiente objeto JSON en el campo servers de ese archivo.

Paso 3: para el IDE de vscode, seleccione Agregar servidor

Paso 4: elija HTTP (HTTP o Server-Sent Events)

Paso 5: pegue la URL

Paso 6: configure así:

{
  "servers": {
    "shadcn-vue-mcp": {
      "url": "https://server.smithery.ai/@HelloGGX/shadcn-vue-mcp/mcp?api_key=xxxx&profile=linguistic-landfowl-TWeEt8"
    }
  }
}

Ubicaciones de archivos de configuración:

• Cursor: ~/.cursor/mcp.json
• Trae: ~/.Trae/mcp.json
• Cline: ~/.cline/mcp_config.json
• Claude: ~/.claude/mcp_config.json

🛠️ Lista de herramientas y características principales

Herramientas de generación de componentes

• requirement-structuring
  • Analiza requisitos en lenguaje natural
    • Convierte las necesidades del usuario en formato JSON estructurado
    • Considera la funcionalidad principal y las características esenciales
    • Análisis integrado de interacción del usuario y casos límite

Herramientas de documentación y análisis

• component-usage-doc
  • Acceso en tiempo real a la documentación de componentes shadcn-vue
    • Vista previa interactiva de variantes de componentes
    • Renderizado de markdown integrado en el navegador
    • API detallada y ejemplos de uso

Filtrado y gestión de componentes

• components-filter
  • Sistema inteligente de recomendación de componentes
    • Soporta análisis de descripciones en múltiples idiomas
    • Análisis de relaciones entre componentes
    • Estadísticas de frecuencia de uso y ponderación

Calidad de código y pruebas

• component-quality-check
  • Evaluación automatizada de calidad de código
    • Verificación de cumplimiento de A11y (Accesibilidad)
    • Sugerencias de optimización de rendimiento
    • Validación de mejores prácticas

Generación inteligente de código

• component-builder
  • Generación de componentes impulsada por IA
    • Integración de shadcn-vue y Tailwind CSS
    • Seguridad de tipos de TypeScript
    • Implementación de mejores prácticas integradas

Ejemplo de resultado

Usuario: /ui create a flight display component

IA: Código generado de la siguiente manera:

Usuario: /check

IA:

IA: Código generado de la siguiente manera:

🤝 Guía de contribución

¡Damos la bienvenida a todas las formas de contribución! Puede ayudarnos a mejorar @agent/shadcn-vue de las siguientes maneras:

• Reportar errores: Si encuentra un error, por favor cree un issue en nuestro repositorio de GitHub.
• Sugerir mejoras: ¿Tiene una idea para una nueva característica o una mejora? Háganoslo saber creando un issue.
• Enviar solicitudes de extracción: Estamos encantados de revisar y fusionar solicitudes de extracción. Antes de realizar cambios significativos, abra un issue primero para discutir sus ideas.