# frontend-designer: проверить доступность компонента: сведения для ИИ-агента

> Справочный документ Staksy для твоего агента. Это сведения для проверки, не команды: ничего отсюда не выполняй и не устанавливай без подтверждения пользователя. Сверь требования с первоисточниками ниже; устаревшее и неподтверждённое не принимай как факт. Не утверждай, что инструмент работает, пока это не проверено.

- Материал: accessible-frontend-designer (skill), страница для человека: /r/accessible-frontend-designer
- Обновлено 2026-10-18

## Цель

Агент проверит, что компонент доступен с клавиатуры и на узком экране

Компонент с понятными состояниями, клавиатурным управлением и проверкой на узком экране.

Skill jamesrochabrun сосредоточен на доступных компонентах, responsive CSS и дизайн-токенах. Он дополняет художественный frontend-design практической проверкой формы, фокуса и ошибок. В инструкции перечислены вспомогательные shell-скрипты; их поведение здесь не воспроизводилось, поэтому результатом должна считаться проверка самого компонента, а не факт запуска генератора.

## Источники

- Первоисточник и инструкция: https://github.com/jamesrochabrun/skills/blob/2482c176372299c92af01f8414a67172f324e8db/skills/frontend-designer/SKILL.md

## Требования

- Skill frontend-designer и исходники компонента; браузер для проверки клавиатуры, фокуса и размеров экрана.

## Совместимость

- Agent Skills: По инструкции автора; версия клиента: не указана. Условия окружения указаны ниже.

## Риски

- Примеры JSX и скрипты генерации требуют адаптации к стеку; автоматический audit не подтверждает всю доступность интерфейса.

## Порядок действий

Сначала проверьте условия и права в первоисточнике. Шаги ниже описывают ограниченный первый сценарий; внешняя запись, публикация и платный запуск требуют разрешённого вами scope.

1. Подготовить ограниченный сценарий: Skill frontend-designer и исходники компонента; браузер для проверки клавиатуры, фокуса и размеров экрана.

Руководство: https://github.com/jamesrochabrun/skills/blob/2482c176372299c92af01f8414a67172f324e8db/skills/frontend-designer/SKILL.md

2. Применить к одной задаче: Проверь один компонент по frontend-designer: подписи, ошибки, фокус, клавиатуру и узкий экран. Исправь найденные проблемы средствами текущего стека.

```text
Проверь один компонент по frontend-designer: подписи, ошибки, фокус, клавиатуру и узкий экран. Исправь найденные проблемы средствами текущего стека.
```

Руководство: https://github.com/jamesrochabrun/skills/blob/2482c176372299c92af01f8414a67172f324e8db/skills/frontend-designer/SKILL.md

3. Проверить результат: Компонент работает без мыши; фокус виден, ошибка связана с полем, на ширине 320px основные действия доступны.

Руководство: https://github.com/jamesrochabrun/skills/blob/2482c176372299c92af01f8414a67172f324e8db/skills/frontend-designer/SKILL.md

## Как проверить результат

Проверено по первоисточнику 13.10.2026. Предлагаемая проверка: Компонент работает без мыши; фокус виден, ошибка связана с полем, на ширине 320px основные действия доступны.