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.
npx skills add memi-design/memi --skill enforce-design-ci -a claude-codeWhat 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-code2Manually: put the files in place
~/.claude/skills/enforce-design-ci/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/enforce-design-ci/
1Skills CLI (Vercel)
npx skills add memi-design/memi --skill enforce-design-ci -a codex2Manually: put the files in place
.agents/skills/enforce-design-ci/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add memi-design/memi --skill enforce-design-ci -a cursor2Manually: put the files in place
.cursor/skills/enforce-design-ci/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install memi-design/memi enforce-design-ci2Manually: put the files in place
.github/skills/enforce-design-ci/SKILL.md1Skills CLI (Vercel)
npx skills add memi-design/memi --skill enforce-design-ci -a gemini-cli2Platform CLI
gemini skills install https://github.com/memi-design/memi --path skills/enforce-design-ciManually: put the files in place
.devin/skills/enforce-design-ci/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add memi-design/memi --skill enforce-design-ci -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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