← ClaudeAtlas

symfony-uxlisted

Symfony UX frontend stack combining Stimulus, Turbo, TwigComponent and LiveComponent. Use when building modern Symfony frontends, choosing between UX tools, creating interactive components, handling real-time updates, or integrating multiple UX packages. Triggers - symfony ux, hotwire symfony, stimulus turbo, live component, twig component, frontend symfony, interactive ui, real-time symfony, which ux package, which tool should I use, how to make this interactive, SPA feel, reactive component, server-rendered component. Also trigger when the user asks a general question about frontend architecture in Symfony or wants to combine multiple UX packages together.
BKR-57/symfony-ux-skills · ★ 0 · Web & Frontend · score 75
Install: claude install-skill BKR-57/symfony-ux-skills
# 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) | +-- 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 for reactive forms/search, and Stimulus for client-side behavior that doesn't need a server round-trip. ## Quick Comparison | Feature | Stimulus | Turbo | TwigComponent | LiveComponent | |---------