# forms-inputs-checkout

Скилл для проектирования и разбора форм, валидации и чекаута: помогает агенту убрать лишние поля и не сломать доступность.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 524 установки · ★ 23
- Автор: hueyexe
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/hueyexe/frontend-agent-skills/tree/HEAD/forms-inputs-checkout/SKILL.md
- Обновлён: 2026-08-02
- HTML: https://affpapa.org/nevibecode/skills/forms-inputs-checkout

## Что делает

Скилл включается, когда вы просите агента спроектировать, раскритиковать или реализовать форму: регистрацию, оплату, оформление заказа, подписку, опрос, загрузку файлов. Он же работает с готовыми скриншотами, вайрфреймами и компонентами на HTML, CSS и React.

Внутри — набор принципов и карточек-рекомендаций. Агент начинает с цели пользователя, а не со списка полей в базе, и предлагает убрать, отложить или вывести поле из контекста, прежде чем рисовать новое. Дальше идут советы по подписям над полями, нативным контролам, тексту подсказок, валидации после заполнения поля и честным индикаторам прогресса.

Границы тоже прописаны: общая вёрстка страниц, маркетинговые тексты и бэкенд с платежами, налогами и PCI сюда не входят. Если у вас плотный экспертный интерфейс с массой связанных ответов, скилл сам советует не дробить его на страницы по одному вопросу.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill forms-inputs-checkout -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill forms-inputs-checkout -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill forms-inputs-checkout -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install hueyexe/frontend-agent-skills forms-inputs-checkout
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill forms-inputs-checkout -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/hueyexe/frontend-agent-skills --path forms-inputs-checkout
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add hueyexe/frontend-agent-skills --skill forms-inputs-checkout -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/hueyexe/frontend-agent-skills/tree/HEAD/forms-inputs-checkout/SKILL.md

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

## Примеры запросов агенту
- разбери эту форму оформления заказа и скажи, какие поля можно убрать
- посмотри скриншот регистрации: подписи, ошибки, порядок полей
- перепиши валидацию в этом React-компоненте, чтобы она срабатывала после заполнения поля

## Похожие
- [forms-inputs](https://affpapa.org/nevibecode/skills/forms-inputs.md) — скилл · 507 установок
- [form-design](https://affpapa.org/nevibecode/skills/form-design.md) — скилл · 1900 установок
- [shopify-polaris-checkout-extensions](https://affpapa.org/nevibecode/skills/shopify-shopify-polaris-checkout-extensions.md) — скилл · 9600 установок
- [ecommerce-checkout-optimization](https://affpapa.org/nevibecode/skills/ecommerce-checkout-optimization.md) — скилл · 1200 установок
- [uizze-ui](https://affpapa.org/nevibecode/skills/uizze-ui.md) — скилл · 144000 установок
- [von-restorff-effect](https://affpapa.org/nevibecode/skills/von-restorff-effect.md) — скилл · 1700 установок

Из того же набора: [hueyexe/frontend-agent-skills](https://affpapa.org/nevibecode/by/hueyexe/frontend-agent-skills.md) — 7 карточек

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

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