AThevon/genjutsu

Creative coding skills for Claude Code, claude.ai and Cowork. Motion, micro-interactions and design systems across Web (GSAP, Motion, Three.js, CSS), Android (Jetpack Compose) and Apple (SwiftUI). Proposes an interaction thesis you approve before it writes any code. Anti-AI-slop.

genjutsu – Claude용 AI 기반 크리에이티브 코딩 보조 도구

무엇인가요 – genjutsu는 Claude‑AI 플러그인으로, 웹(React/Vue/Svelte), 안드로이드 Compose, 애플 SwiftUI 등 다양한 프론트엔드 스택에서 움직임이 강한 UI 요소를 추가하거나 재설계하는 데 LLM을 활용할 수 있게 해줍니다. 두 가지 고수준 '스킬'을 통해 작동합니다:

스킬	사용 시기	기능
`/genjutsu:cast`	소규모, 독립적인 개선 – 호버 효과, 스크롤 기반 애니메이션, 빠른 버튼 전환.	프로젝트의 종속성 스캔 후, 인터랙션 이론(의도된 움직임에 대한 간단한 설명) 제안, 이후 구체적인 코드(GSAP, Framer Motion, Compose, SwiftUI 등) 생성 및 접근성과 성능에 대한 빠른 감사 수행.
`/genjutsu:paint`	대규모 재설계 – 전체 랜딩 페이지, 완전히 새로운 디자인 시스템, 포트폴리오 사이트.	브레인스토밍 세션부터 시작하여, 완전한 시각적 디자인 시스템(Tailwind/CSS, `Theme.kt`, `Color+App.swift`) 생성, UI 구현 후, 움직임 누락, 색 대비, 반응형, 네이티브 문제 등을 포함한 포괄적인 감사 수행.

두 스킬 모두 몇 가지 승인 게이트(이론, 시각적 정체성, 디자인 시스템)에서 일시 정지되며, 결과를 실시간 미리보기, 아티팩트(예: 일시 경로 또는 @Preview 파일), 또는 인라인 텍스트로 제시할 수 있습니다.

패키지 방식

Claude AI (웹/앱) – 단일 genjutsu.zip 번들 또는 각 스킬/서브스킬용 개별 ZIP 업로드.
Claude Code (CLI) – 플러그인 마켓플레이스에서 추가 (/plugin marketplace add AThevon/genjutsu).
Cowork – 플러그인 패널에서 설치; 동일한 명령어 사용 가능하며, 호스트별 미리보기 처리 지원.

리포지토리에는 package-for-claude-ai.sh라는 작은 빌드 스크립트가 포함되어 있으며, 이는 번들을 생성하고 17개의 개별 스킬 ZIP을 만듭니다.

아키텍처 개요

genjutsu/
├─ .claude-plugin/          # 플러그인 매니페스트 파일
├─ skills/
│   ├─ cast/                # "마법사" 파이프라인 오케스트레이터
│   ├─ paint/               # "마스터 페인터" 파이프라인 오케스트레이터
│   └─ _jutsu/              # 내부 서브스킬 (직접 호출되지 않음)
│       ├─ motion-principles/      # 핵심 타이밍/이징 규칙
│       ├─ mobile-principles/      # 터치 타겟 및 제스처 안내
│       ├─ desktop-principles/     # 호버, 키보드, 멀티윈도우 규칙
│       ├─ design-audit/           # 번들 크기 및 성능 검사
│       ├─ ui-ux-pro-max/          # 디자인 시스템 데이터 (스타일, 팔레트…)
│       ├─ gsap/                  # 웹 애니메이션 라이브러리 지원
│       ├─ framer-motion/          # 대체 웹 애니메이션 라이브러리
│       ├─ css-native/             # CSS만으로 구현하는 애니메이션 (스크롤 기반, 뷰 전환)
│       ├─ threejs-r3f/            # React-Three-Fiber를 통한 WebGL/Three.js
│       ├─ canvas-generative/      # 프로시저 캔버스 그래픽
│       ├─ compose-motion/         # 안드로이드 Compose 애니메이션 API
│       ├─ compose-graphics/       # Compose 그래픽 및 쉐이더
│       ├─ compose-multiplatform/  # KMP/CMP 공유 코드
│       ├─ swiftui-motion/         # SwiftUI 애니메이션 기본 요소
│       └─ swiftui-graphics/       # 애플용 Metal 기반 시각 효과
├─ package-for-claude-ai.sh   # ZIP 번들 빌드
└─ README.md

오케스트레이터(cast 및 paint)는 호스트 환경(Claude AI, Claude Code, Cowork)을 감지하고, 감지된 스택에 맞는 서브스킬만 로드하여 런타임 피드백을 최소화합니다.

시작하기 (빠른 시작)

다운로드 – 릴리스 페이지에서 최신 번들(genjutsu.zip)을 다운로드.
업로드 – Claude AI → 맞춤 설정 > 스킬 > 스킬 업로드 또는 Claude Code 마켓플레이스를 통해 추가 (/plugin marketplace add AThevon/genjutsu).

채팅에서 스킬 호출:

/genjutsu:cast 가격 카드를 마우스 오버 시 물리적인 느낌으로 만들기

또는

/genjutsu:paint 새로운 모션 기반 디자인 시스템으로 랜딩 페이지 재설계

인터랙티브 프롬프트에 따라 진행 – 제안된 인터랙션 이론 승인, 생성된 미리보기 검토, 스킬이 프로젝트 파일에 코드를 쓰도록 허용.

누구에게 적합한가요?

수동으로 라이브러리 문서를 찾지 않고도 AI 지원 모션 디자인을 원하는 프론트엔드 개발자.
일관성 있고 성능 검증된 애니메이션을 원하는 모바일 엔지니어(Compose 또는 SwiftUI).
이미 Claude AI를 코드 생성에 사용 중이며, 전용 "디자인-모션" 보조 도구를 원하는 팀.

기여 및 거버넌스

리포지토리는 지식 기반 플러그인입니다 – 기여는 사실 오류 수정(예: "GSAP의 ScrollTrigger 버전에 대한 이 주장은 오래됨")을 기대합니다.
엄격한 증거 기반 프로세스는 CONTRIBUTING.md 및 PLATFORM-CONTRACT.md에 문서화되어 있습니다.
6개 플랫폼에서 736개의 API 심볼을 유지하는 것은 커뮤니티 주도의 노력이며, 특정 스택(Web, Android, Apple)의 관리 책임을 맡을 수 있습니다.

라이선스

MIT – 자유롭게 사용, 수정, 재배포 가능.

TL;DR – genjutsu는 자연어 디자인 요청을 웹, 안드로이드, 애플 플랫폼용 생산 준비 완료된 모션 코드로 변환하는 Claude‑AI 플러그인으로, 빠른 수정("cast") 작업과 대규모 "paint" 재설계를 모두 제공하며, 모듈식 내부 서브스킬로 구성되어 있습니다.