What makes No Slop Ui Clawhub V030 notable?

1.3K downloads. Trust evidence available

How should No Slop Ui Clawhub V030 be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

No Slop Ui Clawhub V030

Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns. Skill: No Slop Ui Clawhub V030 Owner: leostehlik Summary: Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns. Tags: design:0.2.2, frontend:0.2.2, latest:0.3.0, openclaw:0.2.2, ui:0.2.2 Version history: v0.3.0 | 2026-08-31T14:47:10.226Z | user v0.3.0 conversion release: README proof image, conversion proof artifact, agent snippets, stronger review checklist,

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.3k

Updated

Oct 10, 2026

Version

0.3.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.3K downloads reported by the source. Last updated 10/10/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 10, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 10, 2026
Adoption signal: 1.3K downloadsadoption · observed Oct 10, 2026
Latest release: 0.3.0release · observed Aug 31, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s1754kcncc002avbhpwjnqgcr98728et:no-slop-ui

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/snapshot"

Documentation

CLAWHUB

101,357 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: no-slop-ui
description: "Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns."
metadata:
  version: "0.3.0"
---
# 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.
- Typography: clear hierarchy, 14–16px body, system font or single sans-serif. No mixed serif/sans.
- Spacing: 4/8/12/16/24/32px scale. Consistent. No random gaps.
- Borders: 1px solid, subtle colour. No thick decorative borders, no gradient borders.
- Transitions: 100–200ms ease. Opacity or colour only. No bouncy, no transforms.
- Inputs: solid border, simple focus ring. Labels above fields.
- Icons: 16–20px, monochrome or subtle colour, no decorative backgrounds.

## Colour Priority

1. **Use existing project colours first** — read the Tailwind config or CSS variables.
2. If no palette exists — pick from `references/colour-palettes.md`.
3. Never invent random colour combinations.

## Stack-Specific Notes

**shadcn/ui + Tailwind:**
- Use shadcn components as-is — don't re-invent what's already there
- Respect the existing CSS variable system (`--background`, `--foreground`, `--primary` etc.)
- Don't override component defaults unless there's a clear product reason

**Plain HTML dashboards:**
- Single-file is fine — keep it self-contained
- Use CSS custom properties for theming
- No external CDN dependencies unless absolutely necessary

## Hard Rules

- No floating glassmorphism panels
- No gradient backgrounds as decoration
- No oversized rounded corners (20px+ everywhere)
- No eyebrow labels (`<small>SECTION LABEL</small>` above headings)
- No her

examples/README.md

# no-slop-ui Examples

Start here if you want to see the design rule set applied instead of described.

| Example | What it shows |
| --- | --- |
| [`before-after.html`](before-after.html) | Browser-openable compact UI demo: generic AI dashboard habits vs a quieter usable work surface. |
| [`review-checklist.md`](review-checklist.md) | Practical acceptance checklist for rejecting obvious AI UI slop before accepting frontend work. |
| [`../docs/conversion-proof.md`](../docs/conversion-proof.md) | The v0.3 proof artifact: failure notes, checklist verdict, and why the after state converts better. |
| [`../docs/agent-snippets.md`](../docs/agent-snippets.md) | Copy-paste snippets for Codex, Claude Code, OpenClaw, Cursor, custom agents, and PR review. |

Open `before-after.html` in a browser, then use the checklist against generated UI work.

README.md

# no-slop-ui

![Validate](https://github.com/LeoStehlik/no-slop-ui/actions/workflows/validate.yml/badge.svg)

**Stop AI agents shipping generic frontend sludge.**

`no-slop-ui` is a small design guardrail for Codex, Claude Code, OpenClaw, and other coding agents. It gives the agent concrete rules before it builds a visible UI, then gives the reviewer a checklist before the work is accepted.

Use it when an AI coding agent reaches for glass panels, purple gradients, oversized cards, fake dashboards, vague SaaS copy, or hero sections where a real product screen should be.

## Start Here

```bash
git clone https://github.com/LeoStehlik/no-slop-ui.git
cd no-slop-ui
python3 scripts/validate_skill_repo.py
open examples/before-after.html
```

For agent work, paste or reference [`SKILL.md`](SKILL.md), then review the output with [`examples/review-checklist.md`](examples/review-checklist.md).

```text
Read no-slop-ui/SKILL.md before changing this UI. Build the actual product screen first. Avoid decorative gradients, glass panels, nested cards, oversized radius, fake metrics, and vague SaaS copy. After the change, run the no-slop-ui checklist and report any failures before calling it done.
```

## Credibility Artifact

![No Slop UI before/after artifact](assets/no-slop-ui-before-after.svg)

The full proof artifact is in [`docs/conversion-proof.md`](docs/conversion-proof.md). It shows the exact before/after UI failure, the review notes, the checklist verdict, and the concrete changes that move an AI-looking dashboard toward a usable work surface.

## What It Blocks

- Glassmorphism and frosted panels
- Decorative gradient backgrounds, gradient text, and glow
- Huge rounded cards and floating shells
- Hero sections inside internal dashboards
- Fake metric grids that fill space but do not support the task
- Eyebrow labels and vague SaaS filler copy
- Transform, bounce, scale, or spring hover effects
- One-hue purple/blue-dark palettes that read as generic AI output

Full list: [`references/banned-patterns.md`](references/banned-patterns.md).

## Works With

No Slop UI is framework-agnostic. It is a rule set and review surface, not a component library.

| Surface | Use it how |
| --- | --- |
| Codex | Add `SKILL.md` to repo instructions or the task brief before UI work starts. |
| Claude Code | Add the skill rules to project memory or paste the quick prompt from [`docs/agent-snippets.md`](docs/agent-snippets.md). |
| OpenClaw | Install as a workspace skill and invoke it for frontend implementation or review. |
| Cursor / custom agents | Paste the short guardrail prompt and require the checklist verdict in the final response. |

Frontend stacks it fits: React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, plain HTML/CSS dashboards, and internal tools.

## Tiny Agent Snippets

Copy the relevant snippet from [`docs/agent-snippets.md`](docs/agent-snippets.md):

- Codex repo instruction
- Claude Code project instruction
- OpenClaw skill usage
- Cursor/custom-agent pro

_meta.json

{
  "ownerId": "kn7d3r58cdxk8k0xg6jq6k65gs873c0c",
  "slug": "no-slop-ui",
  "version": "0.3.0",
  "publishedAt": 1788187630226
}

references/banned-patterns.md

# Banned UI Patterns

Every item below is what AI-generated UI does by default. Recognise it. Avoid it.

## Layout

| Banned | Use instead |
|--------|-------------|
| Floating detached sidebar with rounded outer shell | Fixed sidebar, solid bg, 1px border-right |
| Hero section inside an internal dashboard | Standard page header, h1 + subtitle only |
| Metric-card grid as default dashboard layout | Content-first layout — metrics only where they belong |
| Right-side rail with "Today" schedule | Only if product explicitly requires it |
| Asymmetric creative layout | Predictable grid/flex |
| Dead space to look expensive | Consistent 24–32px padding |
| Mobile: everything stacked into one long scroll | Proper responsive breakpoints |

## Components

| Banned | Use instead |
|--------|-------------|
| Glassmorphism / frosted panels | Solid background, subtle border |
| Floating cards with dramatic shadows | `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max |
| Pill buttons everywhere | 6–10px border-radius max |
| Gradient button backgrounds | Solid fill or outlined |
| Animated underline inputs / morphing focus | `outline: 2px solid var(--ring)` |
| Fancy floating labels on inputs | Labels above the field, always |
| Dropdown with entrance animation | Simple list, subtle shadow, no animation |
| Modal with slide-in / scale animation | Centered overlay, simple fade |
| Tabs with sliding pill indicator | Underline or border indicator only |
| Zebra stripes on tables (unless data-dense) | Clean rows, subtle hover |
| Status dots via `::before` pseudo-elements | Simple inline badge or icon |

## Typography

| Banned | Use instead |
|--------|-------------|
| Eyebrow label: `<small>TEAM COMMAND</small>` + h2 | Just h1/h2 with proper hierarchy |
| Uppercase + letter-spacing labels everywhere | Reserve for truly categorical labels |
| Gradient text | Solid colour |
| Mixed serif + sans-serif | Single typeface family |
| Decorative copy: "One place to track what matters" | Direct, functional headings only |
| `Segoe UI`, `Trebuchet MS`, `Arial` | System UI or a single clean sans-serif |

## Colour & Visual

| Banned | Use instead |
|--------|-------------|
| Soft corporate gradients as backgrounds | Solid colours from the palette |
| Blue-black gradient "premium dark mode" | True dark: `#0f172a` / `#1e293b` |
| Cyan accents on dark blue | Muted, intentional accent colour |
| Coloured glows on cards or buttons | No glow |
| Conic-gradient donuts as decoration | No decorative gradients |
| Gradient borders | 1px solid subtle border |
| Random colour combinations | Pick from `colour-palettes.md` |

## Motion

| Banned | Use instead |
|--------|-------------|
| `transform: translateX(2px)` on nav hover | Background colour change only |
| Bounce / spring animations | `100–200ms ease` |
| Scale on card hover | Subtle border or shadow change |
| Entrance animations on page load | No animation, or simple opacity fade |

## Specific HTML Patterns — Hard No

```html
<!-

Github ReposUpdated 1d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.