web-design-guidelines · nexu-io — скилл для Claude Code: что делает и установка
Проверяет код интерфейса на соответствие стандартам Vercel: вёрстку, типографику, цвета, анимации и доступность. Пригодится перед релизом компонентов.
npx skills add nexu-io/open-design --skill web-design-guidelines -a claude-codeЧто делает web-design-guidelines
Скилл сверяет код компонентов с правилами Web Interface Guidelines от команды Vercel. Он анализирует вёрстку, типографику, цвета, анимации и параметры доступности. Нарушения выводятся списком в сжатом формате file:line.
По умолчанию агент берёт зафиксированный слепок правил из references/guidelines.md. При необходимости можно запросить свежую версию из апстрим-репозитория Vercel и сравнить её с локальным файлом.
Если запустить проверку без аргументов, агент запросит конкретный файл или маску путей. Локальный слепок обеспечивает одинаковый результат аудита независимо от сетевого окружения.
Какие задачи решает
- Проверить вёрстку и цветовую гамму компонентов перед релизом
- Найти дефекты доступности в интерфейсном коде
- Сверить свойства анимаций со стандартами Vercel
- Получить список замечаний по интерфейсу в формате
file:line
Примеры запросов агенту
- Проверь компоненты в src/components по правилам web design guidelines
- Сделай аудит доступности и вёрстки для Button.tsx
- Проверь интерфейс в файле modal.tsx по стандартам Vercel
Как установить web-design-guidelines
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-design-guidelines -a claude-code2Вручную: положить файлы
~/.claude/skills/web-design-guidelines/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/web-design-guidelines/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-design-guidelines -a codex2Вручную: положить файлы
.agents/skills/web-design-guidelines/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-design-guidelines -a cursor2Вручную: положить файлы
.cursor/skills/web-design-guidelines/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design web-design-guidelines2Вручную: положить файлы
.github/skills/web-design-guidelines/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-design-guidelines -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/web-design-guidelinesВручную: положить файлы
.devin/skills/web-design-guidelines/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill web-design-guidelines -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о web-design-guidelines
Как установить web-design-guidelines в Claude Code?
Выполните команду npx skills add nexu-io/open-design --skill web-design-guidelines -a claude-code. Либо добавьте файл скилла по пути ~/.claude/skills/web-design-guidelines/SKILL.md.
Что проверяет web-design-guidelines?
Скилл оценивает код интерфейса по правилам Vercel, проверяя разметку, типографику, цвета, анимации и требования к доступности.
Откуда берутся правила проверки?
Основным источником служит зафиксированный локальный файл references/guidelines.md. При необходимости можно запросить актуальные правила напрямую из внешнего репозитория Vercel.
Исходный текст
SKILL.md · MIT
---
name: web-design-guidelines
description: |
Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.
triggers:
- "web design guidelines"
- "vercel design"
- "product ui standards"
- "design checklist"
- "review my UI"
- "check accessibility"
- "audit design"
- "review UX"
- "设计审查"
metadata:
author: vercel
version: "1.0.0"
argument-hint: <file-or-pattern>
od:
mode: design-system
surface: web
platform: desktop
category: design-systems
upstream: "https://github.com/vercel-labs/web-interface-guidelines"
source-commit: 4e799d45c17aec1498c269287a83b9dba22b966b
preview:
type: markdown
example_prompt: |
Review my UI code against the Vercel Web Interface Guidelines — check layout, typography, color, motion, and accessibility compliance.
---
# Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
## How It Works
1. Load the pinned guidelines from [`references/guidelines.md`](references/guidelines.md) — this is the default, reproducible execution path
2. Optionally, fetch the latest guidelines from the upstream URL below and diff against the pinned snapshot to see if anything has changed
3. Read the specified files (or prompt user for files/pattern)
4. Check against all rules in the guidelines
5. Output findings in the terse `file:line` format
## Guidelines Source
**Default (pinned):** The vendored copy at [`references/guidelines.md`](references/guidelines.md) is the default execution path. It is a pinned snapshot of the upstream guidelines and guarantees the skill produces reproducible results in any runtime environment.
**Upstream (live):** For users who want the very latest rules, the live source is available at:
```
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
```
Fetching the live version is optional — the pinned snapshot is always the baseline.
## Usage
When a user provides a file or pattern argument:
1. Load [`references/guidelines.md`](references/guidelines.md) as the default source
2. Optionally fetch the upstream URL to check for updates
3. Read the specified files
4. Apply all rules from the guidelines
5. Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.
© vercel · MIT · nexu-io/open-design
Похожие скиллы
Всё по теме «Дизайн» →Сначала — web-design-guidelines от других авторов.
