symfony-ux
Symfony UX is a decision guide for selecting the right tool from Symfony's reactive frontend stack. It helps you navigate between Stimulus for DOM behavior, Turbo for page updates, TwigComponent for static UI, LiveComponent for server-driven interactivity, UX Icons for SVG rendering, and UX Map for interactive maps. Use it when you're unsure which package solves your problem or want to combine multiple tools.
Symfony UX helps you choose between Stimulus, Turbo, TwigComponent, LiveComponent, Icons, and Map for your frontend needs.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-14
Symfony UX helps you choose between Stimulus, Turbo, TwigComponent, LiveComponent, Icons, and Map for your frontend needs. Symfony UX is a decision guide for selecting the right tool from Symfony's reactive frontend stack. It helps you navigate between Stimulus for DOM behavior, Turbo for page updates, TwigComponent for static UI, LiveComponent for server-driven interactivity, UX Icons for SVG rendering, and UX Map for interactive maps. Use it when you're unsure which package solves your problem or want to combine multiple tools.
Use it when
- Symfony UX packages compose to build complete frontend solutions.
- Symfony UX distinguishes these approaches: Turbo frames excel at replacing page sections with server responses.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
smnandre/symfony-ux-skills/symfony-ux
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Which Symfony UX package should I use for my project?
Symfony UX helps you choose the right tool based on your needs. Use Stimulus for DOM behavior and event handling, Turbo for page updates without full reloads, TwigComponent for reusable static UI blocks, LiveComponent for server-driven interactive components, UX Icons for SVG icon rendering, and UX Map for interactive maps. Your choice depends on whether you need simple interactivity, page-level updates, or full reactive components.
How do Symfony UX tools work together in an application?
Symfony UX packages compose to build complete frontend solutions. Stimulus provides low-level DOM control, Turbo handles navigation and partial page updates, TwigComponent and LiveComponent manage UI structure, and UX Icons and UX Map add specialized features. You can combine them—for example, using Turbo frames within a LiveComponent or Stimulus controllers to enhance Turbo behavior. Symfony UX guides you on which combinations work best for your architecture.
Should I use Turbo frames or LiveComponent for this feature?
Symfony UX distinguishes these approaches: Turbo frames excel at replacing page sections with server responses, ideal for navigation and simple updates. LiveComponent is better for interactive, stateful components that need real-time validation or complex user interactions. Choose Turbo frames for page-driven workflows and LiveComponent for component-driven interactivity. Symfony UX helps you evaluate your specific use case to make the right decision.
What's the difference between Stimulus and Turbo in Symfony?
Symfony UX clarifies that Stimulus is a lightweight JavaScript framework for adding behavior to DOM elements—ideal for event handling, form interactions, and DOM manipulation. Turbo handles page navigation and partial updates by intercepting links and forms. Use Stimulus for fine-grained interactivity and Turbo for seamless page transitions. They often work together: Turbo handles navigation while Stimulus enhances specific components with behavior.
How do I make Symfony pages interactive with the UX stack?
Symfony UX offers multiple paths to interactivity. For simple DOM interactions, use Stimulus controllers. For page-level updates without reloads, use Turbo. For reactive, server-rendered components with real-time feedback, use LiveComponent. For static UI reuse, use TwigComponent. Start with the simplest tool that solves your problem—Stimulus for basic behavior, then layer in Turbo or LiveComponent as complexity grows. Symfony UX guides this progression.
When should I use TwigComponent versus LiveComponent?
Symfony UX distinguishes these by interactivity needs. TwigComponent is for reusable, static UI blocks rendered once on the server—perfect for consistent design patterns. LiveComponent adds server-driven reactivity: it re-renders on user actions, handles validation, and maintains state. Use TwigComponent for presentational UI and LiveComponent when you need interactive, stateful behavior. Symfony UX helps you recognize which pattern fits your feature.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
(truncated - see the full file via the links below)
File tree — 1 file
skills/symfony-ux/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Choose the right Symfony UX tool for a specific use case”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
LiveComponent lets you create interactive UI components in PHP and Twig that automatically re-render when users interact with them, all without writing JavaScript. Each user action triggers a server round-trip that updates the component and morphs the DOM, making it ideal for live search, real-time validation, dynamic filtering, and dependent form fields. Use it when your component's output depends on user input and requires server-side logic.
Stimulus is a lightweight JavaScript framework that wires controllers to HTML via data attributes, letting you handle clicks, inputs, and DOM changes without rendering markup. Attach behavior to server-rendered elements using `data-controller`, `data-action`, and `data-target` attributes, then compose controllers for toggles, modals, dropdowns, and more. Clean up in `disconnect()` when Turbo navigates between pages.
Turbo delivers responsive, single-page application feel using only server-side HTML rendering. Drive handles automatic AJAX navigation across all links and forms, Frames scope updates to individual page sections, and Streams push multi-target DOM changes from the server—enabling lazy loading, inline editing, pagination, and real-time updates without client-side logic.
TwigComponent enables you to compose reusable UI building blocks by pairing PHP classes with Twig templates, rendered server-side with zero JavaScript overhead. Define props, blocks, and computed properties to create everything from simple buttons to complex layout sections. Use class components for logic-heavy elements or anonymous Twig-only components for presentational markup.
UX Map brings interactive mapping to Symfony applications using either Leaflet or Google Maps as your renderer. Define maps in PHP, render them in Twig, and layer on Stimulus controllers for event handling. Supports markers, polygons, polylines, circles, and popup info windows.
Stimulus Coder guides you through writing interactive controllers that attach behavior to HTML elements using the Stimulus framework. Learn controller design patterns, state management via data attributes, action handling, and communication strategies between controllers.
More skills generic-react-ux-designer (MIT)