enforce-design-ci — скилл для Claude Code: дизайн-проверки в PR
Ставит в пул-реквесты проверку дизайна без участия модели: доступность, токены, структура компонентов, адаптивность. Полезен, когда регрессии ловят уже на ревью.
npx skills add memi-design/memi --skill enforce-design-ci -a claude-codeЧто делает enforce-design-ci
Скилл добавляет в репозиторий гейт качества дизайна, который работает без LLM. Memi пишет политику, базовую линию, универсальный агентский скилл, SARIF и отчёт для человека. Проверяются новые регрессии: доступность, дизайн-токены, структура компонентов, адаптивность и состояния интерфейса — с указанием файлов.
Локально прогон выглядит так: memi --profile connected --allow project-write --allow source-content-persistence --allow shell ci . --no-scope --report --json. Ненулевой код возврата означает, что находок больше порога. Это результат проверки, а не падение инструмента. Для GitHub Actions в .github/workflows/design.yml кладут memi-design/memi@v2 с версией 2.7.9.
Рабочий процесс рассчитан на бету 2.8.0-beta.2. Локальный memi должен сообщать ту же версию, иначе рецепты не отработают: проверьте через npx -y @memi-design/[email protected] --version. Инициализация в бете недоступна — нужны уже проверенные политика и базовая линия, а этот скилл не вызывает старые команды настройки. Изменения в проекте просмотрите до коммита.
Какие задачи решает
- поймать регрессию доступности до мержа
- зафиксировать базовую линию дизайн-токенов и не откатываться ниже
- проверить структуру компонентов на соответствие политике
- отследить поломки адаптивной вёрстки в пул-реквесте
- получить SARIF и отчёт о состоянии дизайна в артефактах CI
Примеры запросов агенту
- Прогони дизайн-проверку по проекту и покажи отчёт
- Настрой GitHub Actions для design CI по этому скиллу
- Проверь, что политика и базовая линия закоммичены, и назови порог гейта
Как установить enforce-design-ci
1Через Skills CLI (Vercel)
npx skills add memi-design/memi --skill enforce-design-ci -a claude-code2Вручную: положить файлы
~/.claude/skills/enforce-design-ci/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/enforce-design-ci/
1Через Skills CLI (Vercel)
npx skills add memi-design/memi --skill enforce-design-ci -a codex2Вручную: положить файлы
.agents/skills/enforce-design-ci/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add memi-design/memi --skill enforce-design-ci -a cursor2Вручную: положить файлы
.cursor/skills/enforce-design-ci/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install memi-design/memi enforce-design-ci2Вручную: положить файлы
.github/skills/enforce-design-ci/SKILL.md1Через Skills CLI (Vercel)
npx skills add memi-design/memi --skill enforce-design-ci -a gemini-cli2Командой платформы
gemini skills install https://github.com/memi-design/memi --path skills/enforce-design-ciВручную: положить файлы
.devin/skills/enforce-design-ci/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add memi-design/memi --skill enforce-design-ci -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о enforce-design-ci
Как установить enforce-design-ci в Claude Code?
Выполните npx skills add memi-design/memi --skill enforce-design-ci -a claude-code, файл скилла окажется в ~/.claude/skills/enforce-design-ci/SKILL.md.
Что делает enforce-design-ci?
Добавляет в пул-реквесты детерминированную проверку дизайна без LLM: доступность, дизайн-токены, структуру компонентов, адаптивность и состояния интерфейса. На выходе — SARIF и отчёт с привязкой к файлам.
Какая версия memi нужна для работы скилла?
Рецепты рассчитаны на бету 2.8.0-beta.2, и локальный memi должен показывать ту же версию. Независимая стабильная база совместимости — 2.7.9.
Исходный текст
SKILL.md · MIT
--- name: enforce-design-ci description: Use when a repository needs deterministic pull-request checks for new accessibility, design-token, component-structure, responsive, and UI-state regressions with file-level evidence. --- # Enforce Design CI Add a reviewable design-quality gate that runs without an LLM. Memi writes a policy, baseline, universal agent skill, SARIF, and human-readable report artifacts. This workflow targets published beta **2.8.0-beta.2**. Use `npx -y @memi-design/[email protected] --version` to verify the exact package; a local `memi` must report that same version before these recipes run. The independent stable compatibility baseline is **2.7.9**. See [current release state](https://github.com/memi-design/memi/blob/main/docs/CURRENT_RELEASE.md) and [known limitations](https://github.com/memi-design/memi/blob/main/docs/trust/KNOWN_LIMITATIONS.md). npm availability alone does not establish native-binary success. ## Existing project setup Beta initialization is unavailable. Use an existing reviewed policy and baseline; this skill does not invoke legacy setup commands. Review project changes before committing them. ## Verify Locally ```bash memi --profile connected --allow project-write --allow source-content-persistence --allow shell ci . --no-scope --report --json ``` The command may exit nonzero when findings exceed the configured gate. Treat that as a quality result, not a tool crash. ## Add GitHub Actions Use the pinned major action in `.github/workflows/design.yml`: ```yaml name: Design CI on: [pull_request] jobs: design: runs-on: ubuntu-latest permissions: contents: read security-events: write steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - uses: memi-design/memi@v2 with: version: "2.7.9" ``` ## Completion Criteria - Policy and baseline are reviewed and committed. - Local CI produces SARIF and a design-health report. - The workflow passes on unchanged accepted debt and fails on a seeded regression. - The final handoff names the gate threshold, suppressed baseline count, active findings, and artifact paths.
© memi-design · MIT · memi-design/memi