No Slop UI

Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.

Install

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

npx skills add LeoStehlik/no-slop-ui --skill no-slop-ui

Manual install

git clone --depth 1 https://github.com/LeoStehlik/no-slop-ui.git /tmp/no-slop-ui
mkdir -p ~/.claude/skills
cp -r /tmp/no-slop-ui/. ~/.claude/skills/no-slop-ui

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

From the SKILL.md

# No Slop UI

You are building UI for a human audience. The goal is functional, honest, clean. Not impressive. Not dramatic. **Normal.**

If a design decision feels like the easy AI default — it probably is. Pick the harder, cleaner option.

Read `references/banned-patterns.md` for the full banned list before writing any UI code.
Read `references/colour-palettes.md` when you need to pick colours.

## Activation Boundary

Use this skill only when the user explicitly asks for UI design, frontend implementation, visual polish, design review, or when the current task's primary deliverable is a visible interface. Do not activate it for backend-only tasks, copywriting, diagrams, infrastructure, or general code review.

Treat this skill as a visual-quality layer. It must not override product requirements, accessibility, security, localization, data correctness, or the repository's existing design system. If those conflict with a no-slop rule, preserve the user requirement and explain the tradeoff.

## The Standard

Think **Linear. Raycast. Stripe. GitHub.** They don't try to grab attention. They just work.

**What normal looks like:**
- Sidebar: 240–260px fixed, solid background, 1px border-right. No floating shells, no rounded outer corners.
- Cards: 8–12px radius max, subtle 1px border, shadow max `0 2px 8px rgba(0,0,0,0.08)`. No glow, no float.
- Buttons: solid fill or simple border, 6–10px radius max. No pills, no gradients.

Read the full skill on GitHub

Details

Skill name: no-slop-ui
Repository: LeoStehlik/no-slop-ui
License: MIT
Repo updated: 31 August 2026

FAQ

What does the No Slop UI skill do?

Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.

How do I install the No Slop UI skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add LeoStehlik/no-slop-ui --skill no-slop-ui. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is No Slop UI popular?

It lives in LeoStehlik/no-slop-ui, which has 12 GitHub stars and 0 forks.

Related skills

Replica

Surya17155/Replica

Use when the user uploads a screenshot of a hero section or landing page (or a URL/description of one) and wants a copy-paste-ready developer prompt to recreate it exactly in a tool like Lovable, Bolt, Replit, or Cursor. Produces prompts with exact hex colors, Tailwind classes, animation timing tuples, and component structure — not vague descriptions.

Frontend & Design

Frontend Design Pro

Krishna-Modi12/frontend-design-pro

Production-grade frontend UI/UX skill registry. Auto-routes to the correct skill based on user intent. Use for anything involving what users see and click in a browser — building or fixing React/Next.js components, pages and layouts; visual defects; animation; dashboards; forms; accessibility audits; frontend performance; 3D with Three.js/R3F; design systems and tokens; and tests for any of it. Skip for backend logic, APIs, databases and infrastructure.

Frontend & Design

Replicate Webpage

22duxiaoyu/replicate-webpage-skill

Rebuild a webpage from a user-provided URL with high visual and behavioral fidelity, then customize its text, names, images, colors, or branding. Use when the user asks to “replicate this webpage,” “clone this website,” “复刻这个网页,” recreate a reference site, or reproduce a page’s observable layout, responsive behavior, animations, and interactions in a local codebase.

Frontend & Design

Designbrief

Heiberg-Industries/designbrief

A library of UI design direction files that provide style guardrails for building tasteful, consistent interfaces. Use when building any UI — select a style or let the AI recommend one based on the project context.

Frontend & Design

Openclaw Darkpattern Buster

alphaparkinc/openclaw-darkpattern-buster

Bypasses UI dark patterns, un-checks hidden subscription boxes, and navigates confusing opt-out flows automatically during checkout to protect user intent.

Frontend & Design

UI Styles

chrzamz/ui-styles-skill

Participate before building or changing product UI: websites, apps, demos, dashboards, forms, visual redesigns, component-library selection, themes and interaction states. Act as a practical designer: understand the product, recommend and preview a direction, preserve a project visual standard, and implement it using the existing stack. 支持风格推荐、界面制作、组件库选型、主题 token、自定义风格。Skip backend-only work and nonvisual fixes.

Frontend & Design

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