SkillFoxx

Type a name, a task or a service

Symfony UX Skills

Skills for the Symfony UX frontend stack: Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons and UX Map, with patterns and gotchas

Skill

Low risk

We rate an entry low when it mostly gives the agent instructions and reference material.

Why this level

  • The set consists of references and guidance and runs no code
All reasons and checks

smnandre/symfony-ux-skillsAuthor:Simon Andre

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/symfony-ux-skills

Detects the agents on your machine, checks the risk and pins the version.

Other ways to install

Assembled automatically, review before installing.

Run in a terminal in the project folder

npx skills add smnandre/symfony-ux-skills --skill symfony-ux stimulus turbo twig-component live-component ux-icons ux-map -a claude-code -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 1e99301
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .claude/skills
cp -R "$tmp/skills/symfony-ux" .claude/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .claude/skills/stimulus
cp -R "$tmp/skills/turbo" .claude/skills/turbo
cp -R "$tmp/skills/twig-component" .claude/skills/twig-component
cp -R "$tmp/skills/live-component" .claude/skills/live-component
cp -R "$tmp/skills/ux-icons" .claude/skills/ux-icons
cp -R "$tmp/skills/ux-map" .claude/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add smnandre/symfony-ux-skills --skill symfony-ux stimulus turbo twig-component live-component ux-icons ux-map -a cursor -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 1e99301
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .agents/skills
cp -R "$tmp/skills/symfony-ux" .agents/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .agents/skills/stimulus
cp -R "$tmp/skills/turbo" .agents/skills/turbo
cp -R "$tmp/skills/twig-component" .agents/skills/twig-component
cp -R "$tmp/skills/live-component" .agents/skills/live-component
cp -R "$tmp/skills/ux-icons" .agents/skills/ux-icons
cp -R "$tmp/skills/ux-map" .agents/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add smnandre/symfony-ux-skills --skill symfony-ux stimulus turbo twig-component live-component ux-icons ux-map -a github-copilot -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 1e99301
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .github/skills
cp -R "$tmp/skills/symfony-ux" .github/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .github/skills/stimulus
cp -R "$tmp/skills/turbo" .github/skills/turbo
cp -R "$tmp/skills/twig-component" .github/skills/twig-component
cp -R "$tmp/skills/live-component" .github/skills/live-component
cp -R "$tmp/skills/ux-icons" .github/skills/ux-icons
cp -R "$tmp/skills/ux-map" .github/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add smnandre/symfony-ux-skills --skill symfony-ux stimulus turbo twig-component live-component ux-icons ux-map -a codex -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 1e99301
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .agents/skills
cp -R "$tmp/skills/symfony-ux" .agents/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .agents/skills/stimulus
cp -R "$tmp/skills/turbo" .agents/skills/turbo
cp -R "$tmp/skills/twig-component" .agents/skills/twig-component
cp -R "$tmp/skills/live-component" .agents/skills/live-component
cp -R "$tmp/skills/ux-icons" .agents/skills/ux-icons
cp -R "$tmp/skills/ux-map" .agents/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add smnandre/symfony-ux-skills --skill symfony-ux stimulus turbo twig-component live-component ux-icons ux-map -a gemini-cli -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 1e99301
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .agents/skills
cp -R "$tmp/skills/symfony-ux" .agents/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .agents/skills/stimulus
cp -R "$tmp/skills/turbo" .agents/skills/turbo
cp -R "$tmp/skills/twig-component" .agents/skills/twig-component
cp -R "$tmp/skills/live-component" .agents/skills/live-component
cp -R "$tmp/skills/ux-icons" .agents/skills/ux-icons
cp -R "$tmp/skills/ux-map" .agents/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .devin/skills
cp -R "$tmp/skills/symfony-ux" .devin/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .devin/skills/stimulus
cp -R "$tmp/skills/turbo" .devin/skills/turbo
cp -R "$tmp/skills/twig-component" .devin/skills/twig-component
cp -R "$tmp/skills/live-component" .devin/skills/live-component
cp -R "$tmp/skills/ux-icons" .devin/skills/ux-icons
cp -R "$tmp/skills/ux-map" .devin/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

Formerly Windsurf.

Run in a terminal in the project folder

npx skills add smnandre/symfony-ux-skills --skill symfony-ux stimulus turbo twig-component live-component ux-icons ux-map -a cline -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 1e99301
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .cline/skills
cp -R "$tmp/skills/symfony-ux" .cline/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .cline/skills/stimulus
cp -R "$tmp/skills/turbo" .cline/skills/turbo
cp -R "$tmp/skills/twig-component" .cline/skills/twig-component
cp -R "$tmp/skills/live-component" .cline/skills/live-component
cp -R "$tmp/skills/ux-icons" .cline/skills/ux-icons
cp -R "$tmp/skills/ux-map" .cline/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

npx skills add smnandre/symfony-ux-skills --skill symfony-ux stimulus turbo twig-component live-component ux-icons ux-map -a roo -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 1e99301
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .roo/skills
cp -R "$tmp/skills/symfony-ux" .roo/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .roo/skills/stimulus
cp -R "$tmp/skills/turbo" .roo/skills/turbo
cp -R "$tmp/skills/twig-component" .roo/skills/twig-component
cp -R "$tmp/skills/live-component" .roo/skills/live-component
cp -R "$tmp/skills/ux-icons" .roo/skills/ux-icons
cp -R "$tmp/skills/ux-map" .roo/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

A fork of Roo Code, same .roo folders.

Run in a terminal in the project folder

npx skills add smnandre/symfony-ux-skills --skill symfony-ux stimulus turbo twig-component live-component ux-icons ux-map -a opencode -y

The skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.

Without third-party tools, from commit 1e99301
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .agents/skills
cp -R "$tmp/skills/symfony-ux" .agents/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .agents/skills/stimulus
cp -R "$tmp/skills/turbo" .agents/skills/turbo
cp -R "$tmp/skills/twig-component" .agents/skills/twig-component
cp -R "$tmp/skills/live-component" .agents/skills/live-component
cp -R "$tmp/skills/ux-icons" .agents/skills/ux-icons
cp -R "$tmp/skills/ux-map" .agents/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .agents/skills
cp -R "$tmp/skills/symfony-ux" .agents/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .agents/skills/stimulus
cp -R "$tmp/skills/turbo" .agents/skills/turbo
cp -R "$tmp/skills/twig-component" .agents/skills/twig-component
cp -R "$tmp/skills/live-component" .agents/skills/live-component
cp -R "$tmp/skills/ux-icons" .agents/skills/ux-icons
cp -R "$tmp/skills/ux-map" .agents/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

Run in a terminal in the project folder

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/smnandre/symfony-ux-skills.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/symfony-ux/ /skills/stimulus/ /skills/turbo/ /skills/twig-component/ /skills/live-component/ /skills/ux-icons/ /skills/ux-map/
git -C "$tmp" checkout 1e99301a6255724eca9c49ce9cdb8c241771ab05
mkdir -p .agents/skills
cp -R "$tmp/skills/symfony-ux" .agents/skills/symfony-ux
cp -R "$tmp/skills/stimulus" .agents/skills/stimulus
cp -R "$tmp/skills/turbo" .agents/skills/turbo
cp -R "$tmp/skills/twig-component" .agents/skills/twig-component
cp -R "$tmp/skills/live-component" .agents/skills/live-component
cp -R "$tmp/skills/ux-icons" .agents/skills/ux-icons
cp -R "$tmp/skills/ux-map" .agents/skills/ux-map

Commands for macOS and Linux, on Windows run them in Git Bash.

You will need: Node.js

Checked against the repository on Sep 26, 2026, commit 1e99301.

Text for your agent

Install the plugin: claude plugin marketplace add smnandre/symfony-ux-skills, then claude plugin install symfony-ux-skills@symfony-ux-skills. Alternatively use npx skills add smnandre/symfony-ux-skills.

Other ways from the author
claude plugin marketplace add smnandre/symfony-ux-skills
claude plugin install symfony-ux-skills@symfony-ux-skills

This is third-party code. Review the repository files before installing.

What it does

The set gives the agent working knowledge of the Symfony UX frontend stack. An orchestrator skill helps pick the right tool, and specialized skills cover Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons and UX Map. Each skill has references on API, patterns and gotchas. The agent chooses the right tool for the task: reactive forms, partial page updates, reusable components, icons or maps.

Who it is for. For Symfony developers who build the interface with the UX stack and minimal JavaScript.

Good fit when

  • You write a Symfony UX frontend and want guidance on a specific package
  • You are unsure whether to pick Stimulus, Turbo or LiveComponent for a task
  • You need patterns and warnings about common mistakes in the stack

Not a fit when

  • The project is not on Symfony and does not use the UX stack
  • You need a frontend framework outside the Symfony ecosystem
  • General knowledge is enough without per-package references

Example request

Build a live product-list search with a LiveComponent and server-side validation

Limitations

The skills describe the Symfony UX stack and are useful only in projects that use it. This is reference material that guides the agent; the Symfony UX packages themselves you install separately via Composer and npm. MIT licensed.

How to disable. Uninstall the symfony-ux-skills plugin through the plugin manager or remove the copied skill folders from the agent's directory.

Security check

  • The set consists of references and guidance and runs no code

README in short

The README presents a skill set for the Symfony UX frontend stack by Simon Andre. A table lists the skills, what they do and when the agent activates them; most have references on API, patterns and gotchas. Install is offered as a Claude Code plugin, via the Skills CLI with npx skills add, or by manually copying folders for Claude Code, Gemini CLI and Codex. It also links the upstream Symfony UX packages on Packagist. MIT licensed.

SKILL.md

---
name: symfony-ux
description: Symfony UX frontend stack -- decision tree and orchestrator for choosing between Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons, and UX Map. Use when the user is unsure which tool fits, wants to combine multiple UX packages, or asks a general frontend architecture question in Symfony.
license: MIT
metadata:
  author: Simon Andre
  version: "1.2.0"
---

# 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
- Navigation / partial page updates -> Turbo
- Reusable UI component -> TwigComponent or LiveComponent
- Need icons -> UX Icons
- Need an interactive map -> UX Map

FAQ

How many skills are in the set?

An orchestrator skill for choosing a tool and six specialized ones: Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons and UX Map.

Which agents does it work with?

It names Claude, Gemini and Codex; install as a Claude Code plugin, via the Skills CLI, or by copying folders.

Editors’ pick

Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server

PluginMedium riskNo VPN needed142.9K
Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium riskNo VPN needed124.8K
Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk72.1K
Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.7K
Foxx AISymfony UX Skills

I am Foxx AI and I have already vetted this tool. Ask about install, setup or anything else, and I will keep it simple.