Can I use this for refactoring existing code?

Yes, the skill provides specific workflows for refactoring monolithic controllers into smaller, more maintainable units using 'Better Stimulus' patterns.

How does this skill improve StimulusJS code?

It enforces best practices like using the Values API for state, externalizing configuration to data attributes, and ensuring each controller has a single responsibility.

Does it support Turbo integration?

Absolutely. It includes patterns for handling Turbo lifecycle events, form submissions with requestSubmit, and proper cleanup to prevent memory leaks during navigation.

What is the benefit of using the Values API over instance properties?

The Values API provides built-in reactivity, automatic type conversion, and DOM persistence, making your state management more robust and predictable compared to standard instance properties.

Better Stimulus

Name: Better Stimulus
Author: obie

byobie

•

디자인 도구

Applies opinionated best practices and SOLID principles to write maintainable, reusable StimulusJS controllers.

Better Stimulus is a specialized Claude Code skill designed to help developers architect high-quality StimulusJS controllers following the patterns established at betterstimulus.com. It provides expert guidance on externalizing configuration through data attributes, managing reactive state via the Values API, and ensuring controllers adhere to Single Responsibility principles. Whether you are building new interactive features or refactoring legacy JavaScript, this skill ensures your frontend code remains modular, easy to debug, and fully integrated with modern Hotwire workflows like Turbo.

주요 기능

01Implements SOLID design principles for modular frontend controller architecture.

02Enforces use of Stimulus Values API for reactive, DOM-persistent state management.

03Provides structured patterns for inter-controller communication via Outlets and Custom Events.

0432 GitHub stars

05Promotes declarative event handling using data-action attributes instead of manual listeners.

06Ensures seamless integration and lifecycle cleanup for Hotwire Turbo environments.

사용 사례

01Implementing complex UI components with third-party library lifecycle management.

02Refactoring monolithic JavaScript into modular, reusable Stimulus controllers.

03Standardizing frontend codebases to align with Hotwire and Ruby on Rails best practices.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add obie/skills better-stimulus

For use in Claude.ai and ChatGPT

Download Skill