Hotwire Patterns

What it does

This skill provides expertise in Hotwire patterns, a full-stack web development approach for building fast and maintainable Rails applications. It allows the AI agent to understand and generate code related to Turbo Frames, Turbo Streams, and Stimulus controllers – key components of the Hotwire ecosystem. The skill enables efficient handling of dynamic UI updates without relying on traditional JavaScript frameworks.

When to use it

• Generating Turbo Frame content: You need a snippet of HTML that will be dynamically updated within a Turbo Frame.
• Creating Turbo Stream responses: You want to generate the JSON payload for updating parts of a page using Turbo Streams.
• Developing Stimulus controllers: You require assistance in writing or debugging Stimulus controller logic for interactive UI elements.
• Understanding Hotwire architecture: You need explanations and examples of how different Hotwire components work together.

Key capabilities

• Turbo Frames
• Turbo Streams
• Stimulus Controllers
• Rails Full-Stack Development

Example prompts

• "Generate a Turbo Stream to update the 'notifications' section with a new message."
• "Write a Stimulus controller for a button that toggles a modal window."
• "Explain how Turbo Frames improve page load times in Rails applications."

Tips & gotchas

This skill assumes familiarity with basic Rails concepts. While it can generate code, understanding the underlying Hotwire principles is crucial for effective use and debugging.