skills.rest
sinfin
sinfinOFFICIAL
Explore all skills by this author →
WebsiteGitHub

folio-stimulus

Register Stimulus controllers and add data attributes for Folio components.

10|2|Updated Jul 10, 2017
Search Tags:#JavaScript#interactive design#component interaction#Folio#Stimulus
One-click install
npx skills add https://github.com/sinfin/folio --skill folio-stimulus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: folio-stimulus
Source: https://github.com/sinfin/folio/tree/main/.skills/folio-stimulus
Command: npx skills add https://github.com/sinfin/folio --skill folio-stimulus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill simplifies the process of adding interactive behavior to Folio components using Stimulus, reducing the complexity of JavaScript code and improving maintainability.

Core Features & Use Cases

  • Controller Registration: Register Stimulus controllers next to their components for easy management.
  • Data Attributes: Use StimulusHelper to add data attributes for controllers, actions, and targets in Slim templates.
  • Utility Helpers: Access built-in helpers for common Stimulus patterns like lightboxes, tooltips, and modals.
  • Events: Handle global events and controller-to-controller communication efficiently.
  • Use Case: When you need to add interactive behavior to a Folio component, this Skill provides the necessary tools to do so effectively.

Quick Start

To use the folio-stimulus skill, register a new Stimulus controller next to your component file and use StimulusHelper to add data attributes.

Frequently Asked Questions about folio-stimulus

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

FAQPage Schema
How do I add interactive JavaScript behavior to Folio components?▼

To add interactive JavaScript behavior to Folio components, register a Stimulus controller next to the component file and use StimulusHelper to apply data attributes for controllers, actions, and targets in Slim templates.

What is the best way to manage Stimulus controller file placement in Folio?▼

Managing Stimulus controller file placement in Folio involves registering each controller directly next to its corresponding component file, ensuring modular design, easy management, and high reusability for interactive behaviors.

How do I add data attributes for Stimulus controllers and actions in Slim templates?▼

Adding data attributes for Stimulus controllers, actions, and targets in Slim templates is done using the StimulusHelper, which simplifies the process and reduces JavaScript code complexity for Folio components.

Does Folio provide built-in helpers for common Stimulus patterns like lightboxes and tooltips?▼

Folio provides built-in utility helpers for common Stimulus patterns like lightboxes, tooltips, and modals, allowing developers to efficiently handle global events and controller-to-controller communication.

Can I use Stimulus to handle global events and controller-to-controller communication in Folio?▼

Stimulus handles global events and controller-to-controller communication in Folio efficiently through built-in utility helpers, reducing complexity and improving the maintainability of JavaScript behavior.

Why does my Folio component need Stimulus conventions for JavaScript behavior?▼

Folio components need Stimulus conventions to streamline interactive JavaScript behavior, reducing code complexity and improving maintainability through modular design and reusable controller registration.

Related Skills

Explore More Software Engineering Skills→
sinfinsinfin
10

folio-view-component

Generate Folio ViewComponents with Stimulus integration and testing guidelines.

Official
Intermediate
sinfinsinfin
10

folio-stimulus-migration-from-legacy-js

Migrate legacy jQuery scripts to Stimulus controllers in Folio applications.

Official
Intermediate
RoleModelRoleModel
6

frontend-patterns

Create Rails frontends using Slim templates, Stimulus controllers, and Optics utilities.

Official
Basic
sinfinsinfin
10

folio-scss

Define Sass/SCSS conventions for Folio component styling with BEM and responsive design.

Official
Intermediate