AI-Friendly Web Design
ianho7/ai-friendly-web-design-skillClaude Code Skill для разработки веб-интерфейсов, совместимых с AI-агентами и автоматизацией. Покрывает семантический HTML, ARIA-атрибуты, стабильные локаторы, лучшие практики форм и 14 принципов доступности.
Установка
git clone https://github.com/ianho7/ai-friendly-web-design-skill.gitREADME
AI-Friendly Web Design — Claude Code Skill
Claude Code Skill для создания веб-интерфейсов, удобных как для AI-агентов, так и для людей — охватывает семантический HTML, ARIA-атрибуты, стабильные локаторы, лучшие практики форм и многое другое.
Оригинальный пост: @karminski-牙医 · Составил: @ianho7
Что умеет
После активации в Claude Code скилл автоматически применяется, когда вы:
- Создаёте или ревьюите UI-компонент, форму или фронтенд-фичу
- Спрашиваете, как сделать UI «agent-friendly» или «AI-accessible»
- Проверяете существующий код на доступность или совместимость с автоматизацией
- Упоминаете AI-агентов, Playwright, автоматизацию, a11y, aria или семантический HTML
Claude следует чеклисту из 14 принципов и отмечает проблемы при ревью кода с уровнями критичности (🔴 Высокий / 🟡 Средний / 🟢 Низкий).
Установка
Вариант A: npx (рекомендуется)
# Глобальная установка — доступно во всех проектах Claude Code
npx ai-friendly-web-design-skill
# Локальная установка — только для текущего проекта
npx ai-friendly-web-design-skill --local
# Принудительная перезапись существующей установки
npx ai-friendly-web-design-skill --force| Флаг | Путь установки |
|---|---|
| (нет) | ~/.claude/skills/ (глобально, все проекты) |
--local | .claude/skills/ в текущем проекте |
--force | Перезаписать, если уже установлено |
Вариант B: Клонировать напрямую в директорию скиллов
git clone https://github.com/ianho7/ai-friendly-web-design-skill \
~/.claude/skills/ai-friendly-web-designВариант C: Вручную
- Скачайте или клонируйте этот репозиторий
- Скопируйте папку
skills/ai-friendly-web-design/в директорию скиллов Claude Code:- macOS/Linux:
~/.claude/skills/ - Windows:
%USERPROFILE%\.claude\skills\
- macOS/Linux:
Проверка структуры
~/.claude/skills/
└── ai-friendly-web-design/
├── SKILL.md
└── references/
└── guidelines.md
Использование
После установки Claude Code подхватывает скилл автоматически. Также можно настроить slash-команды в проекте для явных сценариев ревью и исправлений.
Добавьте в CLAUDE.md вашего проекта
## AI Accessibility
All frontend development and code reviews must follow the `ai-friendly-web-design` skill.
New interactive components should include `data-testid` and appropriate `aria-*` attributes by default.Опционально: Slash-команды
Создайте .claude/commands/review-ai-accessibility.md в вашем проекте:
Use the ai-friendly-web-design skill to review: $ARGUMENTS
For each issue, output:
- File path + line number
- Which principle is violated
- Before/after code snippet
Sort by severity: 🔴 High (breaks agent operation) / 🟡 Medium / 🟢 Low
End with a summary table.Затем запустите в Claude Code:
/review-ai-accessibility src/components/
/review-ai-accessibility src/components/CheckoutForm.tsx
Состав скилла
| Файл | Назначение |
|---|---|
SKILL.md | Описание триггеров + сжатый чеклист + чеклист для ревью |
references/guidelines.md | Полное обоснование + примеры кода для всех 14 принципов |
Оба файла работают в связке — SKILL.md загружается всегда при срабатывании скилла; guidelines.md загружается по требованию, когда Claude нужен полный контекст.
14 принципов (кратко)
| # | Принцип | Влияние |
|---|---|---|
| 1 | Семантические теги + ARIA-атрибуты | Точность навигации агента |
| 2 | Скрытие декоративных элементов (aria-hidden) | Снижение расхода токенов |
| 3 | Стабильные локаторы data-testid / data-ai-action | Надёжность автоматизации |
| 4 | Нативные элементы форм вместо div-симуляций | Совместимость со стандартным API |
| 5 | Нет действий, скрытых за hover | Обнаруживаемость |
| 6 | Пагинация вместо бесконечной прокрутки | Предсказуемая навигация |
| 7 | Явные состояния загрузки (disabled + текст) | Предотвращение гонки состояний |
| 8 | Избегать iframe / Shadow DOM | Проникновение при извлечении данных |
| 9 | Синхронизация состояния с URL | Глубокие ссылки + воспроизводимость |
| 10 | Сообщения об ошибках в виде простого текста | Самокоррекция агента |
| 11 | Слушать события input/change | Поддержка программного ввода |
| 12 | Завершение критических сценариев на одной странице | Непрерывность контекста |
| 13 | Двойные точки входа: UI + API | Нативная интеграция агентов |
| 14 | Rate limiting вместо ReCAPTCHA | Доступность для агентов |
Лицензия
CC BY 4.0 — можно свободно использовать, адаптировать и распространять с указанием авторства.