Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Stimulus (Symfony UX)

Teaches Claude to write idiomatic Stimulus controllers and data-attribute wiring for Symfony UX projects.

Dev & CodingIntermediate★ 167⑂ 12AI score 9/10Last updated: Jun 14, 2026

What it does

Gives Claude a precise working model of Stimulus JS inside Symfony UX.

  • Correct wiring for data-controller, data-action, data-*-target, data-*-value, data-*-class, data-*-outlet
  • File naming conventions (hello_controller.js → data-controller="hello", subdirectories use --)
  • connect() / disconnect() lifecycle with cleanup rules and Turbo navigation compatibility
  • Keyboard shortcuts, global window/document events, action modifiers like :prevent
  • Lazy loading heavy dependencies via /* stimulusFetch: 'lazy' */
  • Passing server data from Twig as typed values, plus stimulus_controller() helpers
  • Deep-dive references: api.md, patterns.md, gotchas.md

It also states when NOT to use it: Turbo for partial page updates, Live Component for server-rendered reactivity, Twig Component for reusable templates.

Who it's for

  • Symfony developers building front-end behavior with Symfony UX (AssetMapper or Webpack Encore)
  • Anyone using Stimulus who keeps mixing up targets, values and outlets
  • Developers wrapping third-party JS libraries in Stimulus controllers

Examples

  1. "Build a dropdown menu with Stimulus" → composes controllers and uses data-action="click->dropdown#toggle"
  2. "Modal that closes on ESC" → applies keydown.esc@window->modal#close
  3. "Add a Chart.js chart" → lazy-loaded controller with /* stimulusFetch: 'lazy' */ and Twig-provided values

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/smnandre/symfony-ux-skills/HEAD/skills/stimulus/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/stimulus folder from the GitHub repo smnandre/symfony-ux-skills into my ~/.claude/skills/stimulus/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/smnandre/symfony-ux-skills.git /tmp/symfony-ux-skills && mkdir -p ~/.claude/skills && cp -r /tmp/symfony-ux-skills/skills/stimulus ~/.claude/skills/stimulus

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repository: git clone https://github.com/smnandre/symfony-ux-skills.git
  3. Create the skills directory if needed: mkdir -p ~/.claude/skills
  4. Copy the skill including its references folder: cp -r symfony-ux-skills/skills/stimulus ~/.claude/skills/stimulus
  5. Verify with ls ~/.claude/skills/stimulus — you should see SKILL.md and references/.
  6. Restart Claude Code, then in a Symfony project ask something like "build a toggle button with Stimulus" to trigger the skill.
View source on GitHub ↗License: MIT