gabelul

Pixelslop — Testing skill for Claude Code

Testing community

Browser-first design quality scanner.

How to install Pixelslop

This entry records only its repository, not the path inside it, so there is no exact command to give. Open gabelul/pixelslop and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Pixelslop does

Browser-first design quality scanner. Opens real pages in Playwright, measures actual pixels, catches AI slop patterns. Fixes them too.

Alternatives in Testing

Playwright — Automate real browser interactions for navigation, forms, and scraping 14.6k ★
Deslop Reborn — One iteration of the IronClaw Reborn de-slop loop — take ONE Reborn crate, fan out parallel review sub-agents 12.6k ★
Test Optimization Patterns — テスト実行速度を改善するためのリファクタリングパターンとベストプラクティス集 974 ★

README

Pixelslop

[![CI](https://github.com/gabelul/pixelslop/actions/workflows/ci.yml/badge.svg)](https://github.com/gabelul/pixelslop/actions/workflows/ci.yml) [![npm version](https://img.shields.io/npm/v/pixelslop.svg)](https://www.npmjs.com/package/pixelslop) [![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE) [![Node](https://img.shields.io/node/v/pixelslop.svg)](https://nodejs.org)

AI coding agents are incredible at generating interfaces. They're also incredible at generating the *same* interface — gradient text on a dark background, glass cards with glow shadows, Inter font everywhere, identical three-column feature grids, and CTAs that technically exist but nobody can actually read because the contrast is 2.3:1.

That's AI slop. It's not broken. It's not ugly. It's just... the same. Every time.

Pixelslop opens your actual pages in a real browser, screenshots them at three viewports, extracts computed styles, measures contrast ratios, checks 25 known AI slop patterns, scores design quality on 5 pillars, evaluates from 8 user personas, and fixes what it finds. It doesn't read your CSS and guess — it renders the page and measures what's actually there.

Install

npx pixelslop install

Install is interactive by default. It detects Claude Code and Codex CLI, lets you pick runtimes and scope, then copies agent specs and verifies a direct Playwright browser runtime.

**Need:** [Claude Code](https://docs.anthropic.com/en/docs/claude-code) or [Codex CLI](https://github.com/openai/codex) installed first.

Update, check health, remove

npx pixelslop@latest update     # upgrade to latest — backs up old files, shows diff
npx pixelslop doctor             # verify installation health
npx pixelslop status             # show scope, install root, and all installed runtimes
npx pixelslop uninstall          # remove everything cleanly