safe-action-forms — скилл для Claude Code: формы и установка
Скилл помогает подключать next-safe-action к React-формам, включая React Hook Form, нативные формы и загрузку файлов.
npx skills add next-safe-action/skills --skill safe-action-forms -a claude-codeЧто делает safe-action-forms
Скилл подсказывает, как связать next-safe-action с несколькими вариантами форм. Он охватывает useAction, useStateAction, адаптер React Hook Form с useHookFormAction и useHookFormOptimisticAction, обработку ошибок полей, bind-аргументы и загрузку файлов.
Для нативной формы можно передать FormData через formAction или собрать данные в обработчике отправки. Адаптер React Hook Form связывает резолвер схемы с регистрацией полей и результатом действия. Для useStateAction серверное действие должно быть создано через .stateAction(), а схема должна уметь разбирать FormData, например через zfd.formData из zod-form-data.
Внутри есть ссылки на материалы по нативной отправке, React Hook Form и загрузке файлов. В проекте с useStateAction без .stateAction() этот подход не заработает.
Какие задачи решает
- подключить next-safe-action к нативной HTML-форме
- показать ошибки валидации у отдельных полей
- связать React Hook Form с серверным действием
- добавить оптимистическое обновление формы
- передать bind-аргументы или загрузить файл
Примеры запросов агенту
- Подключи
next-safe-actionк форме контактов черезuseStateActionи покажи ошибки валидации. - Сделай форму на React Hook Form с
useHookFormAction, схемойzodи выводом ошибок полей. - Разбери загрузку файла через
next-safe-actionи покажи нужный вариант отправки формы.
Как установить safe-action-forms
1Через Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-forms -a claude-code2Вручную: положить файлы
~/.claude/skills/safe-action-forms/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/safe-action-forms/
1Через Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-forms -a codex2Вручную: положить файлы
.agents/skills/safe-action-forms/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-forms -a cursor2Вручную: положить файлы
.cursor/skills/safe-action-forms/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install next-safe-action/skills safe-action-forms2Вручную: положить файлы
.github/skills/safe-action-forms/SKILL.md1Через Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-forms -a gemini-cli2Командой платформы
gemini skills install https://github.com/next-safe-action/skills --path skills/safe-action-formsВручную: положить файлы
.devin/skills/safe-action-forms/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add next-safe-action/skills --skill safe-action-forms -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о safe-action-forms
Как установить safe-action-forms в Claude Code?
Выполните npx skills add next-safe-action/skills --skill safe-action-forms -a claude-code, затем проверьте файл ~/.claude/skills/safe-action-forms/SKILL.md.
Что делает safe-action-forms?
Скилл объясняет интеграцию next-safe-action с нативными формами и React Hook Form, включая ошибки полей, оптимистические обновления, bind-аргументы и файлы.
Что нужно учесть при использовании useStateAction?
Серверное действие должно использовать .stateAction(). Схема входных данных должна разбирать FormData, например через zfd.formData из zod-form-data.
