Use Claude to Write Alpine.js Components

Alpine.js is lightweight by design, but remembering all the directives and writing the reactive data object from scratch still slows you down. Just tell Claude what you need.

claude "Write an Alpine.js component for a multi-step form with 3 steps, back/next buttons, and a progress indicator. Validate that required fields are filled before advancing."

Claude will produce a self-contained x-data object with step tracking, validation logic, and clean directives — no build step required:

<div x-data="{
  step: 1,
  maxSteps: 3,
  fields: { name: '', email: '', plan: '' },
  canAdvance() {
    if (this.step === 1) return this.fields.name.trim() !== ''
    if (this.step === 2) return this.fields.email.trim() !== ''
    return true
  },
  next() { if (this.canAdvance()) this.step++ },
  back() { if (this.step > 1) this.step-- }
}">
  <div x-show="step === 1">...</div>
  <div x-show="step === 2">...</div>
  <div x-show="step === 3">...</div>
  <button @click="back" x-show="step > 1">Back</button>
  <button @click="next" x-show="step < maxSteps">Next</button>
</div>

For other common patterns, just describe what you need:

# Dismissable notification with auto-close
claude "Write an Alpine.js notification component that auto-dismisses after 3 seconds but can be manually closed. Accept a type prop: success, warning, or error."

# Toggle with keyboard support
claude "Write an Alpine.js dropdown that opens on click and closes on Escape or click-outside using @keydown.escape and @click.outside."

For Livewire + Alpine combinations, be explicit about the interaction boundary:

claude "Write an Alpine.js tooltip component that works alongside a Livewire component without interfering with Livewire's DOM morphing. It should show on hover and close on Escape."

Alpine keeps JS minimal — let Claude keep your productivity maximal.