Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Hướng dẫn phát triển Alpine.js

Bộ quy tắc và mẫu code giúp Claude viết giao diện phản ứng nhẹ bằng Alpine.js.

Lập trìnhNhập môn★ 269⑂ 42Điểm AI 6/10Cập nhật lần cuối: 8 thg 10, 2026

Giúp được gì

  • Tổng hợp các directive cốt lõi của Alpine.js (x-data, x-show, x-for, x-model...) để Claude sinh code đúng cú pháp.
  • Nêu mẫu tích hợp với Tailwind CSS, Laravel/Livewire (TALL stack) và Ghost CMS.
  • Đưa ra best practice về hiệu năng, tổ chức code (Alpine.data(), Alpine.store()) và khả năng truy cập (ARIA, quản lý focus).

Phù hợp với ai

  • Lập trình viên web muốn thêm tương tác nhẹ mà không cần framework nặng.
  • Nhóm dùng bộ Laravel + Livewire + Alpine + Tailwind.
  • Người làm site Ghost CMS hoặc template render phía server cần UI động.

Ví dụ sử dụng

  1. "Tạo menu dropdown tự đóng khi click ra ngoài" → code dùng @click.away và x-transition.
  2. "Thêm kiểm tra email realtime và vô hiệu hóa nút gửi" → mẫu validate với x-model.
  3. "Liên kết hai chiều state Alpine với thuộc tính Livewire" → hướng dẫn @entangle.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/Mindrally/skills/HEAD/alpine-js/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục alpine-js từ repo GitHub Mindrally/skills vào ~/.claude/skills/alpine-js/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/Mindrally/skills.git /tmp/mindrally-skills && mkdir -p ~/.claude/skills && cp -r /tmp/mindrally-skills/alpine-js ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở Terminal.
  2. Tải repo: git clone https://github.com/Mindrally/skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Chép skill: cp -r skills/alpine-js ~/.claude/skills/
  5. Khởi động lại Claude Code và thử yêu cầu "viết dropdown bằng Alpine.js" để kiểm tra.
Xem mã nguồn trên GitHub ↗Giấy phép: Apache-2.0