# heydamir/unslop

> unslop is a Claude Code skill for turning vibecoded, AI-looking user interfaces into designed ones with their own character. It first audits the screen for generic signs of slop such as purple gradients, glows, emoji labels, shouty copy and uneven spacing. It then sets a direction taken from the product itself and applies an ordered set of polish passes. It works with JavaScript-based stacks such as Next.js, React, Vue, Svelte and Tailwind, as well as plain HTML and CSS.

Source: https://github.com/heydamir/unslop
Indexed: commit 97daa3e on 2026-11-10 by Repowise. Facts come from the source and git history, not from the maintainer.

## Facts

- Type: Agent skill
- Language: JavaScript
- Stars: 15,882 at index time
- License: CC-BY-4.0
- Code health: 8.9/10, Excellent
- Last commit: 2026-11-08
- Contributors: 6

## Install

From the README: https://github.com/heydamir/unslop#install

Claude Code:

Clone the unslop repository.
    git clone https://github.com/heydamir/unslop.git

Copy the skill folder into your Claude Code skills folder after cloning the repository.
    mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

Install Playwright in the project directory where you run the skill, for live site snapshots and story videos.
    npm install -D playwright

Install the Chromium browser for Playwright.
    npx playwright install chromium

Codex:

Clone the unslop repository.
    git clone https://github.com/heydamir/unslop.git

Copy the skill into your Codex skills folder.
    mkdir -p ~/.agents/skills && cp -r unslop/skills/unslop ~/.agents/skills/

Install Playwright in the project directory where you run the skill, for live site snapshots and story videos.
    npm install -D playwright

Install the Chromium browser for Playwright.
    npx playwright install chromium

## How to use

In Claude Code, ask for the change you want on a screen.
    /unslop this dashboard

## How it works

You copy the skills/unslop folder into your Claude Code skills folder, then type /unslop with what you want changed, or ask in plain language and Claude picks the skill up. The SKILL.md file in that folder holds the instructions the agent follows for the audit, direction, and passes. The scripts folder contains story.mjs, which produces the square story video of the screen being unslopped when Playwright and ffmpeg are available. unslop returns a revised interface and a list of where each sign of slop was found.

- README.md: central file
- examples/dashboard.html: central file
- examples/hero.html: central file
- skills/unslop/SKILL.md: central file
- skills/unslop/agents/openai.yaml: central file
Modules: skills, test. 14 files, 828 lines, 75 symbols.

## Code health

- Score: 8.9/10 (Excellent)
- Trend: 9.0 on 2026-10-31, 8.9 on 2026-11-02, 8.9 on 2026-11-10
- Rank: not ranked (leaderboards need 100+ files)
- Hotspots: skills/unslop/scripts/story.mjs
- Lowest file: skills/unslop/scripts/snapshot.mjs
- Dead code: none found

## Maintenance

- Last commit 2026-11-08, first commit 2026-10-28, 18 commits
- 6 contributors, bus factor 2

## Security

- Security findings are shown to signed-in users at https://repowise.dev/repo/heydamir/unslop/security

## More

- Page: https://repowise.dev/repo/heydamir/unslop
- Ask this codebase: https://repowise.dev/repo/heydamir/unslop/chat
- Docs: https://repowise.dev/repo/heydamir/unslop/docs
- MCP (signs in with Repowise on first use):
    claude mcp add --transport http repowise https://api.repowise.dev/mcp/heydamir/unslop