Home / Symfony / Introducing AI Skills for Symfony UX

Introducing AI Skills for Symfony UX

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:

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:

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:

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.


Sponsor the Symfony project.
Tagged:

Leave a Reply

Your email address will not be published. Required fields are marked *