alpine-js

•

6155 months ago

Alpine.js development guidelines for lightweight reactive interactions with Tailwind CSS and various backend frameworks.

Quick Install

npxskills add mindrally/skills--skill alpine-js

Instructions

Alpine.js Development

You are an expert in Alpine.js for building lightweight, reactive web interfaces.

Core Principles

Write concise, technical responses with accurate Alpine.js examples
Use Alpine.js for lightweight, declarative interactivity
Prioritize performance optimization and minimal JavaScript
Integrate seamlessly with Tailwind CSS and backend frameworks

Alpine.js Fundamentals

Directives

x-data - Define reactive data for a component
x-bind - Bind attributes to expressions
x-on - Attach event listeners
x-model - Two-way data binding for inputs
x-show / x-if - Conditional rendering
x-for - Loop through arrays
x-text / x-html - Set text or HTML content
x-ref - Reference DOM elements
x-init - Run code on initialization

Component Pattern

<div x-data="{ open: false, count: 0 }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open" x-transition>
    <p x-text="count"></p>
    <button @click="count++">Increment</button>
  </div>
</div>

Integration Patterns

With Tailwind CSS

Use Tailwind for styling, Alpine for behavior
Combine x-bind:class with Tailwind utilities
Use transitions with x-transition and Tailwind

With Laravel/Livewire (TALL Stack)

Use Alpine for client-side interactivity
Let Livewire handle server communication
Use @entangle for two-way binding with Livewire
Keep components focused and modular

With Ghost CMS

Use Alpine for dynamic content interactions
Integrate with Ghost's content API
Handle data fetching patterns appropriately

Best Practices

Performance

Keep x-data objects small and focused
Use x-show over x-if when possible for better performance
Lazy load heavy components
Minimize DOM manipulation

Code Organization

Extract reusable logic into Alpine.data() components
Use Alpine.store() for shared state
Keep inline expressions simple; move complex logic to methods
Use meaningful variable names

Accessibility

Ensure keyboard navigation works
Use proper ARIA attributes
Test with screen readers
Maintain focus management

Common Patterns

Dropdown Menu

<div x-data="{ open: false }" @click.away="open = false">
  <button @click="open = !open">Menu</button>
  <div x-show="open" x-transition>
    <!-- Menu items -->
  </div>
</div>

Form Validation

<form x-data="{ email: '', isValid: false }" @submit.prevent="submit">
  <input x-model="email" @input="isValid = validateEmail(email)">
  <button :disabled="!isValid">Submit</button>
</form>

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360