Symfony UX is a set of PHP and JavaScript packages that help solve everyday frontend problems using Stimulus and Turbo. Learning and using Symfony UX is simple, but mastering it requires practice. For example, when should you use Stimulus or Turbo? When should you encapsulate new features as a Twig Live Component?

Introducing AI skills for Symfony UX. This is a set of structured knowledge packages designed to help AI coding agents better understand Symfony UX: when to use each of its components, best practices for implementing them, common pitfalls, and typical problems.

What Are AI Skills?

An AI skill is a self-contained knowledge package, usually a Markdown file called SKILL.md plus optional reference documents, that you install into your AI coding agent. When the agent encounters a task that matches a skill's description, it loads the skill and follows its instructions.

Think of it as giving a new developer a focused, curated cheat sheet: not the full documentation, but the decision trees, gotchas, and idiomatic patterns they need to get the job done correctly without trial and error.

Skills follow the open Agent Skills standard, so they work across Claude Code, Gemini CLI, OpenAI Codex, Cursor, Windsurf, and any platform that supports SKILL.md.

Do You Have to Call Them Explicitly?

No. That is the whole point. Once installed, skills are automatically activated when the agent determines they are relevant to the task at hand. The agent reads the description field of each installed skill at startup. For example, when you ask it to add a live search filter to a page, it recognizes this as a LiveComponent task and loads the appropriate skill automatically.

Symfony UX Skills

Simon André, lead developer at SensioLabs and one of the top contributors to the Symfony UX repository, has published a set of skills covering the full Symfony UX frontend stack:

  • symfony-ux: an orchestrator skill with a decision tree for choosing between Stimulus, Turbo, TwigComponent, and LiveComponent.
  • stimulus: controllers, targets, values, actions, classes, outlets, and lifecycle hooks.
  • turbo: Turbo Drive, Frames, Streams, Mercure integration, and the <twig:Turbo:Stream:*> syntax.
  • twig-component: props, blocks, computed properties, anonymous components, and HTML syntax.
  • live-component: props, actions, data-model binding, forms, emit, and defer/lazy loading.

Each skill ships with a SKILL.md file and optional references/ subdirectories (api.md, patterns.md, gotchas.md) that the agent loads on demand, keeping the main context lean.

The skills target Symfony UX 2.22 to 2.28+, Symfony 7.2, 7.4, and 8.0, and PHP 8.4+, covering all recent Symfony UX additions.

Installation

Clone the repository and copy the skill directories into your agent's skills location:

1
2
git clone https://github.com/smnandre/symfony-ux-skills.git
cd symfony-ux-skills/

If you are using Claude Code, copy them into ~/.claude/skills/ if you want the skills to be available in all your projects:

1
2
3
4
5
cp -r skills/stimulus        ~/.claude/skills/
cp -r skills/turbo           ~/.claude/skills/
cp -r skills/twig-component  ~/.claude/skills/
cp -r skills/live-component  ~/.claude/skills/
cp -r skills/symfony-ux      ~/.claude/skills/

You can also copy them inside your project (and commit them to the shared repository) so they are available to all contributors regardless of their local setup:

1
2
3
cd your-project/
mkdir -p .claude/skills
cp -r skills/* .claude/skills/

For Gemini CLI or OpenAI Codex, replace the destination path accordingly (~/.gemini/skills/ or ~/.codex/skills/).

Good for Humans Too

Skills are not just for AI agents. Each SKILL.md and its companion reference files distill the essential best practices for each Symfony UX component: the right APIs to use, common pitfalls to avoid, and the idiomatic patterns that experienced contributors apply every day.

If you are new to Turbo Streams or unsure when to use LiveComponent instead of a plain Stimulus controller, reading the skill files provides a fast, opinionated shortcut authored by someone who has spent years working on these components at their source.

Read more at github.com/smnandre/symfony-ux-skills.

Published in #Symfony