genjutsu

Установка

npx skillfoxx add skills/genjutsu

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a claude-code -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a cursor -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a github-copilot -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a codex -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a gemini-cli -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a cline -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a roo -y

npx skills add athevon/genjutsu --skill genjutsu:cast genjutsu:paint motion-principles mobile-principles desktop-principles design-audit ui-ux-pro-max gsap framer-motion css-native threejs-r3f canvas-generative compose-motion compose-graphics compose-multiplatform swiftui-motion swiftui-graphics -a opencode -y

/plugin marketplace add AThevon/genjutsu
/plugin install genjutsu

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл ставит в агента набор скиллов по анимации и дизайну интерфейсов и общий маршрутизатор. Перед тем как писать код, он предлагает тезис взаимодействия, который вы утверждаете. Дальше он применяет паттерны движения, микровзаимодействий и визуальных систем и умеет работать с несколькими платформами: веб на GSAP, Motion, Three.js и нативном CSS, Android на Jetpack Compose и Compose Multiplatform, Apple на SwiftUI. Базовые справочники вроде принципов движения и аудита дизайна подключаются к каждому вызову, а под конкретный стек добавляются нужные скиллы. Данные о версиях API вынесены отдельно и датированы, чтобы не опираться на устаревшие сведения.

Для кого. Для фронтенд, Android и Apple разработчиков, которым нужен вкус в движении и деталях интерфейса.

Пример запроса к агенту

Сделай, чтобы карточки тарифов ощущались физично при наведении

Ограничения

Скилл дает знания и паттерны, но не заменяет сборку и тесты проекта. Часть скиллов зависит от версий SDK и браузеров, данные датированы и со временем требуют перепроверки. В Claude.ai для загрузки подскиллов нужен план с включенным выполнением кода. Ключей и платных внешних сервисов не требует.

Как отключить. Удалите плагин genjutsu через /plugin или, если ставили на claude.ai, отключите загруженный скилл.

Проверка безопасности

• Скилл состоит из справочников и паттернов, код проекта пишете и запускаете вы сами

Коротко о README

README описывает genjutsu как набор скиллов креативного кода для Claude Code, claude.ai и Cowork, который превращает функциональный интерфейс в выразительный через движение, паттерны взаимодействия и визуальные системы. Покрыты веб на React, Vue, Svelte, чистом CSS, Three.js и Canvas, Android на Jetpack Compose и Compose Multiplatform, Apple на SwiftUI. Перед написанием кода скилл предлагает тезис взаимодействия для утверждения. Раньше проект назывался creative-excellence, команды переименованы в cast и paint. Ставится как плагин Claude Code или загрузкой zip на claude.ai. Лицензия MIT.

SKILL.md

---
name: motion-principles
description: "Motion design foundation - timing, easing, enter/exit patterns, accessibility, performance."
---

# Motion Principles

> The foundation. Loaded by every creative skill invocation.
> Concise rules here. Deep-dive in `references/`.

## Timing Rules

| Context | Duration | Why |
|---|---|---|
| Micro-interaction (toggle, hover, focus) | 100-150ms | Instant feedback, no perceived delay |
| UI transition (modal, drawer, tab switch) | 200-300ms | Smooth but never sluggish |
| Page/route transition | 300-500ms | Establishes spatial narrative |
| Scroll-driven / 3D | Free (progress-based) | Tied to user input, no fixed duration |

**Frequency rule:** The more often an animation plays, the shorter and subtler it must be.

Похожие