skills.rest
sandnap
sandnapCOMMUNITY
Explore all skills by this author →
GitHub

stimulus

Wire Stimulus controllers to DOM elements via data-controller attributes for declarative interactivity.

6|2|Updated Dec 13, 2024
Search Tags:#frontend#javascript#rails#stimulus#hotwired#stimulus-controllers
One-click install
npx skills add https://github.com/sandnap/easy_notes --skill stimulus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stimulus
Source: https://github.com/sandnap/easy_notes/tree/main/.claude/skills/stimulus
Command: npx skills add https://github.com/sandnap/easy_notes --skill stimulus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Stimulus provides a light-touch approach to adding JavaScript behavior to HTML without heavy frameworks, letting HTML remain the source of truth while enabling modest interactivity.

Core Features & Use Cases

  • Declarative connections: data-controller attributes wire JS classes to DOM elements.
  • Targets, actions, and values: organize interaction, events, and state in a scalable way.
  • Turbo integration: works well with Turbo Drive/Frames to enhance navigation with minimal JS.
  • Real-world Use Case: Toggle a dropdown, validate a form, or create keyboard shortcuts with minimal code.

Quick Start

Attach Stimulus controllers to your HTML elements using data-controller attributes to progressively add behavior.

Frequently Asked Questions about stimulus

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

FAQPage Schema
How do I add JavaScript behavior to HTML without using a heavy framework?▼

Stimulus lets you add JavaScript behavior to HTML by wiring controllers to DOM elements via data attributes, keeping HTML the source of truth. It targets lightweight interactivity for Rails and web apps.

How do I wire Stimulus controllers to DOM elements in a Rails app?▼

You wire Stimulus controllers by attaching data-controller attributes to HTML elements, progressively adding scalable interaction, events, and state through targets, actions, and values.

Does Stimulus work with Turbo Drive and Turbo Frames for navigation?▼

Yes, Stimulus integrates smoothly with Turbo Drive and Turbo Frames to enhance page navigation and interactivity with minimal JavaScript overhead in your web application.

What is the best way to create dropdowns and form validation in Rails without heavy JavaScript?▼

Using Stimulus is an effective way to toggle dropdowns, validate forms, and create keyboard shortcuts by declaratively wiring controller classes to DOM elements via data attributes.

Can I manage client-side state and events using data attributes in Stimulus?▼

Yes, Stimulus organizes client-side interaction, events, and state using targets, actions, and values, allowing scalable behavior management directly through HTML data attributes.

When should I choose a lightweight framework over a heavy JavaScript framework for interactivity?▼

You should choose a lightweight framework like Stimulus when you need modest, maintainable client-side behavior and want HTML to remain the source of truth without heavy framework overhead.

Related Skills

Explore More Software Engineering Skills→
smnandresmnandre
166

stimulus

Attach Stimulus controllers to server-rendered HTML via data attributes.

Community
Intermediate
KaakatiKaakati
10

Turbo & Hotwire Patterns

Implement Turbo and Stimulus patterns for real-time Rails UI updates.

Community
Intermediate
ThibautBaissacThibautBaissac
643

hotwire-patterns

Build dynamic Rails interfaces with Turbo Frames, Turbo Streams, and Stimulus.

Community
Intermediate
woweyawoweya
1

symfony-ux-stimulus

Integrate Stimulus controllers into Symfony projects using data-controller attributes.

Community
Intermediate