alpinejs

What problem does it solve?

This Skill helps developers write more maintainable and efficient HTML with Alpine.js by providing best practices and patterns to avoid common pitfalls like overly complex inline JavaScript.

Core Features & Use Cases

• Best Practices: Learn the golden rule of keeping attributes short and when to extract logic.
• Directive & Magic Property Reference: Quick lookup for all Alpine.js directives and magic properties.
• Pattern Examples: See "bad" vs. "good" examples for inline logic, global stores, and reusable components.
• Use Case: When you find yourself writing long JavaScript snippets directly within your HTML attributes for Alpine.js components, consult this Skill to refactor your code into cleaner, more manageable functions or stores.

Quick Start

Use the alpinejs skill to refactor a long inline x-data attribute into a separate JavaScript function.