stimulus

Create Stimulus controllers with declarative data attributes for interactive HTML.

5|Updated Jan 28, 2026
One-click install
npx skills add https://github.com/ThinkOodle/rails-skills --skill stimulus-thinkoodle
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stimulus
Source: https://github.com/ThinkOodle/rails-skills/tree/main/skills/stimulus
Command: npx skills add https://github.com/ThinkOodle/rails-skills --skill stimulus-thinkoodle

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of adding dynamic behavior and interactivity to server-rendered HTML, making web applications more engaging without complex JavaScript frameworks.

Core Features & Use Cases

  • Declarative Event Handling: Connect HTML elements to JavaScript controller methods using simple data attributes.
  • State Management: Define and manage controller state using values, targets, and classes.
  • Use Case: Enhance a product listing page by adding a "quick view" modal that appears when a user clicks a button, displaying product details fetched dynamically, all managed by Stimulus controllers.

Quick Start

Use the stimulus skill to create a new controller named 'modal' in app/javascript/controllers/.

Frequently Asked Questions about stimulus

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add interactive JavaScript behaviors to server-rendered HTML?

You can add interactive JavaScript behaviors to server-rendered HTML by creating small, focused controllers that manage UI state and event handling through declarative data attributes. This approach integrates seamlessly with Turbo and Rails.

How do I wire HTML elements to JavaScript methods using data attributes?

You wire HTML elements to JavaScript methods using declarative data attributes for event handling. This connects your frontend elements directly to controller actions, enabling dynamic behavior without complex JavaScript frameworks.

Can I manage UI state and cross-controller communication in Stimulus?

Yes, you can manage UI state in Stimulus using values, targets, and classes. It also supports cross-controller communication via outlets, allowing different controllers to interact and share state across your application.

How do I generate a new Stimulus controller in a Rails application?

To generate a new Stimulus controller in a Rails application, you create a controller file within the app/javascript/controllers/ directory. This process supports controller generation, attribute definition, action wiring, and lifecycle management.

Does this approach work with Turbo and Rails for frontend interactivity?

Yes, this approach works seamlessly with Turbo and Rails for frontend interactivity. It enhances server-rendered HTML by managing UI state and event handling through declarative data attributes, integrating directly with the Rails stack.

What is the best way to build a quick view modal without a complex JavaScript framework?

The best way to build a quick view modal without a complex JavaScript framework is using focused controllers that manage state and declarative actions. This allows you to fetch product details dynamically and display them in a modal upon user interaction.