symfony-ux

Solid

Symfony UX frontend stack -- decision tree and orchestrator for choosing between Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons, and UX Map. Use when the user is unsure which tool fits, wants to combine multiple UX packages, or asks a general frontend architecture question in Symfony. Also trigger when the user asks "which UX package should I use", "how to make this interactive", "should I use Stimulus or LiveComponent", "how to structure my Symfony frontend", "what is the difference between Turbo and LiveComponent", "should this be a Frame or a LiveComponent", "how do these UX packages work together", "what is the Symfony way to do frontend". Do NOT trigger when the user clearly names a specific tool (stimulus, turbo, twig-component, live-component, ux-icons, ux-map) -- defer to the specialized skill instead.

Web & Frontend 158 stars 11 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 90/100

Stars 20%

Recency 20%

100

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# Symfony UX Modern frontend stack for Symfony. Build reactive UIs with minimal JavaScript using server-rendered HTML. Symfony UX follows a progressive enhancement philosophy: start with plain HTML, add interactivity only where needed, and prefer server-side rendering over client-side JavaScript. Each tool solves a specific problem -- pick the simplest one that fits. ## Decision Tree: Which Tool? ``` Need frontend interactivity? | +-- Pure JavaScript behavior (no server)? | -> Stimulus | (DOM manipulation, event handling, third-party libs) | +-- Navigation / partial page updates? | -> Turbo | +-- Full page AJAX -> Turbo Drive (automatic, zero config) | +-- Single section update -> Turbo Frame | +-- Multiple sections -> Turbo Stream | +-- Reusable UI component? | | | +-- Static (no live updates)? | | -> TwigComponent | | (props, blocks, computed properties) | | | +-- Dynamic (re-renders on interaction)? | -> LiveComponent | (data binding, actions, forms, real-time validation) | +-- Need icons? | -> UX Icons | (inline SVG from 200+ Iconify sets or local files) | +-- Need an interactive map? | -> UX Map | (Leaflet or Google Maps, markers, polygons, circles) | +-- Real-time (WebSocket/SSE)? -> Turbo Stream + Mercure ``` The tools compose naturally. A typical page uses Turbo Drive for navigation, Turbo Frames for partial sections, TwigComponents for reusable UI elements, LiveComponents fo...