# Alpine

> |

- **Type:** Skill
- **Install:** `agentstack add skill-terminalskills-skills-alpine`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [TerminalSkills](https://agentstack.voostack.com/s/terminalskills)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [TerminalSkills](https://github.com/TerminalSkills)
- **Source:** https://github.com/TerminalSkills/skills/tree/main/skills/alpine
- **Website:** https://terminalskills.io/

## Install

```sh
agentstack add skill-terminalskills-skills-alpine
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Alpine.js

Alpine.js adds reactive behavior directly in HTML markup using `x-` attributes. It's ideal for adding interactivity to server-rendered pages without a build step or SPA framework.

## Installation

```html

```

```javascript
// main.js — npm module setup
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
```

## Core Directives

```html

  
  Toggle
  
    This content can be toggled
  

  
  Count: 
  Increment

  
   5">
    Count is greater than 5!
  

```

## Data Binding

```html

  
  
  Hello, !

  
  
    Colored text
  
  
    Blue
    Red
  

  
  
    Dynamic styles
  

```

## Loops

```html

  
    
      
        
        ×
      
    
  

  
    
    Add
  

```

## Event Handling

```html

  
  Prevent default
  Click once
  

  
  

  
  
    Count: 
  

  
  Dispatch

```

## Component Patterns

```html

  
    Menu
    
  

  
    Profile
    Settings
    Logout
  

```

```html

  
    General
    Security
  

  General settings...
  Security settings...

```

## Reusable Data with Alpine.data

```html

  // Register reusable component
  document.addEventListener('alpine:init', () => {
    Alpine.data('todoList', () => ({
      items: [],
      newItem: '',
      add() {
        if (this.newItem.trim()) {
          this.items.push({ text: this.newItem, done: false });
          this.newItem = '';
        }
      },
      remove(index) {
        this.items.splice(index, 1);
      },
      get remaining() {
        return this.items.filter(i => !i.done).length;
      },
    }));
  });

  
    
    Add
  
  
  
    
      
      
      ×
    
  

```

## Working with htmx

```html

  
    Article Title
    Edit
    Delete
  
  
    
    Save
    Cancel
  

```

## Stores (Global State)

```html

  document.addEventListener('alpine:init', () => {
    Alpine.store('notifications', {
      items: [],
      add(msg) { this.items.push({ text: msg, id: Date.now() }) },
      remove(id) { this.items = this.items.filter(n => n.id !== id) },
    });
  });

Click me

  
    
  

```

## Magic Properties

```html

  
  
  Focus input

  
   $refs.list.scrollTo(0, 99999))">
    Add & scroll
  
  
    
  

  
   console.log('items changed:', val))">

```

## Key Patterns

- Use `x-data` on a parent element to define reactive scope — everything inside shares that state
- Use `x-show` for toggling visibility (CSS), `x-if` for conditional DOM insertion
- Use `x-model` for two-way binding on inputs, selects, checkboxes
- Use event modifiers (`.prevent`, `.stop`, `.debounce`, `.outside`) to reduce boilerplate
- Use `Alpine.data()` to extract reusable components with methods and computed properties
- Use `Alpine.store()` for global state shared across components
- Pairs excellently with htmx: Alpine handles UI state, htmx handles server communication

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [TerminalSkills](https://github.com/TerminalSkills)
- **Source:** [TerminalSkills/skills](https://github.com/TerminalSkills/skills)
- **License:** Apache-2.0
- **Homepage:** https://terminalskills.io/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-terminalskills-skills-alpine
- Seller: https://agentstack.voostack.com/s/terminalskills
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.