скилл

web-design-guidelines · davila7 — скилл для Claude Code: проверка UI и установка

Q: Как установить web-design-guidelines в Claude Code?

Выполните `npx claude-code-templates@latest --skill creative-design/web-design-guidelines`. Затем добавьте скилл командой `npx skills add davila7/claude-code-templates --skill web-design-guidelines -a claude-code`. Файл скилла находится по пути `~/.claude/skills/web-design-guidelines/SKILL.md`.

Q: Что нужно для проверки UI?

Скилл получает свежие правила через WebFetch с `https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md`. Ему нужно указать файл или шаблон путей; если их нет, он попросит выбрать файлы.

Скилл проверяет файлы интерфейса по актуальным правилам Web Interface Guidelines и выдаёт замечания с указанием файла и строки. Пригодится для аудита UI и доступности.

Установить в Claude Code · Через claude-code-templates Все способы и платформы ↓

npx claude-code-templates@latest --skill creative-design/web-design-guidelines

Открыть на GitHub

Что делает web-design-guidelines

Перед каждой проверкой скилл получает свежие правила Web Interface Guidelines через WebFetch, затем читает указанные файлы и сверяет их с правилами. В отчёте он указывает файл и строку для каждого замечания. Если файлы не заданы, сначала попросит выбрать их.

Для работы нужен доступ к WebFetch и источник правил https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md. Это значит, что без получения актуальных правил проверка не пройдёт по описанному процессу. Аргументом можно передать файл или шаблон путей.

Какие задачи решает

проверить UI-код по правилам интерфейсов
найти замечания по доступности в файлах
провести аудит UX и дизайна сайта
получить замечания с привязкой к строкам кода

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

Проверь доступность интерфейса в src/components/Button.tsx.
Проведи аудит дизайна файлов src/pages/*.tsx.
Сверь UI-код с правилами Web Interface Guidelines.

Как установить web-design-guidelines

1Через claude-code-templates

npx claude-code-templates@latest --skill creative-design/web-design-guidelines

2Через Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill web-design-guidelines -a claude-code

3Вручную: положить файлы

~/.claude/skills/web-design-guidelines/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/web-design-guidelines/

Вручную: положить файлы

.agents/skills/web-design-guidelines/SKILL.md

Для всех проектов — ~/.agents/skills/

Вручную: положить файлы

.cursor/skills/web-design-guidelines/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates web-design-guidelines

2Вручную: положить файлы

.github/skills/web-design-guidelines/SKILL.md

Командой платформы

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/web-design-guidelines

Вручную: положить файлы

.devin/skills/web-design-guidelines/SKILL.md

Старый путь .windsurf/skills/ тоже читается

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о web-design-guidelines

Как установить web-design-guidelines в Claude Code?

Выполните npx claude-code-templates@latest --skill creative-design/web-design-guidelines. Затем добавьте скилл командой npx skills add davila7/claude-code-templates --skill web-design-guidelines -a claude-code. Файл скилла находится по пути ~/.claude/skills/web-design-guidelines/SKILL.md.

Что делает web-design-guidelines?

Скилл сверяет указанные файлы UI с актуальными правилами Web Interface Guidelines и выдаёт замечания в формате с файлом и строкой.

Что нужно для проверки UI?

Скилл получает свежие правила через WebFetch с https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md. Ему нужно указать файл или шаблон путей; если их нет, он попросит выбрать файлы.

Похожие скиллы

Всё по теме «Фронтенд и UI» →

Сначала — web-design-guidelines от других авторов.

web-design-guidelines vercel Проверяет код интерфейса на соответствие стандартам Vercel: вёрстку, типографику, цвета, анимации и доступность. Пригодится перед релизом компонентов. CX Codex +1 3 900установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора205

Весь набор →

writing-clearly-and-concisely Скилл для Claude, который заставляет агента писать прозу по правилам Странка и не скатываться в шаблонные обороты языковых моделей. 206установок kaizen Скилл задаёт агенту привычку улучшать код мелкими шагами и ловить ошибки на этапе типов, а не в рантайме. 117установок backend-architect Субагент для проектирования бэкенда: границы сервисов, выбор API-парадигмы, схемы БД и наблюдаемость. Полезен, когда решение нужно принять до первой строки кода. 23 691установок seo-optimizer Помогает готовить метатеги, разметку Schema.org и планы статей под поисковые системы прямо в кодовой базе проекта. 11 415установок ultra-think Запускает многошаговый разбор задачи: вскрывает скрытые допущения, предлагает конкурирующие варианты и проверяет каждый на прочность. Пригодится, когда решение дорогое и не хочется ошибиться. 8 383установок clean-code Задаёт агенту правила чистого кода: короткие функции, понятные имена, никаких очевидных комментариев и лишних абстракций. Пригодится, когда агент пишет рабочий код, а не учебник. 7 176установок git-commit-helper Разбирает проиндексированные изменения и предлагает текст коммита в формате conventional commits. Пригодится, когда лень придумывать сообщение самому. 7 093установок documentation-expert Субагент создаёт, обновляет и поддерживает документацию проекта, включая README, API-описания и руководства. Пригодится для работы с документацией из кода. 6 992установок