Skip to main content
skill CX Codex

enforce-design-ci — Claude Code skill: design checks in every PR

Adds a design-quality gate to pull requests that runs without an LLM: accessibility, tokens, component structure, responsive layout. Catches regressions before review.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add memi-design/memi --skill enforce-design-ci -a claude-code
Open on GitHub

What enforce-design-ci does

The skill wires a design gate into a repository. Memi produces a policy, a baseline, a universal agent skill, SARIF output and a report a human can read. What gets checked is new regressions: accessibility, design tokens, component structure, responsive behaviour and UI states, each tied back to specific files.

Run it locally with memi --profile connected --allow project-write --allow source-content-persistence --allow shell ci . --no-scope --report --json. A nonzero exit means findings crossed the gate. That is a quality result, not a crash. For GitHub Actions, .github/workflows/design.yml uses memi-design/memi@v2 pinned to version 2.7.9.

The workflow targets beta 2.8.0-beta.2. Your local memi has to report that same version or the recipes will not run — check with npx -y @memi-design/[email protected] --version. Beta initialization is unavailable, so you need a policy and baseline that were already reviewed; the skill does not call the legacy setup commands. Look over the project changes before you commit them.

What it helps with

  • catch an accessibility regression before merge
  • lock a design-token baseline so it cannot drift downward
  • check component structure against the policy
  • spot responsive layout breakage in a pull request
  • get SARIF and a design-health report as CI artifacts

Example prompts for the agent

  • Run the design check over the project and show me the report
  • Set up GitHub Actions for design CI using this skill
  • Confirm the policy and baseline are committed and tell me the gate threshold

How to install enforce-design-ci

1Skills CLI (Vercel)

npx skills add memi-design/memi --skill enforce-design-ci -a claude-code

2Manually: put the files in place

~/.claude/skills/enforce-design-ci/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/enforce-design-ci/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about enforce-design-ci

How do I install enforce-design-ci in Claude Code?

Run npx skills add memi-design/memi --skill enforce-design-ci -a claude-code; the skill file lands at ~/.claude/skills/enforce-design-ci/SKILL.md.

What does enforce-design-ci do?

It adds deterministic, LLM-free design checks to pull requests: accessibility, design tokens, component structure, responsive layout and UI states. Output is SARIF plus a report with file-level evidence.

Which memi version does the skill need?

The recipes target beta 2.8.0-beta.2, and your local memi must report the same version. The independent stable compatibility baseline is 2.7.9.

Source text

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

Similar skills

Everything for Design →

From the same set2

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor