メニュー
This skill should be used when the user asks to "add Alpine.js", "create Alpine component", "use Alpine directives", "build interactive UI with Alpine", or needs guidance on Alpine.js development patterns and best practices.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
This skill should be used when the user asks to "optimize a website for SEO", "improve search engine rankings", "apply SEO best practices", "do on-page SEO", or needs guidance on technical SEO, keyword research, content optimization, or link building strategies.
This skill should be used when the user asks to "integrate GitHub Copilot into an app", "use the Copilot SDK", "build a Copilot-powered agent", "embed Copilot in a service", or needs guidance on the GitHub Copilot SDK for Python, TypeScript, Go, or .NET.
This skill should be used when the user asks to "evaluate an implementation", "run the zen evaluation workflow", "check if the plan was properly implemented", "review implementation against a plan", or needs to assess implementation quality and surface improvement suggestions after a zen build cycle.
This skill should be used when the user asks to "ideate a feature together", "zen ideation", "let's think through this together", "help me shape this idea", "collaborative ideation session", or needs a structured framework for LLM-user co-creation where both parties actively contribute, challenge, and build toward the best possible idea.
This skill should be used when the user asks to "plan a feature", "run the zen planning workflow", "consult all senior agents on a plan", "create a structured plan with agent consultation", or needs a thorough multi-agent planning phase before building anything.
This skill should be used when the user asks to "implement a zen plan", "execute the zen workflow", "run parallel agent implementation", "build from an opencode plan", or needs to execute a written plan from .opencode/plans/ using parallel engineering agents with quality gates.
| name | alpinejs |
| description | This skill should be used when the user asks to "add Alpine.js", "create Alpine component", "use Alpine directives", "build interactive UI with Alpine", or needs guidance on Alpine.js development patterns and best practices. |
| compatibility | opencode |
Build reactive, declarative interfaces by adding Alpine.js directives directly to HTML markup.
Alpine.js is a lightweight JavaScript framework that provides reactive and declarative behavior directly in HTML markup. It offers Vue-like syntax and reactivity without the build step, making it perfect for enhancing static sites or adding interactivity to server-rendered pages.
Key characteristics:
Add the script tag to your HTML <head>:
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
The defer attribute ensures Alpine loads after the HTML is parsed.
npm install alpinejs
Then import and initialize:
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()
Declare reactive state using the x-data directive. All Alpine components start with x-data:
<div x-data="{ count: 0, message: 'Hello' }">
<!-- State is accessible within this element and its children -->
</div>
Key points:
Listen to browser events using x-on: or the @ shorthand:
<button @click="count++">Increment</button>
<button x-on:click="count++">Increment (verbose)</button>
Common event modifiers:
.prevent - Prevent default behavior.stop - Stop event propagation.outside - Trigger when clicking outside element.window - Listen on window object.debounce - Debounce the handlerKey-specific listeners:
<input @keyup.enter="submit()">
<input @keyup.shift.enter="specialSubmit()">
x-text - Set element text content:
<span x-text="message"></span>
x-html - Set element HTML (use only with trusted content):
<div x-html="htmlContent"></div>
x-show - Toggle visibility with CSS display property:
<div x-show="isVisible">Content</div>
x-if - Conditionally add/remove element from DOM:
<template x-if="shouldShow">
<div>Content</div>
</template>
When to use x-show vs x-if:
x-show when toggling frequently (keeps element in DOM)x-if when conditionally rendering expensive contentIterate over arrays to render lists:
<template x-for="item in items" :key="item.id">
<li x-text="item.name"></li>
</template>
Requirements:
<template> element:key for proper trackingDynamically bind HTML attributes using x-bind: or : shorthand:
<img :src="imageUrl" :alt="description">
<button :disabled="isProcessing">Submit</button>
Class binding (special object syntax):
<div :class="{ 'active': isActive, 'error': hasError }">
Style binding:
<div :style="{ color: textColor, fontSize: size + 'px' }">
Bind input values to data properties:
<input x-model="username" type="text">
<textarea x-model="message"></textarea>
<select x-model="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
Modifiers:
.number - Convert to number.debounce - Debounce input.throttle - Throttle input<div x-data="{ open: false }">
<button @click="open = !open">Toggle</button>
<div x-show="open" x-transition>
Content to show/hide
</div>
</div>
<div x-data="{ open: false }">
<button @click="open = !open">Open Dropdown</button>
<div x-show="open" @click.outside="open = false">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
</div>
</div>
<div x-data="{
search: '',
items: ['Apple', 'Banana', 'Cherry'],
get filteredItems() {
return this.items.filter(i =>
i.toLowerCase().includes(this.search.toLowerCase())
)
}
}">
<input x-model="search" placeholder="Search...">
<template x-for="item in filteredItems" :key="item">
<div x-text="item"></div>
</template>
</div>
<div x-data="{
email: '',
get isValid() {
return this.email.includes('@')
}
}">
<input x-model="email" type="email">
<button :disabled="!isValid">Submit</button>
<span x-show="!isValid" class="error">Invalid email</span>
</div>
Add smooth transitions with x-transition:
Simple transition:
<div x-show="open" x-transition>
Content with fade and scale transition
</div>
Custom duration:
<div x-show="open" x-transition.duration.500ms>
Separate in/out durations:
<div
x-show="open"
x-transition:enter.duration.500ms
x-transition:leave.duration.1000ms
>
Transition specific properties:
<div x-show="open" x-transition.opacity>
<div x-show="open" x-transition.scale>
Define reusable component logic with Alpine.data():
Alpine.data('dropdown', () => ({
open: false,
toggle() {
this.open = !this.open
},
close() {
this.open = false
}
}))
Use in HTML:
<div x-data="dropdown">
<button @click="toggle">Toggle</button>
<div x-show="open" @click.outside="close">
Dropdown content
</div>
</div>
Share state across components using Alpine.store():
Alpine.store('auth', {
user: null,
loggedIn: false,
login(user) {
this.user = user
this.loggedIn = true
}
})
Access in templates:
<div x-data>
<span x-show="$store.auth.loggedIn" x-text="$store.auth.user"></span>
<button @click="$store.auth.login('John')">Login</button>
</div>
Alpine provides magic properties accessible anywhere:
$el - Reference to current DOM element$refs - Access elements marked with x-ref$store - Access global stores$watch - Watch for data changes$dispatch - Dispatch custom events$nextTick - Execute after next DOM update$root - Access root element of component$data - Access entire data object$id - Generate unique IDsExample using $refs:
<div x-data>
<input x-ref="emailInput" type="email">
<button @click="$refs.emailInput.focus()">Focus Email</button>
</div>
Keep data objects simple - Start with minimal state and add as needed:
<!-- Good -->
<div x-data="{ open: false }">
<!-- Avoid over-engineering -->
<div x-data="{ state: { ui: { modal: { open: false } } } }">
Use getters for computed values:
{
items: [1, 2, 3],
get total() {
return this.items.reduce((sum, i) => sum + i, 0)
}
}
Prevent FOUC (Flash of Unstyled Content) with x-cloak:
<style>
[x-cloak] { display: none !important; }
</style>
<div x-data x-cloak>
<!-- Content hidden until Alpine initializes -->
</div>
Extract complex logic to Alpine.data():
// Instead of inline in HTML
Alpine.data('complexForm', () => ({
// Complex initialization and methods
}))
Use event modifiers appropriately:
<form @submit.prevent="handleSubmit">
<div @click.outside="close">
x-for requires template element:
<!-- Wrong -->
<div x-for="item in items">
<!-- Correct -->
<template x-for="item in items">
<div x-text="item"></div>
</template>
x-if also requires template:
<template x-if="condition">
<div>Content</div>
</template>
Accessing parent scope - Use this when needed:
{
items: ['a', 'b'],
get filteredItems() {
return this.items.filter(...) // Must use this.items
}
}
Script defer is important:
<!-- Ensures Alpine loads after DOM is ready -->
<script defer src="...alpine.min.js"></script>
| Directive | Purpose | Example |
|---|---|---|
x-data | Define component state | <div x-data="{ count: 0 }"> |
x-text | Set text content | <span x-text="message"> |
x-html | Set HTML content | <div x-html="content"> |
x-show | Toggle visibility | <div x-show="isVisible"> |
x-if | Conditional rendering | <template x-if="show"> |
x-for | Loop over array | <template x-for="item in items"> |
x-on/@ | Listen to events | <button @click="handler"> |
x-bind/: | Bind attributes | <img :src="url"> |
x-model | Two-way binding | <input x-model="value"> |
x-transition | Add transitions | <div x-show="open" x-transition> |
For comprehensive directive documentation and advanced patterns:
references/directives-reference.md - Complete guide to all Alpine directivesreferences/advanced-patterns.md - Advanced component patterns and techniquesOfficial documentation: https://alpinejs.dev