Alpinejs expert
The official Ortus AI Skills repo
npx -y skills add Ortus-Solutions/skills --skill alpinejs-expertAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
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.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
2.8 KB, as published. Nobody here has run it
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-experttailwind-expertcode-reviewer