ClaudeMap

unslop

A Claude skill that turns vibecoded, AI-looking UI into a designed interface — it finds the slop first, sets a direction from your product, then fixes the screen pass by pass.

Skills & Commandsskilluidesignfrontend
Visit projectheydamir/unslop

unslop is a Claude skill that takes a screen that works but looks generated and makes it look designed. The audit lists every sign of slop with where it lives — purple gradients, glows, emoji labels, shouty copy, uneven spacing — then it sets a direction from your product: character, world, the one or two moments that carry the color, and a signature detail. From there it fixes the screen pass by pass like a designer doing a redline review — spacing, color, icons, copy, type, layout, details, visuals and motion, in that order — proposing the direction before it edits anything, and telling you when a screen is already good. It works on whatever the screen is built with — Next.js, React, Vue, Svelte, Tailwind or plain HTML and CSS — on dashboards, apps and landing pages, and even on a live site when all you have is a link. When a hero needs a scene or an object, it can generate one through an image service like fal, Replicate, OpenAI images or Higgsfield, showing the prompt and asking before every paid generation. It can also cut a story video: a square clip under 10 seconds of your screen unslopping itself, ready to post. CC BY 4.0, by Damir Sokolovsky, who started the Unslopping series on X.

What it does

  • Audit-first discipline — it lists every sign of slop with where it lives and proposes a direction before it edits anything; if the screen is already good it says so and suggests small refinements instead of redesigning
  • A direction taken from your product, not a template — character, world, the one or two moments that carry the color, and a signature detail
  • Passes in a fixed order — spacing, color, icons, copy, type, layout, details, visuals and motion — like a designer doing a redline review
  • Image generation stays pay-gated — hero scenes route through an image service like fal, Replicate, OpenAI images or Higgsfield, connected as an MCP server, with the prompt shown and a question before every paid generation; dashboards and apps rarely need one
  • Story video built in — a square clip under 10 seconds of the screen unslopping itself, rendered with Playwright and ffmpeg, ready to post

When to use it

You vibecoded a dashboard or landing page, it works, and it looks like every other AI-generated screen — run /unslop on it before shipping. It also takes a live site by link when all you have is a URL, on any stack from plain HTML to Next.js. If the screen is already good, expect small refinements, not a redesign.

Getting started

git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/

# single project: copy it into .claude/skills/ inside that project instead

Type /unslop with what you want, or ask in your own words. The story video needs Playwright and ffmpeg; image generation routes through an image service (fal, Replicate, OpenAI images, Higgsfield) connected as an MCP server — none is required for dashboards and apps.

Things to know

The license is CC BY 4.0, not MIT — commercial use is fine, but you must credit Damir Sokolovsky and link back to the repository. The skill edits your real code pass by pass, so work on a branch and read the diffs. The README also pitches the author's paid unslop-as-a-service (one key screen in 3 days) — the skill itself is free. Created 2026-10-29: very new, expect the workflow to keep moving.

Repository

heydamir/unslop

Charted

Related on the map

  • SureForge

    Skill

    An instruction-only skill that makes agents research before they ask, plan before they build, and verify before they call anything done.

    • workflow
    • verification
    • quality
    • skill
    View

  • guizang-product-video-skill

    Skill

    Guizang's agent skill turns your repo's recent updates into a finished promo video — real components, code-rendered animation, an original code-written soundtrack — no video editor involved.

    • agent-skill
    • video
    • promo
    • marketing
    View

  • geo-sleuth

    Skill

    An agent skill that geolocates a photo with nothing readable in it — OSM geometry, elevation skylines and satellite tiles turn “where was this taken?” into a measured answer with an error radius.

    • agent-skill
    • geolocation
    • osint
    • openstreetmap
    View