Description
You vibecoded a screen in one go and it came out with purple gradients, glowing cards, emoji labels and shouty copy. It reads as AI at a glance, and you can't quite say what to change. unslop is a skill for Claude built for exactly that.
It doesn't start by editing. It first finds the slop piece by piece and says where each one lives, then sets a direction from your product: character, world, the one or two moments that carry the color, and a signature detail. After that it fixes the screen pass by pass, like a designer doing a redline review.
It works with Next.js, React, Vue, Svelte, Tailwind or plain HTML and CSS, and even on a live site when all you have is a link.
Audit before edit: It lists every sign of slop with its location and proposes a direction for you to steer, instead of rewriting the page behind your back.
Nine ordered passes: Spacing, color, icons, copy, type, layout, details, visuals and motion, one concern at a time so the changes are easy to review.
Your product as the visual: When a hero needs a scene, it can generate one through fal, Replicate or OpenAI images, and it shows the prompt and asks before every paid generation. Dashboards and apps rarely need one.
Honest when it's already good: If the screen holds up, it says so and suggests a few small refinements rather than a redesign.
Story video: A square video under 10 seconds of your screen unslopping itself, ready to post (needs Playwright and ffmpeg).
How to use: Copy the skill folder into ~/.claude/skills, then type /unslop plus the screen you want fixed in Claude Code, or just ask in plain words.
It doesn't start by editing. It first finds the slop piece by piece and says where each one lives, then sets a direction from your product: character, world, the one or two moments that carry the color, and a signature detail. After that it fixes the screen pass by pass, like a designer doing a redline review.
It works with Next.js, React, Vue, Svelte, Tailwind or plain HTML and CSS, and even on a live site when all you have is a link.
Features
Audit before edit: It lists every sign of slop with its location and proposes a direction for you to steer, instead of rewriting the page behind your back.
Nine ordered passes: Spacing, color, icons, copy, type, layout, details, visuals and motion, one concern at a time so the changes are easy to review.
Your product as the visual: When a hero needs a scene, it can generate one through fal, Replicate or OpenAI images, and it shows the prompt and asks before every paid generation. Dashboards and apps rarely need one.
Honest when it's already good: If the screen holds up, it says so and suggests a few small refinements rather than a redesign.
Story video: A square video under 10 seconds of your screen unslopping itself, ready to post (needs Playwright and ffmpeg).
How to use: Copy the skill folder into ~/.claude/skills, then type /unslop plus the screen you want fixed in Claude Code, or just ask in plain words.
