Deslopify

Audits and refactors vibe-coded UIs by replacing each slop element with modern 21st.dev components or equivalents with real visual character — never removes without replacing. Runs a mandatory grill-me style interview (one question at a time, with recommendations) before touching files, including brand identity and design references. Use when the user asks to deslopify, refatorar UI, limpar design, refactor UI, clean design, replace components, or when the code has glassmorphism, purple/blue gradients, decorative orbs, spinners, or empty corporate copy.

5 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add AntonioSpagnol/UI-Deslopify-Skill --skill deslopify

Manual install

git clone --depth 1 https://github.com/AntonioSpagnol/UI-Deslopify-Skill.git /tmp/UI-Deslopify-Skill
mkdir -p ~/.claude/skills
cp -r /tmp/UI-Deslopify-Skill/. ~/.claude/skills/deslopify

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Deslopify

I am Deslopify. I turn vibe-coded interfaces into products with real visual identity and character.

**Golden rule:** I never remove an element without putting something better in its place.
Stripping style without replacement produces dry, lifeless UI — as bad as slop.

**Interaction rule:** Before touching any file, I run the mandatory Phase 0 questionnaire. I ask **one question at a time**, give my recommendation for each, and wait for an answer before continuing. I only execute after the user approves all choices.

---

## Language & locale (bilingual)

Skill instructions are in **English** for accessibility and discovery. This does **not** limit who can use the skill.

- **Respond in the user's language.** If they write in Portuguese (Brazil), ask Phase 0 questions and Phase 2 options in Portuguese. If they write in English, use English.
- **Apply all rules regardless of locale.** Audit Portuguese, English, or mixed copy in the codebase the same way.
- **Banned words (Rule 9)** include both English and Portuguese (Brazil) marketing fluff — see [AUDIT-RULES.md](AUDIT-RULES.md) section C-01.
- **TODO placeholders** in code may use the user's language: `{/* TODO: copy real aqui */}` or `{/* TODO: real copy here */}`.
- **Trigger terms:** recognize Portuguese invocations (`deslopificar`, `refatorar UI`, `limpar design`) and English ones (`deslopify`, `refactor UI`, `clean design`).

---

## Pipeline

Read the full skill on GitHub

Details

Skill name: deslopify
Repository: AntonioSpagnol/UI-Deslopify-Skill
License: MIT
Repo updated: 22 May 2026

FAQ

What does the Deslopify skill do?

How do I install the Deslopify skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add AntonioSpagnol/UI-Deslopify-Skill --skill deslopify. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Deslopify popular?

It lives in AntonioSpagnol/UI-Deslopify-Skill, which has 5 GitHub stars and 0 forks.

Related skills

Figma to Roblox UI

xtrair/figma-to-roblox-ui

Import Figma frames and designs into Roblox Studio GUI (ScreenGui/Frame/ImageLabel): Scale-only layout, centered AnchorPoint, UIStroke ScaledSize, UICorner in Scale, detailed art and custom shapes exported as images. Use for any Figma to Roblox UI transfer.

Frontend & Design

Design Review

humbleteam/design-review

Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants, compares them on shared dimensions and names a winner. Given a screen plus a decision question, answers the question with the screen as evidence instead of returning a critique. Trigger phrases - "review this design", "critique this screen", "what's wrong with this UI", "score this design", "which of these two is better", "did the redesign improve this", "should I use a modal or a drawer". Do not use for

Frontend & Design

Frontend Feature Architecture

Arthurblaya/frontend-feature-architecture

Organize frontend code by feature with explicit ownership and one-way dependencies. Use when adding a frontend feature, deciding file placement, reviewing architecture, or migrating a frontend folder structure across web, mobile, and desktop projects.

Frontend & Design

Design Mapper Skill

bilioveloso/design-mapper-skill

Intelligent design brief router. Takes any design request and emits a structured routing plan — which skills to load, in what order, with what focus parameters. Always load this skill FIRST when receiving a design brief. It is the entry point for the entire modular design system. Trigger on: "design a", "create UI for", "branding for", "what should it look like", "color scheme for", "design brief", "visual identity", "/design", intent=design_brief.

Frontend & Design

HTML Skill Effectiveness

YardonYan/html-skill-effectiveness

Generates self-contained single-file HTML artifacts — visually polished, zero dependencies, openable straight in a browser. Covers 13 layout patterns, a 5-dimension critique system and DevLoop iteration, under 7 enforceable craft rules (anti-ai-slop, color, typography, hierarchy, animation, accessibility, laws-of-ux) plus state-coverage and form-validation contracts. Use when the user asks for a report, comparison, dashboard, slide deck or interactive explainer delivered as one HTML file. NOT for auth, payment, backend logic or real-time database scenarios — refuse and inform the user in those

Frontend & Design

Ascii Shader Tsx

Codeptor/ascii-shader-tsx

Generate animated ASCII art, dithered visuals, and shader-like effects as self-contained React/TSX components. Use when the user wants to create ASCII backgrounds, dithered image/video effects, CRT/retro overlays, matrix rain, noise fields, halftone patterns, particle systems, braille art, terminal aesthetics, or any text/character-based visual effect for the web. Supports both generative (procedural, no input) and source-based (images, video, webcam to ASCII) modes. Also triggers when the user wants to convert an image to ASCII, add a dither effect, create a canvas shader component, build a r

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.