Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Symfony UX Frontend Orchestrator

A decision-tree skill that picks the right Symfony UX tool — Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons or UX Map — and shows the matching code pattern.

Dev & CodingIntermediate★ 170⑂ 12AI score 9/10Last updated: Jun 14, 2026

What it does

  • Walks a decision tree to answer "which Symfony UX package fits this problem?" across Stimulus, Turbo Drive/Frame/Stream, TwigComponent, LiveComponent, UX Icons and UX Map.
  • Provides a feature comparison table (JS required, server re-render, two-way binding, real-time, lazy loading).
  • Ships seven concrete patterns with PHP/Twig code: static component, component + Stimulus, reactive LiveComponent search, Turbo Frame navigation, multi-section Turbo Stream, LiveComponent inside a Frame, and Mercure real-time broadcasting.
  • Includes recommended file structure, composer require commands, and anti-patterns to avoid (LiveComponent for static content, missing map container height, deploying without ux:icons:lock).

Who it's for

  • Symfony/PHP developers building interactive UIs with minimal JavaScript.
  • Teams that keep debating "Turbo Frame or LiveComponent?".
  • Tech leads standardising frontend architecture on a new Symfony project.

Examples

  1. "I need live search results as the user types" → returns the LiveComponent pattern with data-model="debounce(300)|query".
  2. "After posting a comment, update both the list and the counter" → returns the Turbo Stream response format and .stream.html.twig template.
  3. "My dropdown toggle needs no server data" → steers you to TwigComponent + a Stimulus controller instead of a LiveComponent.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/smnandre/symfony-ux-skills/HEAD/skills/symfony-ux/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/symfony-ux folder from the GitHub repo smnandre/symfony-ux-skills into my ~/.claude/skills/symfony-ux/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/smnandre/symfony-ux-skills.git /tmp/symfony-ux-skills && cp -r /tmp/symfony-ux-skills/skills/* ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repository: git clone https://github.com/smnandre/symfony-ux-skills.git
  3. Create the skills folder if needed: mkdir -p ~/.claude/skills
  4. Copy the skills: cp -r symfony-ux-skills/skills/* ~/.claude/skills/ (copy the whole set so the specialised Stimulus/Turbo/LiveComponent skills are available too).
  5. Restart Claude Code and confirm symfony-ux appears in your skill list.
  6. In a Symfony project, ask something like "Should this be a Turbo Frame or a LiveComponent?" to trigger it.
  7. Install the actual packages in your project with composer require symfony/ux-turbo symfony/ux-live-component (Google Maps rendering additionally requires an API key).
View source on GitHub ↗License: MIT