Symfony UX -- Agent Skills

AI agent skills for the Symfony UX frontend stack -- Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons and UX Map.

By Simon Andre

Skills

Upstream packages: symfony/stimulus-bundle -- symfony/ux-turbo -- symfony/ux-twig-component -- symfony/ux-live-component -- symfony/ux-icons -- symfony/ux-map

Installation

Claude Code Plugin

This repository is a Claude Code plugin marketplace. Add the marketplace, then install the plugin. Skills are namespaced under symfony-ux-skills:.

claude plugin marketplace add smnandre/symfony-ux-skills
claude plugin install symfony-ux-skills@symfony-ux-skills

smnandre/symfony-ux-skills is the GitHub repository. symfony-ux-skills@symfony-ux-skills reads as plugin@marketplace.

To load the plugin locally without installing it:

claude --plugin-dir /path/to/symfony-ux-skills

Vercel's Skills CLI

npx skills add smnandre/symfony-ux-skills

Manual installation

Copy each skill directory into your platform's skills location:

# Claude Code (project-level, shared via git)
mkdir -p .claude/skills && cp -r skills/* .claude/skills/

# Claude Code (user-level, available everywhere)
cp -r skills/* ~/.claude/skills/

# Gemini CLI
mkdir -p ~/.gemini/skills && cp -r skills/* ~/.gemini/skills/

# OpenAI Codex
mkdir -p .codex/skills && cp -r skills/* .codex/skills/

Then optionally copy the context file for your platform to your project root:

cp CLAUDE.md /path/to/project/   # Claude Code
cp AGENTS.md /path/to/project/   # OpenAI Codex
cp GEMINI.md /path/to/project/   # Gemini CLI

How it works

Agent skills are structured knowledge files that teach AI coding agents how to use a library. Instead of relying on training data (which may be outdated or incomplete), the agent reads the skill at runtime and gets accurate, version-specific guidance: API references, common patterns, and known gotchas.

Each skill follows a progressive disclosure pattern:

1. Description (YAML frontmatter) -- always loaded; tells the agent when to activate the skill (~100 words)
2. SKILL.md body -- loaded on activation; quick-reference with the most important rules and examples
3. references/ -- loaded on demand; deep API docs, advanced patterns, and common pitfalls

This means the agent only pulls in what it needs, keeping context windows lean.

Built on the Agent Skills open standard. Compatible with Claude Code, Gemini CLI, OpenAI Codex, Cursor, Windsurf, and any platform that supports SKILL.md.

Project context files

Optional files for your project root. They give the agent a quick decision tree and key rules so it knows which skill to reach for.

Repository structure

.
├── CLAUDE.md                   # Context file for Claude Code
├── AGENTS.md                   # Context file for OpenAI Codex
├── GEMINI.md                   # Context file for Gemini CLI
├── llms.txt                    # Context file for web / LLMs
├── .claude-plugin/
│   └── plugin.json             # Claude Code plugin manifest
├── gemini-extension.json       # Gemini CLI extension manifest
└── skills/
    ├── symfony-ux/
    │   └── SKILL.md
    ├── stimulus/
    │   ├── SKILL.md
    │   └── references/
    │       ├── api.md
    │       ├── patterns.md
    │       └── gotchas.md
    ├── turbo/
    │   ├── SKILL.md
    │   └── references/
    │       ├── api.md
    │       ├── patterns.md
    │       └── gotchas.md
    ├── twig-component/
    │   ├── SKILL.md
    │   └── references/
    │       ├── api.md
    │       ├── patterns.md
    │       └── gotchas.md
    ├── live-component/
    │   ├── SKILL.md
    │   └── references/
    │       ├── api.md
    │       ├── patterns.md
    │       └── gotchas.md
    ├── ux-icons/
    │   ├── SKILL.md
    │   └── references/
    │       ├── api.md
    │       ├── patterns.md
    │       └── gotchas.md
    └── ux-map/
        ├── SKILL.md
        └── references/
            ├── api.md
            ├── patterns.md
            └── gotchas.md

Coverage

Targets Symfony UX 2.22 -- 2.28+, Symfony 7.2 / 7.4 / 8.0, PHP 8.4+.

Documented features include <twig:Turbo:Stream:*> component syntax (UX 2.22), TurboStreamResponse helper, LiveProp URL binding with validation modifiers, defer / lazy loading for LiveComponents, UX Toolkit (copy-paste UI components), Iconify on-demand icons with ux:icons:lock CLI, and UX Map with Leaflet/Google Maps renderers including polygons, polylines, circles and ComponentWithMapTrait.

Author

Simon Andre -- smnandre.dev -- GitHub -- Twitter

License

MIT