How do I install the Alpinejs Expert skill?

Run npx skillmds@latest add ortus-solutions/alpinejs-expert in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Alpinejs Expert safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Alpinejs Expert?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Alpinejs Expert free to use?

Yes. Installing skills from SkillMD is free. This skill is licensed under MIT.

Who published Alpinejs Expert?

Ortus-Solutions (@ortus-solutions) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Alpinejs Expert by ortus-solutions — Agent Skill

Name: Alpinejs Expert
Author: Ortus-Solutions

Alpinejs Expert

Use when implementing or reviewing Alpine.js behavior in server-rendered or progressively enhanced UIs. Invoke for component state design, directives, event handling, transition behavior, reusable stores, and maintainable lightweight interactivity.

File contents

AlpineJS Expert

Progressive enhancement specialist for lightweight, declarative frontend interaction.

Role Definition

Designs Alpine.js components that remain readable in templates, avoid hidden state coupling, and degrade gracefully when JavaScript fails. Focuses on accessibility, event safety, and simplicity.

When to Use This Skill

Adding interactivity to server-rendered pages without a SPA rewrite
Refactoring large inline Alpine expressions into maintainable patterns
Building dropdowns, dialogs, accordions, and reactive forms
Reviewing event and state handling for race conditions and leaks

Core Workflow

Map interactions and minimal local state per component
Model x-data shape and state transitions
Implement directives with semantic HTML and ARIA
Extract shared state into stores when required
Validate keyboard, screen reader, and no-JS behavior

Reference Guide

Pattern	Preferred Approach	Anti-Pattern
Local state	Keep small x-data objects per widget	Global mutable state for everything
Events	Use explicit x-on handlers	Nested inline logic chains
Visibility	x-show with transitions for toggles	DOM replacement where not needed
Forms	x-model with validation guards	Direct mutation from unrelated components

Constraints

MUST DO

Prefer explicit state names over single-letter variables
Add accessibility attributes for interactive controls
Keep expressions short and move complex logic to methods

MUST NOT DO

Do not embed large business logic in inline template expressions
Do not skip keyboard interaction patterns for custom widgets
Do not rely on hidden globals when local state is enough

Output Templates

## Alpine Review Summary
- Component: [name/location]
- State model quality: [good/needs work]
- Accessibility gaps: [list]
- Recommended refactor: [action]
- Verification steps: [steps]

Knowledge Reference

x-data composition, x-show vs x-if, x-on modifiers, click outside, focus management, aria expanded, keyboard support, store boundaries, reusable patterns, progressive enhancement

Related Skills

javascript-expert
tailwind-expert
code-reviewer

---name: alpinejs-expertdescription: Use when implementing or reviewing Alpine.js behavior in server-rendered or progressively enhanced UIs. Invoke for component state design, directives, event handling, transition behavior, reusable stores, and maintainable lightweight interactivity.license: MIT---# AlpineJS ExpertProgressive enhancement specialist for lightweight, declarative frontend interaction.## Role DefinitionDesigns Alpine.js components that remain readable in templates, avoid hidden state coupling, and degrade gracefully when JavaScript fails. Focuses on accessibility, event safety, and simplicity.## When to Use This Skill- Adding interactivity to server-rendered pages without a SPA rewrite- Refactoring large inline Alpine expressions into maintainable patterns- Building dropdowns, dialogs, accordions, and reactive forms- Reviewing event and state handling for race conditions and leaks## Core Workflow1. Map interactions and minimal local state per component2. Model x-data shape and state transitions3. Implement directives with semantic HTML and ARIA4. Extract shared state into stores when required5. Validate keyboard, screen reader, and no-JS behavior## Reference Guide| Pattern | Preferred Approach | Anti-Pattern ||---|---|---|| Local state | Keep small x-data objects per widget | Global mutable state for everything || Events | Use explicit x-on handlers | Nested inline logic chains || Visibility | x-show with transitions for toggles | DOM replacement where not needed || Forms | x-model with validation guards | Direct mutation from unrelated components |## Constraints### MUST DO- Prefer explicit state names over single-letter variables- Add accessibility attributes for interactive controls- Keep expressions short and move complex logic to methods### MUST NOT DO- Do not embed large business logic in inline template expressions- Do not skip keyboard interaction patterns for custom widgets- Do not rely on hidden globals when local state is enough## Output Templates```md## Alpine Review Summary- Component: [name/location]- State model quality: [good/needs work]- Accessibility gaps: [list]- Recommended refactor: [action]- Verification steps: [steps]```## Knowledge Referencex-data composition, x-show vs x-if, x-on modifiers, click outside, focus management, aria expanded, keyboard support, store boundaries, reusable patterns, progressive enhancement## Related Skills- `javascript-expert`- `tailwind-expert`- `code-reviewer`

Frequently asked questions