AgentSkillsDir home
Submit
unslop project image
Claude skills

Unslop UI Skill for Coding Agents · heydamir

unslop by Damir Sokolovsky (heydamir/unslop, CC BY 4.0) is a skill for Claude Code and Codex that turns vibecoded, AI-looking UI into a designed interface. It finds the slop first, the purple gradients, glows, emoji labels, shouty copy and uneven spacing, proposes a direction from your product, then fixes the screen pass by pass like a designer’s redline review.

Changing how text reads, or how a screen looks?

TextWriting tools with the same name, such as theclaymethod/unslop or the /unslop command in pstack, rewrite prose. Not this page.
Screenheydamir/unslop edits interface code. This page. Not unslop.site or any other product, and not a hosted rewrite service: AgentSkillsDir does not unslop sites for you.

Install, then type /unslop

  1. Claude Code
    git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/
  2. Codex
    $skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop
  3. Then
    /unslop this dashboard
Codex or one project only?

In Codex the call is $unslop. It audits and proposes a direction before it edits anything. Upstream README steps; AgentSkillsDir has not run them yet.

What it is, and what it is not

unslop works in whatever the screen is built with (Next.js, React, Vue, Svelte, Tailwind or plain HTML and CSS) on dashboards, apps and landing pages, and on a live site when all you have is a link. It keeps the product: features, content and section order stay, and every size, colour, word and image becomes deliberate. Upstream’s goal is a screen that only this product could have, not a cleaner template.

It is not a writing humanizer, not a design system you install as a package, and not a service. This page is a source-linked directory entry.

Install

Commands follow the upstream README at commit 1d13095e4bef (fetched 1 Nov 2026). AgentSkillsDir has not run them yet.

  • Claude Code

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

    Copies the skill folder into ~/.claude/skills/. Then type /unslop.

    Single project: copy into that project instead

    mkdir -p .claude/skills && cp -r unslop/skills/unslop .claude/skills/

  • Codex

    call with $unslop
    $skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop

    Type this inside Codex; it installs from the repo folder. Then type $unslop.

    Or copy it by hand into ~/.agents/skills/ (or .agents/skills/ in one project)

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

The README documents these two assistants only, so this page lists only these two.

Your first /unslop

Type /unslop (Codex: $unslop) with what you want, or ask in your own words and the agent picks the skill up. Point it at a screen in your code, give it a link, or hand it a screenshot (SKILL.md says it rebuilds that as one static HTML file first). The README’s examples:

/unslop this dashboard
/unslop the hero of https://example.com
/unslop my landing page and make the story video so I can post it

Upstream also ships two vibecoded screens to try it on, a dashboard and a hero, in examples/.

How a run goes

  1. AuditLists every sign of slop and where it lives.
  2. DirectionCharacter, world, the one or two moments that carry the color, and a signature detail, all taken from your product. Proposed before any edit.
  3. PassesSpacing, color, icons, copy, type, layout, details, visuals and motion, in that order.
  4. VisualsOptional. Can generate a hero scene through an image service you connect; shows the prompt and asks before every paid generation.
  5. Story videoOptional. A square clip under 10 seconds of the screen unslopping itself. Needs Playwright and ffmpeg.

Upstream says that if the screen is already good, it tells you so and suggests a few small refinements instead of redesigning it.

Slop signs it looks for

A selection from upstream’s signs list, each with the fix it pairs. The full list also covers charts, logos, landing-page heroes, visuals and the “template look” a cleaned-up screen falls back to.

  • Purple-to-blue or violet-to-pink gradients on backgrounds, cards and buttonsOne neutral surface; accent only where it means something
  • Coloured glows and glowing pillsRemoved; depth from surface steps and hairlines
  • Gradient text in headings, numbers or the logoSolid primary text colour
  • Emoji as nav icons, labels or status (🏠 🚀 🔥)One line-icon set, or nothing
  • A sparkle ✨ for anything AI; “New ✨” and “Beta 🚀” badgesRemoved, or one quiet text badge
  • Uppercase labels with wide trackingSentence case at normal tracking
  • Arbitrary spacing like mt-[13px]Steps on the 4px scale
  • Shouty copy: “Welcome back! 👋”, “+12%!!”, “supercharge”Plain statements with a reference: “+12% vs last month”
  • Floating blobs, orbs and glowing lines behind the heroPlain background or one real product visual
  • animate-pulse and breathing glows on things that are not liveStatic

Read the full signs.md upstream

Limits and optional dependencies

  • Live-site snapshots and story videos need Playwright and its Chromium browser, installed in the project where you run the skill:
    npm install -D playwright npx playwright install chromium
  • Story videos also need ffmpeg on your PATH. Each video carries a small “unslop by @heydamir” credit, as the license asks.
  • Hero images go through an image service you connect (upstream names fal, Replicate, OpenAI images and Higgsfield). It shows the prompt and asks before every paid generation. Dashboards and apps rarely need one.
  • These are upstream capabilities. AgentSkillsDir has not reproduced them and hosts no Playwright, ffmpeg or image runtime.

Not the writing unslop

Several tools share the name. theclaymethod/unslop and the /unslop command in pstack rewrite text so it reads less like AI; they are separate projects with separate authors. heydamir/unslop never touches your prose style, only the interface. It is also unrelated to Archify, Graphify or other design-adjacent skills in this directory. To tell them apart, ask: am I changing words, or pixels?

What this page does

  • Tells UI unslop apart from writing tools with the same name
  • Copies the README install for Claude Code or Codex
  • Shows the /unslop and $unslop call forms with upstream examples
  • Lists the slop signs upstream checks, each with its fix
  • Flags optional Playwright, ffmpeg and paid image steps
  • Links the pinned source and its CC BY 4.0 credit rule

AgentSkillsDir has not run unslop on any site, including this one.

Before you install

  • This is third-party code that adds instructions and two Node scripts (snapshot and story) to your assistant. Read SKILL.md and the scripts before you install it.
  • Listing is not a security review. AgentSkillsDir has not reviewed this code.
  • Review its diff like any other change. Upstream keeps features and content, but it edits your files.

FAQ

What is the unslop UI skill?

An open-source agent skill by Damir Sokolovsky (heydamir/unslop, CC BY 4.0) for Claude Code and Codex. It audits a vibecoded screen for AI-looking UI, proposes a direction from your product, then fixes spacing, colour, icons, copy, type, layout, details, visuals and motion pass by pass.

Is this the same as the writing unslop tools?

No. theclaymethod/unslop and the /unslop command in pstack rewrite prose so it reads less like AI. heydamir/unslop changes interface code. Want to change how text reads? Use a writing tool. Want to change how a screen looks? This page.

How do I install unslop for Claude Code?

Per the README: git clone https://github.com/heydamir/unslop, then mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/. For one project, copy into .claude/skills/ instead. Not yet run by AgentSkillsDir.

How do I install it for Codex?

Type $skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop in Codex, or copy skills/unslop into ~/.agents/skills/. Call it with $unslop. Not yet run by AgentSkillsDir.

Does it work in Cursor or other assistants?

The upstream README documents Claude Code and Codex only, so this page lists only those two. Check the repository for changes before trying anything else.

What can I point /unslop at?

The screen in your codebase (Next.js, React, Vue, Svelte, Tailwind or plain HTML and CSS), a live site when all you have is a link, or a screenshot, which SKILL.md says it first rebuilds as one static HTML file. Upstream examples: “/unslop this dashboard” and “/unslop the hero of https://example.com”.

Will it redesign a screen that is already fine?

Upstream says no: it audits first and proposes a direction before editing, and if the screen is already good it says so and suggests a few small refinements instead.

Do I need Playwright, ffmpeg or an image service?

Only for extras. Playwright snapshots a live site and records the story video; the video also needs ffmpeg. Hero images go through an image service you connect, and it asks before every paid generation. AgentSkillsDir has not reproduced these steps and hosts none of them.

What does CC BY 4.0 mean for my project?

You can use, change and share the skill, including commercially, as long as you credit Damir Sokolovsky (@heydamir) and link back to the repository. The story videos carry a small “unslop by @heydamir” credit for the same reason.

Does AgentSkillsDir unslop sites or review the code?

No. This is a source-linked directory entry. AgentSkillsDir does not edit anyone’s interface, has not run the skill, and has not reviewed its code. Listing is not a security review.

Corrections and suggestions

Spotted something out of date, or want to suggest a skill? Email a correction. To suggest a resource, submit it for manual review.