{"enrichment":{"faq":[{"a":"Stimulus is a lightweight JavaScript framework that wires controllers to HTML via data attributes. To add click handlers, create a controller class with an action method, then use `data-controller` to attach it to an element and `data-action` to bind the click event. For example: `<button data-controller=\"toggle\" data-action=\"click->toggle#toggle\">Click me</button>` connects to a `toggle()` method in your controller.","q":"What is Stimulus and how do I add click handlers in it?"},{"a":"Stimulus uses three main data attributes to wire behavior: `data-controller` names the controller class, `data-action` binds DOM events to controller methods (format: `event->controller#method`), and `data-target` marks elements for reference in your controller code. You access targets via `this.targetName` in your controller, making it easy to manipulate specific elements without querying the DOM.","q":"How do stimulus controller data attributes work?"},{"a":"Stimulus excels at building reusable UI components like dropdowns and modals. Create a controller with methods to toggle visibility, handle clicks outside the component, and manage CSS classes. Use `data-target` to reference the dropdown menu or modal backdrop, then use `data-action` to wire button clicks to your toggle methods. This approach keeps behavior tied to markup without a full SPA.","q":"Can I build a dropdown or modal with Stimulus?"},{"a":"Stimulus provides outlets to coordinate behavior across controllers. Define an outlet in one controller using `static outlets = ['other']`, then reference it via `this.otherOutlets` to call methods or access targets on other controllers. You can also use global event listeners with `dispatch()` to broadcast events that multiple controllers listen for via `data-action`.","q":"How do I communicate between multiple Stimulus controllers?"},{"a":"Stimulus controllers can initialize and manage third-party libraries in the `connect()` lifecycle method. Store the library instance as a property, configure it with your targets and options, then clean up in `disconnect()` when Turbo navigates away. This pattern lets you integrate heavy dependencies without rendering markup, keeping your server-rendered HTML lightweight.","q":"How do I wrap a third-party JavaScript library in Stimulus?"},{"a":"Stimulus calls `disconnect()` when Turbo navigates between pages or an element is removed from the DOM. Use this lifecycle method to remove event listeners, cancel timers, destroy third-party library instances, and free memory. Proper cleanup prevents memory leaks and ensures your controllers don't interfere with subsequent page loads.","q":"What cleanup should Stimulus controllers do when disconnecting?"}],"shadow_tags":["dom-behavior","event-binding","html-first","client-side-interactivity","controller-pattern","symfony-ux","progressive-enhancement","lightweight-framework","data-driven-ui"],"summary_rewrite":"Stimulus is a lightweight JavaScript framework that wires controllers to HTML via data attributes, letting you handle clicks, inputs, and DOM changes without rendering markup. Attach behavior to server-rendered elements using `data-controller`, `data-action`, and `data-target` attributes, then compose controllers for toggles, modals, dropdowns, and more. Clean up in `disconnect()` when Turbo navigates between pages."},"files":[{"bytes":8258,"path":"skills/stimulus/SKILL.md","sha256":"d536a653f1d3560214c8d4a7f2148ebbccc9c8f9ecc4ec790775ccbbcef400cc","url":"https://skillfed.io/files/smnandre/symfony-ux-skills/stimulus/77785dec/SKILL.md"}],"id":"smnandre/symfony-ux-skills/stimulus","links":{"html":"https://skillfed.io/smnandre/symfony-ux-skills/stimulus","md":"https://skillfed.io/smnandre/symfony-ux-skills/stimulus.md","repo":"https://github.com/smnandre/symfony-ux-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":12,"language":null,"last_updated":"2026-06-14","license":"MIT","name":"stimulus","publisher":"smnandre","stars":164},"relations":{"similar":[{"id":"smnandre/symfony-ux-skills/symfony-ux"},{"id":"majesticlabs-dev/majestic-marketplace/stimulus-coder"},{"id":"Guiziweb/guiziweb-plugins/plugin-add-stimulus-controller"},{"id":"smnandre/symfony-ux-skills/live-component"},{"id":"smnandre/symfony-ux-skills/ux-map"},{"id":"majesticlabs-dev/majestic-marketplace/dialog-patterns"},{"id":"smnandre/symfony-ux-skills/twig-component"},{"id":"smnandre/symfony-ux-skills/turbo"},{"id":"pproenca/dot-skills/rails-hotwire"},{"id":"ratacat/claude-skills/julik-frontend-races-reviewer"}]},"slug":{"owner":"smnandre","repo":"symfony-ux-skills","skill":"stimulus"},"version":"77785dec"}