AIKraft/AI/Войти
AIKraft/Skills/Safe Action: формы

Safe Action: формы

Use when integrating next-safe-action with forms -- react-hook-form adapter (useHookFormAction, useHookFormOptimisticAction, mapToHookFormErrors), native HTML forms, bind arguments, or file uploads

next-safe-action official Разработка

Что делает навык

Skill обеспечивает интеграцию библиотеки next-safe-action с различными типами форм, предоставляя адаптеры для React Hook Form, нативных HTML-форм и механизмы оптимистичных обновлений. Он решает задачу безопасной обработки действий сервера с корректным управлением состоянием, валидацией и ошибками.

Когда применять

  • Создание простых форм без сложной UI-валидации, где требуется программное управление отправкой.
  • Формы, требующие отслеживания состояния, доступа к предыдущим результатам (prevResult) и использования полных колбэков.
  • Сложные формы с полевой валидацией (field-level errors) и проверкой при изменении или потере фокуса.
  • Реализация оптимистичных обновлений интерфейса (optimistic UI) для мгновенного отклика.
  • Обработка ситуаций, где необходимо очередей и накопление перекрывающихся записей (overlapping writes).

Как работает

  1. Выбрать подходящий подход (useAction, useStateAction, useHookFormAction или useOptimisticStateAction) в зависимости от сложности формы и требований к UI.
  2. Импортировать необходимые хуки из 'next-safe-action/hooks' и серверные действия (actions).
  3. Инициализировать хук (например, useStateAction или useHookFormAction), передав ему серверное действие.
  4. Привязать результат хука к атрибуту action формы или использовать программный вызов.
  5. Обработать ошибки и состояние, используя предоставленные адаптеры (например, mapToHookFormErrors) или доступ к результату.

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

Как использовать useStateAction для формы с отслеживанием состояния и доступом к prevResult?
Настрой интеграцию next-safe-action с React Hook Form для сложной формы с валидацией на blur.
Реализуй оптимистичное обновление UI с помощью useHookFormOptimisticAction.

Что понадобится

  • Установленная библиотека next-safe-action
  • Среда Next.js с поддержкой 'use client'
  • Наличие серверных действий (actions)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «safe-action-forms» из репозитория: # https://github.com/next-safe-action/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r safe-action-forms/ ~/.claude/skills/safe-action-forms/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.