{
  "markdown": "<picture>\n  <source media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/Aboudjem/ui-ux-suite/main/.github/assets/hero-dark.svg\">\n  <source media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/Aboudjem/ui-ux-suite/main/.github/assets/hero-light.svg\">\n  <img alt=\"ui-ux-suite\" src=\"https://raw.githubusercontent.com/Aboudjem/ui-ux-suite/main/.github/assets/hero-light.svg\" width=\"100%\">\n</picture>\n\n<p align=\"center\">\n  <a href=\"https://github.com/Aboudjem/ui-ux-suite/actions/workflows/ci.yml\"><img src=\"https://github.com/Aboudjem/ui-ux-suite/actions/workflows/ci.yml/badge.svg\" alt=\"CI\"></a>\n  <a href=\"https://www.npmjs.com/package/ui-ux-suite\"><img src=\"https://img.shields.io/npm/v/ui-ux-suite?color=00D4FF&logo=npm&label=npm&style=flat-square\" alt=\"npm version\"></a>\n  <a href=\"LICENSE\"><img src=\"https://img.shields.io/badge/license-MIT-00D4FF?style=flat-square\" alt=\"License MIT\"></a>\n  <a href=\"https://github.com/Aboudjem/ui-ux-suite/stargazers\"><img src=\"https://img.shields.io/github/stars/Aboudjem/ui-ux-suite?style=flat-square&color=00D4FF\" alt=\"Stars\"></a>\n</p>\n\n<p align=\"center\"><b>English</b> · <a href=\"READMEs/zh-CN.md\">简体中文</a> · <a href=\"READMEs/ja.md\">日本語</a> · <a href=\"READMEs/es.md\">Español</a> · <a href=\"READMEs/fr.md\">Français</a></p>\n\n<p align=\"center\"><b>ESLint for design. It finds the exact line, the measured wrong value, and the exact fix.</b></p>\n\n<p align=\"center\">\n  <a href=\"#what-it-does\">What it does</a> · <a href=\"#install\">Install</a> · <a href=\"#use-it\">Use it</a> · <a href=\"#what-you-get\">What you get</a> · <a href=\"#works-in-your-editor\">Works in your editor</a> · <a href=\"#good-to-know\">Good to know</a>\n</p>\n\n```bash\nclaude plugin marketplace add Aboudjem/10x\nclaude plugin install ui-ux-suite@10x\n```\n\n## What it does\n\nMost design review tells you to improve your contrast. This tells you that `.hero-subtitle` on\nline 14 of `src/styles.css` is `#fbfbfb` on `#ffffff`, which measures 1.03 to 1, and that\n`#767676` would pass. Same shape as a linter error, applied to design.\n\nIt reads your CSS, JSX, HTML and Tailwind classes. By default nothing is executed, nothing\nleaves your machine, and no key is ever needed. Findings come in two kinds. A located finding,\nwhich is most of what you act on, carries three things:\n\n- **Located.** The file, the line and the selector.\n- **Measured.** The real wrong value, not an adjective.\n- **Fixed.** The exact `before` to `after` change, plus the WCAG criterion or named UX law it rests on.\n\nThe rest are project-level, like \"5 font families, use 1 or 2\". They score and they name the\nproblem, but there is no single line to point at.\n\n## Install\n\n```bash\nclaude plugin marketplace add Aboudjem/10x\nclaude plugin install ui-ux-suite@10x\n```\n\nThat is Claude Code. For any other agent that reads the Agent Skills format, install the 14\nskills straight from this repo:\n\n```bash\nnpx skills add Aboudjem/ui-ux-suite\n```\n\nThe command-line tool needs no install step: `npx ui-ux-suite .` runs it.\n\n<details>\n<summary><b>Or add it as a dev dependency</b></summary>\n\n```bash\nnpm install -D ui-ux-suite\n```\n\n```json\n{ \"scripts\": { \"design-audit\": \"ui-ux-suite . --fail-under 7\" } }\n```\n\nRequires Node 18 or newer. Zero runtime dependencies, so this pulls nothing else.\n</details>\n\n## Use it\n\n**1. Point it at a project.**\n\n```bash\nnpx ui-ux-suite .\n```\n\nYou get a ranked list of findings and a weighted score out of 10 across 12 dimensions. No\nconfig file, no setup step.\n\n**2. Read a finding.** This is real output from the broken fixture shipped in this repo, which\nscores 3.7 out of 10 because it is supposed to:\n\n```\n- **Where:** `src/styles.css:14` · selector `.hero-subtitle`\n- **Measured:** 1.03:1 (APCA Lc 0) (needs 4.5:1)\n- **Why:** Text `#fbfbfb` on `#ffffff` measures 1.03:1 (APCA Lc 0). WCAG 2.2 §1.4.3 requires ≥ 4.5:1 for normal text.\n- **Fix:** Change `color` on `.hero-subtitle` from `#fbfbfb` to `#767676` (meets 4.5:1 on `#ffffff`), or darken further.\n- **Cites:** WCAG 1.4.3 Contrast (Minimum) (AA)\n```\n\nRun it yourself with `npx ui-ux-suite test/fixtures/planted-ux-problems` from a checkout.\n\n**3. Put it in CI.** Pick the output and the gate that fit your pipeline:\n\n```bash\nnpx ui-ux-suite . --json | jq              # machine-readable, banner goes to stderr\nnpx ui-ux-suite . --html report.html       # standalone HTML report\nnpx ui-ux-suite . --sarif ui-ux.sarif      # SARIF 2.1.0 for GitHub code scanning\nnpx ui-ux-suite . --fail-under 7           # exit 1 when the score drops below 7\nnpx ui-ux-suite . --write-baseline .uiux-baseline.json   # freeze today's debt\nnpx ui-ux-suite . --baseline .uiux-baseline.json --fail-on-regression\nnpx ui-ux-suite . --tags dimension:accessibility --exclude-tags severity:nice-to-have\n```\n\nEvery flag is in [docs/cli.md](docs/cli.md).\n\n## What you get\n\n- **A ranked report** in Markdown, JSON, HTML or SARIF, whichever the reader is a machine or a person.\n- **A score out of 10** across 12 weighted dimensions, with accessibility carrying the most weight.\n- **A CI gate**, either an absolute bar with `--fail-under` or a baseline that fails on a new finding or a score drop.\n- **14 skills and 16 tools** your agent can call, so \"audit this project's design\" works in chat.\n\n<picture>\n  <source media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/Aboudjem/ui-ux-suite/main/.github/assets/scorecard-dark.svg\">\n  <source media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/Aboudjem/ui-ux-suite/main/.github/assets/scorecard-light.svg\">\n  <img alt=\"Scorecard: an overall score, per-dimension scores, and located findings\" src=\"https://raw.githubusercontent.com/Aboudjem/ui-ux-suite/main/.github/assets/scorecard-light.svg\" width=\"100%\">\n</picture>\n\n## Works in your editor\n\n| Agent | One-line install |\n|:--|:--|\n| Claude Code | `claude plugin install ui-ux-suite@10x` |\n| Any of 70+ agents | `npx skills add Aboudjem/ui-ux-suite` |\n| Codex, Gemini CLI, OpenCode, Pi | `./install.sh <agent>` |\n| VS Code and GitHub Copilot | `./install.sh copilot` |\n| Everything else | see [docs/editors.md](docs/editors.md) |\n\nWorks in Claude Code, Cursor, Codex, Copilot, Gemini CLI, and 70+ other agents through\n`npx skills add`. The skills are Markdown, so they run on whatever model your editor points at.\n\n<details>\n<summary><b>Add it as an MCP server instead</b></summary>\n\n```bash\nclaude mcp add ui-ux-suite -- npx -y ui-ux-suite --mcp\ncodex mcp add ui-ux-suite -- npx -y ui-ux-suite --mcp\n```\n\nCursor, VS Code, Gemini CLI, Windsurf, Continue, OpenCode and Zed take the same command as a\nconfig entry, in JSON, TOML or YAML depending on the editor. The per-editor snippets, including\nthe three that key it differently, are in [docs/editors.md](docs/editors.md).\n</details>\n\n## Good to know\n\n> [!IMPORTANT]\n> It audits, it never edits. It never modifies a source file in the project you point it at, and\n> a fix is printed as `before` to `after` for you to apply. The only files it writes are report\n> and baseline files, and only where you asked for one.\n\n- **Nothing leaves your machine.** Pure Node built-ins, no API key, no telemetry. The static audit makes no network call, and deep mode only visits the URL you hand it.\n- **Static source is the default.** Deep mode is opt-in, needs `playwright-core` plus `@axe-core/playwright`, and degrades to source findings when they are absent.\n- **The numbers are gated.** `npm test` runs 356 tests, and the shipped broken fixture must keep producing findings that carry a file, a line and a fix.\n\n## Learn more\n\n- [docs/cli.md](docs/cli.md), every flag, exit code and recipe\n- [docs/editors.md](docs/editors.md), install and MCP config per editor\n- [docs/scoring.md](docs/scoring.md), the 12 weights and how the score is built\n- [docs/science.md](docs/science.md), the WCAG criteria and UX laws behind the findings\n- [docs/faq.md](docs/faq.md) and [docs/comparison.md](docs/comparison.md)\n- [CHANGELOG.md](CHANGELOG.md), [CONTRIBUTING.md](CONTRIBUTING.md), [LICENSE](LICENSE)\n\n---\n\n<p align=\"center\"><sub>MIT · Built by <a href=\"https://github.com/Aboudjem\">Adam Boudjemaa</a></sub></p>\n",
  "bytes": 8175,
  "sha": "f3475029cca3fdea9a7fe51909c52e7cf0671be260e7179130f61b4482d29d35",
  "repo_slug": "aboudjem/ui-ux-suite",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_aboudjem_ui_ux_suite_88673d3b/readme"
}