Промпт для фронтенд-разработчика

Промпт

Напиши компонент интерфейса по контракту.

Стек и версии: [данные]. Компонент: [назначение].
Входные свойства: [типы]. Состояния: [loading, error, empty, success]. Стиль: [ограничения].

Дай готовый компонент и проверки состояний. Учитывай клавиатуру и семантику. Не меняй общие стили и не добавляй библиотеку ради одной кнопки.

Как пользоваться

1. Подготовьте стек и версии, компонент, входные свойства, состояния.
2. Назовите свойства фронтенд-компонента и их типы.
3. Проверьте SaveButton с клавиатуры и при busy: обработчик не вызывается повторно.
4. Дополни SaveButton проверкой busy и Enter; оставить настоящую кнопку и существующий onSave без CSS-библиотек.

Для каких нейросетей

Справочные данные для фронтенд-разработчика: GPT, Claude, Gemini, Gemini, DeepSeek.

Пример результата

React-компонент кнопки без внешних зависимостей:

export function SaveButton({ busy, onSave }) {
  return (
    <button type="button" disabled={busy} onClick={onSave}
      aria-busy={busy}>
      {busy ? "Сохраняем..." : "Сохранить"}
    </button>
  );
}

Проверки: в обычном состоянии клик вызывает onSave; при busy кнопка отключена и показывает статус; Enter с фокусом активирует обычную кнопку.

Как улучшить результат

• Назовите свойства фронтенд-компонента и их типы.
• Перечислите loading, error, empty и success, если они применимы.
• Добавьте клавиатурный сценарий и семантику кнопки.
• Приложите соседний компонент для согласования стиля проекта.

Варианты промпта

Узкая задача

Напиши только кнопку сохранения React: props busy и onSave, при busy блокировка и текст статуса, без CSS-библиотек.

Корректировка: фронтенд-разработчика

Дополни SaveButton проверкой busy и Enter; оставить настоящую кнопку и существующий onSave без CSS-библиотек.

Частые ошибки

• Реализуют только успешное состояние и забывают блокировку отправки.
• Кликабельный div заменяет кнопку без клавиатурного поведения.
• Новая библиотека добавляется ради одного простого элемента.

Вопросы и ответы