symfony-ux-skills — Instalar & Demo en vivo

Por qué usarlo

Características clave

Cubre toda la superficie de Symfony UX — Live, Twig, Turbo, Stimulus, Autocomplete, Chartjs, Dropzone, puentes con React/Vue/Svelte
Claude selecciona el paquete UX correcto para el problema en lugar de escribir JS manualmente
Codifica patrones idiomáticos: LiveAction, LiveProp, LiveListener, targets/values de stimulus
Funciona con Claude Code, Codex, Gemini — skills en markdown puro, sin runtime
Mantenido por smnandre, un colaborador del núcleo de Symfony UX

Demo en vivo

Cómo se ve en la práctica

symfony-ux-skill.replay ▶ listo

0/0

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

Casos de uso

Usos del mundo real: symfony-ux-skills

Cómo construir un Symfony Live Component con Claude

👤 Desarrolladores de Symfony que agregan UI en tiempo real sin escribir JS ⏱ ~20 min intermediate

Cuándo usarlo: Necesitas un formulario reactivo, filtro o lista que se actualice en el servidor sin recargar la página completa.

Flujo

Describe el componente que necesitas

Construye un Live Component para un filtro de búsqueda de productos con casillas de verificación para categorías y una consulta de texto — actualiza los resultados en vivo mientras el usuario escribe.✓ Copiado

→ Claude hace referencia a LiveProp, LiveAction, modificadores debounce del skill
Deja que Claude cree la estructura del PHP + Twig

Genera la clase del componente PHP y la plantilla Twig. Usa atributos, no anotaciones.✓ Copiado

→ La salida de archivos sigue la nomenclatura de Symfony UX (src/Twig/Components/...)
Pide a Claude que conecte la página padre

Muéstrame cómo incrustar este componente en una página Twig existente y pasar el estado inicial.✓ Copiado

→ Usa correctamente el asistente {{ component() }}

Resultado: Un Live Component funcionando con tipado correcto de LiveProp y sin JS personalizado.

Errores comunes

Claude mezcla conceptos de Live Component y Twig Component — Vuelve a preguntar nombrando el paquete explícitamente: 'usa symfony/ux-live-component, no twig-component'

Combinar con: filesystem · git

Refactoriza JS heredado en un controlador Stimulus

👤 Desarrolladores que modernizan el front-end de una aplicación Symfony ⏱ ~15 min beginner

Cuándo usarlo: Tu aplicación tiene jQuery o JS vanilla disperso en Twig — quieres pasar a Stimulus de manera limpia.

Requisitos previos

Symfony UX + Stimulus configurado (importmap o Webpack Encore) — symfony console importmap:require @hotwired/stimulus if missing

Flujo

Pega el fragmento heredado y pide una conversión a Stimulus

Convierte este fragmento jQuery en un controlador Stimulus idiomático con targets y values.✓ Copiado

→ Controlador con targets estáticos, values estáticos, acciones claras
Actualiza la plantilla Twig

Muéstrame los atributos data-controller, data-*-target y data-action para el lado Twig.✓ Copiado

→ Atributos data correctos, sin manejadores en línea

Resultado: Un controlador Stimulus limpio más el cableado Twig, listo para hacer commit.

Errores comunes

Discrepancia de nombre del controlador entre el archivo y el atributo data-controller — Recuerda a Claude la regla de nomenclatura: hello_controller.js → data-controller=hello

Combinar con: filesystem

Agregar paginación impulsada por Turbo sin recargar la página

👤 Desarrolladores Symfony que quieren UX similar a SPA con JS mínimo ⏱ ~15 min intermediate

Cuándo usarlo: Tienes una lista paginada y quieres que Siguiente/Anterior intercambien contenido en su lugar.

Flujo

Pide a Claude que envuelva la lista en un Turbo Frame

Envuelve mi lista de productos paginada en un turbo-frame y haz que los enlaces de paginación apunten a ese frame.✓ Copiado

→ Usa <turbo-frame id=...> y enlaces dirigidos al frame
Maneja la respuesta parcial

Actualiza el controlador para renderizar solo el frame cuando la solicitud tiene el encabezado Turbo-Frame.✓ Copiado

→ El controlador verifica el encabezado de la solicitud y elige la plantilla correcta

Resultado: La paginación se intercambia en su lugar sin recargar la página completa.

Errores comunes

La página completa sigue recargándose — El id del frame en el objetivo del enlace debe coincidir con el id del frame en la página — repítelo a Claude

Combinar con: filesystem

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

symfony-ux-skill + filesystem

Claude lee tu Twig/PHP existente y escribe componentes que coinciden con el estilo del código base

Lee src/Entity/Product.php y src/Twig/Components/, luego agrega un nuevo LiveComponent para un filtro de productos siguiendo los mismos patrones.✓ Copiado

symfony-ux-skill + github

Abre un PR con el nuevo componente una vez que los archivos estén en disco

Haz commit de los archivos del nuevo LiveComponent en una rama y abre un PR titulado 'Filtro de producto en vivo'.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
live-component-authoring	intención del componente, props, acciones	Necesitas una parte reactiva de UI en Symfony	0 — solo prompt
twig-component-authoring	descripción de primitivo UI	Bloque presentacional reutilizable sin interacciones en vivo del servidor	0
stimulus-controller-authoring	comportamiento + targets/values	Interactividad del lado del cliente que no necesita el servidor	0
turbo-integration	intención de frame/stream	Actualizaciones de página parcial y respuestas de formulario	0

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: ninguno — el skill es markdown local
Tokens por llamada: agrega ~2–8k tokens de contexto cuando se activa el skill
Monetario: gratuito, con licencia MIT
Consejo: Mantén el directorio del skill pequeño — clona solo los subskills que usas si hay restricciones de contexto

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: ninguno — no se necesitan credenciales

Salida de datos: ninguno — paquete de instrucciones puro, sin llamadas de red

Resolución de problemas

Errores comunes y soluciones

Claude usa PHP genérico en lugar de Symfony UX

Solicita explícitamente: 'usa los symfony-ux-skills que tienes cargados'

El código generado hace referencia a paquetes UX que no tienes instalados

haz require del paquete con composer, o dile a Claude qué paquetes están instalados

Verificar: composer show | grep symfony/ux

Alternativas

symfony-ux-skills vs otros

Alternativa	Cuándo usarla	Contrapartida
sivalabs-agent-skills	Trabajas en Spring Boot en lugar de Symfony	Stack completamente diferente
claude-wordpress-skills	Trabajas en WordPress / PHP pero no en Symfony	Patrones específicos de WordPress, sin Twig/Turbo

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills