{
  "markdown": "# Symfony UX -- Agent Skills\n\n![Trigger warning animals](https://repository-images.githubusercontent.com/1171056549/6dee3166-2b48-449b-ad26-667ee821ff35)\n\nAI agent skills for the [Symfony UX](https://ux.symfony.com) frontend stack -- Stimulus, Turbo, TwigComponent, LiveComponent, UX Icons and UX Map.\n\nBy [Simon Andre](https://github.com/smnandre)\n\n## Skills\n\n| Skill | What it does | When the agent activates it | Refs |\n|---|---|---|:---:|\n| **[symfony-ux](skills/symfony-ux/)** | Orchestrator / decision tree | The developer asks \"which UX tool should I use?\" or a question that spans multiple packages | -- |\n| **[stimulus](skills/stimulus/)** | Stimulus controllers, targets, values, actions, outlets | Client-side JS behavior -- toggles, dropdowns, modals, wrapping a JS library | api, patterns, gotchas |\n| **[turbo](skills/turbo/)** | Turbo Drive, Frames, Streams, Mercure | Partial page updates, SPA-like nav, real-time server pushes -- no JS to write | api, patterns, gotchas |\n| **[twig-component](skills/twig-component/)** | TwigComponent props, blocks, computed properties, anonymous components | Reusable UI building blocks -- buttons, cards, alerts, design system | api, patterns, gotchas |\n| **[live-component](skills/live-component/)** | LiveComponent props, actions, data-model, forms, emit, defer/lazy | Reactive server-rendered UI -- live search, validation, dependent selects | api, patterns, gotchas |\n| **[ux-icons](skills/ux-icons/)** | SVG icons via Iconify, local files, aliases, CLI | Rendering icons in Twig -- Lucide, Heroicons, Tabler, Material Design, etc. | api, patterns, gotchas |\n| **[ux-map](skills/ux-map/)** | Interactive maps with Leaflet / Google Maps | Maps with markers, polygons, polylines, circles, events, LiveComponent integration | api, patterns, gotchas |\n\n**Upstream packages:**\n[symfony/stimulus-bundle](https://packagist.org/packages/symfony/stimulus-bundle) --\n[symfony/ux-turbo](https://packagist.org/packages/symfony/ux-turbo) --\n[symfony/ux-twig-component](https://packagist.org/packages/symfony/ux-twig-component) --\n[symfony/ux-live-component](https://packagist.org/packages/symfony/ux-live-component) --\n[symfony/ux-icons](https://packagist.org/packages/symfony/ux-icons) --\n[symfony/ux-map](https://packagist.org/packages/symfony/ux-map)\n\n## Installation\n\n### Claude Code Plugin\n\nThis repository is a [Claude Code plugin marketplace](https://docs.claude.com/en/docs/claude-code/plugins). Add the marketplace, then install the plugin. Skills are namespaced under `symfony-ux-skills:`.\n\n```bash\nclaude plugin marketplace add smnandre/symfony-ux-skills\nclaude plugin install symfony-ux-skills@symfony-ux-skills\n```\n\n`smnandre/symfony-ux-skills` is the GitHub repository. `symfony-ux-skills@symfony-ux-skills` reads as `plugin@marketplace`.\n\nTo load the plugin locally without installing it:\n\n```bash\nclaude --plugin-dir /path/to/symfony-ux-skills\n```\n\n### Vercel's Skills CLI\n\n```bash\nnpx skills add smnandre/symfony-ux-skills\n```\n\n### Manual installation\n\nCopy each skill directory into your platform's skills location:\n\n```bash\n# Claude Code (project-level, shared via git)\nmkdir -p .claude/skills && cp -r skills/* .claude/skills/\n\n# Claude Code (user-level, available everywhere)\ncp -r skills/* ~/.claude/skills/\n\n# Gemini CLI\nmkdir -p ~/.gemini/skills && cp -r skills/* ~/.gemini/skills/\n\n# OpenAI Codex\nmkdir -p .codex/skills && cp -r skills/* .codex/skills/\n```\n\nThen optionally copy the context file for your platform to your project root:\n\n```bash\ncp CLAUDE.md /path/to/project/   # Claude Code\ncp AGENTS.md /path/to/project/   # OpenAI Codex\ncp GEMINI.md /path/to/project/   # Gemini CLI\n```\n\n## How it works\n\nAgent 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.\n\nEach skill follows a **progressive disclosure** pattern:\n\n1. **Description** (YAML frontmatter) -- always loaded; tells the agent *when* to activate the skill (~100 words)\n2. **SKILL.md body** -- loaded on activation; quick-reference with the most important rules and examples\n3. **references/** -- loaded on demand; deep API docs, advanced patterns, and common pitfalls\n\nThis means the agent only pulls in what it needs, keeping context windows lean.\n\nBuilt on the [Agent Skills](https://agentskills.io/specification) open standard. Compatible with **Claude Code**, **Gemini CLI**, **OpenAI Codex**, **Cursor**, **Windsurf**, and any platform that supports `SKILL.md`.\n\n## Project context files\n\nOptional files for your project root. They give the agent a quick decision tree and key rules so it knows which skill to reach for.\n\n| File | Platform |\n|---|---|\n| `CLAUDE.md` | Claude Code |\n| `AGENTS.md` | OpenAI Codex |\n| `GEMINI.md` | Gemini CLI |\n| `llms.txt` | Web / any LLM ([llmstxt.org](https://llmstxt.org)) |\n\n## Repository structure\n\n```\n.\n├── CLAUDE.md                   # Context file for Claude Code\n├── AGENTS.md                   # Context file for OpenAI Codex\n├── GEMINI.md                   # Context file for Gemini CLI\n├── llms.txt                    # Context file for web / LLMs\n├── .claude-plugin/\n│   └── plugin.json             # Claude Code plugin manifest\n├── gemini-extension.json       # Gemini CLI extension manifest\n└── skills/\n    ├── symfony-ux/\n    │   └── SKILL.md\n    ├── stimulus/\n    │   ├── SKILL.md\n    │   └── references/\n    │       ├── api.md\n    │       ├── patterns.md\n    │       └── gotchas.md\n    ├── turbo/\n    │   ├── SKILL.md\n    │   └── references/\n    │       ├── api.md\n    │       ├── patterns.md\n    │       └── gotchas.md\n    ├── twig-component/\n    │   ├── SKILL.md\n    │   └── references/\n    │       ├── api.md\n    │       ├── patterns.md\n    │       └── gotchas.md\n    ├── live-component/\n    │   ├── SKILL.md\n    │   └── references/\n    │       ├── api.md\n    │       ├── patterns.md\n    │       └── gotchas.md\n    ├── ux-icons/\n    │   ├── SKILL.md\n    │   └── references/\n    │       ├── api.md\n    │       ├── patterns.md\n    │       └── gotchas.md\n    └── ux-map/\n        ├── SKILL.md\n        └── references/\n            ├── api.md\n            ├── patterns.md\n            └── gotchas.md\n```\n\n## Coverage\n\nTargets **Symfony UX 2.22 -- 2.28+**, Symfony 7.2 / 7.4 / 8.0, PHP 8.4+.\n\nDocumented 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`.\n\n## Author\n\nSimon Andre -- [smnandre.dev](https://smnandre.dev) -- [GitHub](https://github.com/smnandre) -- [Twitter](https://x.com/simonandre)\n\n## License\n\nMIT\n",
  "bytes": 6996,
  "sha": "57d7a35389db2c79e41c76858e1b8932c26e1e6df0bcead541d51c7a6ce9891a",
  "repo_slug": "smnandre/symfony-ux-skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_smnandre_symfony_ux_skills_a7e45043/readme"
}