rams — скилл для Claude Code: что делает и как установить
Проверяет компоненты интерфейса на соответствие стандарту WCAG 2.1 и находит дефекты вёрстки. Пригодится при приёмке фронтенд-кода.
npx skills add brianlovin/agent-config --skill rams -a claude-codeЧто делает rams
Скилл анализирует разметку фронтенда и выявляет проблемы доступности и визуального оформления. Он ищет критические ошибки по стандарту WCAG 2.1: кнопки без текстовых меток и клики на обычных тегах div без клавиатурных обработчиков. Если передать путь к файлу аргументом, разбор запустится сразу. Без параметров агент предложит выбрать компонент или просканировать проект целиком.
Отчёт группирует дефекты по степени важности, выводя номера строк и критерии WCAG. Rams сразу предлагает готовые фрагменты кода для исправления и может применить их сам по запросу. В проверку вёрстки входит поиск контраста ниже 4.5:1, размеров элементов меньше 44x44px и сбитых отступов. Это строгий аудит: скилл снизит итоговую оценку из 100 баллов даже за отключённый фокус или пропущенные уровни заголовков.
Какие задачи решает
- найти нарушения доступности по спецификации WCAG 2.1
- исправить интерактивные элементы без текстовых меток
- проверить контрастность цветов и размеры кликабельных зон
- выявить отсутствующие визуальные состояния кнопок и полей
Примеры запросов агенту
- Проверь доступность и вёрстку в src/components/Button.tsx с помощью rams
- Запусти аудит rams для компонентов формы авторизации
- Найди через rams нарушения WCAG и предложи исправления кода
Как установить rams
1Через Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill rams -a claude-code2Вручную: положить файлы
~/.claude/skills/rams/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/rams/
1Через Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill rams -a codex2Вручную: положить файлы
.agents/skills/rams/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill rams -a cursor2Вручную: положить файлы
.cursor/skills/rams/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install brianlovin/agent-config rams2Вручную: положить файлы
.github/skills/rams/SKILL.md1Через Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill rams -a gemini-cli2Командой платформы
gemini skills install https://github.com/brianlovin/agent-config --path skills/ramsВручную: положить файлы
.devin/skills/rams/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add brianlovin/agent-config --skill rams -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора12
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о rams
Как установить rams в Claude Code?
Выполните команду npx skills add brianlovin/agent-config --skill rams -a claude-code. Конфигурация сохранится в файле ~/.claude/skills/rams/SKILL.md.
Что проверяет скилл rams?
Скилл ищет проблемы доступности по правилам WCAG 2.1 и ошибки оформления компонентов. Он отмечает отсутствие альтернативного текста у картинок, клики на несемантичных тегах, слабый контраст и пропущенные состояния элементов.
Может ли rams сам исправить ошибки в коде?
Да, агент умеет применять предложенные правки напрямую к файлу компонента. Достаточно попросить его исправить найденные дефекты после формирования отчёта.
