unslop

Overview

unslop is a skill for Claude Code and Codex that turns vibecoded, AI-looking UI into a designed interface with its own character. It finds common slop patterns such as purple gradients, glows, emoji labels, shouty copy, and uneven spacing, then sets a direction from the product and fixes the screen pass by pass like a designer doing a redline review. It works across Next.js, React, Vue, Svelte, Tailwind, and plain HTML and CSS, on dashboards, apps, landing pages, and live sites when only a link is available.

Key Features

• Audit lists every sign of slop with where it lives.
• Direction derives character, world, color moments, and a signature detail from the product.
• Passes adjust spacing, color, icons, copy, type, layout, details, visuals, and motion in order.
• Works with Next.js, React, Vue, Svelte, Tailwind, or plain HTML and CSS, and handles dashboards, apps, landing pages, and live sites via a link.
• Can generate visuals through image services when a hero needs a scene or object, showing the prompt and asking before every paid generation.
• Story video creates a square video under 10 seconds of the screen unslopping itself, requiring Playwright and ffmpeg.

Use Cases

• Redesign a vibecoded dashboard so it reads as a designed product rather than an AI template.
• Give the hero of a live website a product-specific visual direction and targeted fixes.
• Improve a landing page and produce a short story video of the transformation for posting.
• Audit an existing screen and receive small refinements if it is already good rather than a full redesign.

Getting Started

• For Claude Code, clone the repository and copy skills/unslop into ~/.claude/skills/ or into .claude/skills/ for a single project.
• For Codex, install the skill from the repository or copy it into ~/.agents/skills/ or .agents/skills/ inside a single project.
• Invoke it in Claude Code with /unslop or in Codex with $unslop, or ask in your own words so the agent picks it up.
• To snapshot a live site or create a story video, install Playwright and Chromium from the project directory: npm install -D playwright and npx playwright install chromium.

Deployment & Requirements

• Playwright and its Chromium browser are required to snapshot a live site or create a story video.
• Story videos also require ffmpeg installed and available on PATH.

Before You Adopt

• License: CC-BY-4.0. Review its terms before using, modifying, or distributing the project.
• Story video generation depends on ffmpeg being installed and available on PATH.
• Live-site snapshots and story videos require Playwright and its Chromium browser.
• Paid image generation is guarded by showing the prompt and asking before each paid generation.