# forms-inputs

Скилл учит агента анимировать поля ввода, текстовые области и селекты: подсказки по таймингам, состояниям и CSS-переходам для понятной обратной связи.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 507 установок · ★ 124
- Автор: dylantarre
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/07-by-ui-element/forms-inputs/SKILL.md
- Обновлён: 2025-12-30
- HTML: https://affpapa.org/nevibecode/skills/forms-inputs

## Что делает

Скилл раскладывает анимацию форм по двенадцати принципам Disney и показывает, как каждый из них работает на конкретном элементе. Поле может чуть подрасти при фокусе, кнопка сжаться при клике, чекбокс отскочить при переключении. Плавающий лейбл поднимается до ввода текста, а рамка фокуса появляется раньше содержимого — так человек понимает, куда попадёт ввод.

Внутри — тайминги для каждого перехода: рамка фокуса 100–150ms, подъём лейбла 150–200ms, отклик валидации 200ms, тряска ошибки 300ms в 3–4 цикла, галочка успеха 250ms. Для фокуса советует `ease-out`, для валидации `ease-in-out`, для лейбла `cubic-bezier(0.4, 0, 0.2, 1)`. Есть готовый CSS: переходы на `border-color` и `box-shadow`, сдвиг лейбла через `translateY(-24px) scale(0.85)` и `@keyframes shake` с отклонением на 5px.

Скилл задаёт состояния полей — default, focus, filled, valid, invalid, disabled — и требует плавных переходов между ними. Если в проекте уже есть своя система анимаций с другими кривыми и длительностями, значения из скилла придётся согласовывать с ней, иначе формы будут выбиваться из общего ритма интерфейса.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill forms-inputs -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/forms-inputs/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/forms-inputs/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill forms-inputs -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/forms-inputs/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill forms-inputs -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/forms-inputs/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dylantarre/animation-principles forms-inputs
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/forms-inputs/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill forms-inputs -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/dylantarre/animation-principles --path skills/07-by-ui-element/forms-inputs
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/forms-inputs/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add dylantarre/animation-principles --skill forms-inputs -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/dylantarre/animation-principles/tree/HEAD/skills/07-by-ui-element/forms-inputs/SKILL.md

## Когда брать
- сделать понятную обратную связь при фокусе на поле
- показать ошибку ввода так, чтобы её заметили
- подобрать тайминги для плавающего лейбла и рамки
- согласовать состояния поля от пустого до невалидного
- добавить отклик на переключение чекбокса и отправку формы

## Примеры запросов агенту
- анимируй поле ввода и плавающий лейбл по скиллу forms-inputs
- добавь тряску при ошибке валидации и зелёный пульс при успехе
- распиши тайминги для focus, filled и invalid состояний формы

## Похожие
- [forms-inputs-checkout](https://affpapa.org/nevibecode/skills/forms-inputs-checkout.md) — скилл · 524 установки
- [angular-forms](https://affpapa.org/nevibecode/skills/angular-forms.md) — скилл · 7100 установок
- [netlify-forms](https://affpapa.org/nevibecode/skills/netlify-forms.md) — скилл · 3100 установок
- [reference-signal-forms](https://affpapa.org/nevibecode/skills/reference-signal-forms.md) — скилл · 969 установок
- [inertia-rails-forms](https://affpapa.org/nevibecode/skills/inertia-rails-forms.md) — скилл · 486 установок
- [emil-design-eng](https://affpapa.org/nevibecode/skills/emil-design-eng.md) — скилл · 388200 установок

Из того же набора: [dylantarre/animation-principles](https://affpapa.org/nevibecode/by/dylantarre/animation-principles.md) — 86 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md