home / skills / oimiragieo / agent-studio / alpine-js-usage-rules

alpine-js-usage-rules skill

safe

/.claude/skills/_archive/dead/alpine-js-usage-rules

This skill helps you enforce declarative Alpine.js usage, optimize component structure, and improve maintainability by applying best practices for x-data,

npx playbooks add skill oimiragieo/agent-studio --skill alpine-js-usage-rules

Review the files below or copy the command above to add this skill to your agents.

Files (3)

SKILL.md

1.7 KB

---
name: alpine-js-usage-rules
description: Guidelines for using Alpine.js for declarative JavaScript functionality.
version: 1.0.0
model: sonnet
invoked_by: both
user_invocable: true
tools: [Read, Write, Edit]
globs: /resources/views/**/*.blade.php
best_practices:
  - Follow the guidelines consistently
  - Apply rules during code review
  - Use as reference when writing new code
error_handling: graceful
streaming: supported
---

# Alpine Js Usage Rules Skill

<identity>
You are a coding standards expert specializing in alpine js usage rules.
You help developers write better code by applying established guidelines and best practices.
</identity>

<capabilities>
- Review code for guideline compliance
- Suggest improvements based on best practices
- Explain why certain patterns are preferred
- Help refactor code to meet standards
</capabilities>

<instructions>
When reviewing or writing code, apply these guidelines:

- Use Alpine.js directives (x-data, x-bind, x-on, etc.) for declarative JavaScript functionality.
- Implement small, focused Alpine.js components for specific UI interactions.
- Combine Alpine.js with Livewire for enhanced interactivity when necessary.
- Keep Alpine.js logic close to the HTML it manipulates, preferably inline.
  </instructions>

<examples>
Example usage:
```
User: "Review this code for alpine js usage rules compliance"
Agent: [Analyzes code against guidelines and provides specific feedback]
```
</examples>

## Memory Protocol (MANDATORY)

**Before starting:**

```bash
cat .claude/context/memory/learnings.md
```

**After completing:** Record any new patterns or exceptions discovered.

> ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

Overview

This skill provides concise guidelines for using Alpine.js to implement declarative JavaScript behavior in HTML. It focuses on small, focused components, placing logic near the markup, and integrating with Livewire when appropriate. The guidance helps teams keep Alpine code readable, maintainable, and predictable.

How this skill works

The skill inspects code for proper use of Alpine.js directives (x-data, x-bind, x-on, x-ref, x-show, x-model, etc.) and checks that behaviors are implemented as small, single-responsibility components. It flags anti-patterns such as bloated inline handlers, scattered global state, and mixing heavy imperative scripts where a declarative approach is better. It also recommends when to pair Alpine with Livewire for server-driven interactivity.

When to use it

For UI interactions that can be expressed declaratively and are local to a piece of DOM.
When you need lightweight reactivity without a full frontend framework.
To add focused behaviors like toggles, dropdowns, tabs, modal visibility, and form field interactivity.
When combining with Livewire to handle server-side state while keeping client-side UX responsive.
In projects where keeping logic near the markup improves developer speed and clarity.

Best practices

Create small x-data components dedicated to one responsibility rather than one large root object.
Keep most Alpine logic inline or adjacent to the markup it controls for easier reasoning and maintenance.
Prefer declarative directives over complex imperative event handlers; use methods on the component when needed.
Use x-ref to access DOM elements sparingly and only when necessary; avoid leaking DOM manipulation into many components.
When state must persist or be shared, integrate with Livewire or a minimal shared store instead of scattering globals.

Example use cases

A dropdown menu implemented with x-data for open state and x-on:click to toggle visibility.
Form input validation and conditional UI hints using x-model and computed-style getters inside a small component.
A modal component that manages focus trap and open/close behavior locally with x-show and x-on:keydown.escape.
Enhancing a Livewire form with Alpine for immediate client-side feedback and smoother UX between server updates.
Small dashboard widgets that fetch no data themselves but manage UI state, animations, and local interactions.

FAQ

Should I always keep Alpine logic inline?

Keep logic close to the markup for clarity, but move complex or reusable logic into named methods or separate modules when it improves testability and reuse.

When is Livewire a better choice?

Use Livewire when interactions require server-side state, validation, or persistence. Combine with Alpine for client-side responsiveness around those server interactions.