Alpine.js 개발 가이드

무엇을 해주나

• Alpine.js의 핵심 디렉티브(x-data, x-show, x-for, x-model 등)를 정리해 Claude가 정확한 문법으로 코드를 생성하도록 안내합니다.
• Tailwind CSS, Laravel/Livewire(TALL 스택), Ghost CMS와의 통합 패턴을 제시합니다.
• 성능(작은 x-data, x-show 우선), 코드 구성(Alpine.data(), Alpine.store()), 접근성(ARIA·포커스 관리) 베스트 프랙티스를 규칙으로 제공합니다.

이런 분께 추천

• 무거운 프레임워크 없이 HTML에 약간의 인터랙션만 더하고 싶은 웹 개발자
• Laravel + Livewire + Alpine + Tailwind 조합(TALL)을 쓰는 팀
• Ghost CMS나 서버 렌더링 템플릿에 동적 UI를 붙이는 분

활용 예시

1. "클릭 바깥 영역에서 닫히는 드롭다운 메뉴를 Alpine으로 만들어줘" → @click.away와 x-transition을 쓴 코드 생성
2. "이메일 입력 폼에 실시간 검증과 제출 버튼 비활성화를 붙여줘" → x-model 기반 검증 패턴 적용
3. "Livewire 속성과 Alpine 상태를 양방향으로 묶어줘" → @entangle 패턴 안내

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/Mindrally/skills/HEAD/alpine-js/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 Mindrally/skills 의 alpine-js 폴더를 내 ~/.claude/skills/alpine-js/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.