{"id":"6c078cbe-d272-41f2-9b48-cc66256141ac","entityType":"agent","slug":"clawhub-leostehlik-no-slop-ui","name":"No Slop Ui Clawhub V030","canonicalUrl":"https://www.xpersona.co/agent/clawhub-leostehlik-no-slop-ui","canonicalPath":"/agent/clawhub-leostehlik-no-slop-ui","generatedAt":"2026-10-10T21:53:44.997Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-10T16:04:00.801Z","emptyReason":null},"description":"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,","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1.3K downloads reported by the source. Last updated 10/10/2026.","installCommand":"clawhub skill install s1754kcncc002avbhpwjnqgcr98728et:no-slop-ui","sourceUrl":"https://clawhub.ai/leostehlik/no-slop-ui","homepage":"https://clawhub.ai/leostehlik/skills/no-slop-ui","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/leostehlik/no-slop-ui","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/leostehlik/skills/no-slop-ui","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":63,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns. Skill: No Slop Ui Clawhub V030 Owner: leostehli"},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-10T16:04:00.801Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T16:04:00.801Z","emptyReason":null},"stars":null,"forks":null,"downloads":1347,"packageName":null,"latestVersion":"0.3.0","tractionLabel":"1.3K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-10T16:04:00.801Z","emptyReason":null},"lastUpdatedAt":"2026-10-10T16:04:00.801Z","lastCrawledAt":"2026-10-10T16:04:00.801Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-11T16:04:00.801Z","lastVerifiedAt":null,"highlights":[{"version":"0.3.0","createdAt":"2026-08-31T14:47:10.226Z","changelog":"v0.3.0 conversion release: README proof image, conversion proof artifact, agent snippets, stronger review checklist, and proof-loop release evidence.","fileCount":14,"zipByteSize":19182},{"version":"0.2.2","createdAt":"2026-08-26T10:32:57.168Z","changelog":"Sync ClawHub package with GitHub docs/discovery polish, current skill metadata, and public maintenance release.","fileCount":11,"zipByteSize":15014},{"version":"0.2.1","createdAt":"2026-05-24T09:59:57.235Z","changelog":"Narrow activation to explicit UI/design/front-end work and document that visual rules are subordinate to accessibility, security, localization, product requirements, and existing design systems.","fileCount":11,"zipByteSize":14804},{"version":"0.2.0","createdAt":"2026-05-22T17:05:01.180Z","changelog":"Shorten trigger metadata, add version metadata, and add a concrete UI review rubric.","fileCount":6,"zipByteSize":7780},{"version":"0.1.0","createdAt":"2026-05-20T23:40:47.628Z","changelog":"Initial public No Slop UI skill.","fileCount":6,"zipByteSize":7649}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s1754kcncc002avbhpwjnqgcr98728et:no-slop-ui","setupComplexity":"low","setupSteps":["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":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-10T21:53:44.994Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-leostehlik-no-slop-ui/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-10T16:04:00.801Z","emptyReason":null},"readme":"Skill: No Slop Ui Clawhub V030\n\nOwner: leostehlik\n\nSummary: Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.\n\nTags: design:0.2.2, frontend:0.2.2, latest:0.3.0, openclaw:0.2.2, ui:0.2.2\n\nVersion history:\n\nv0.3.0 | 2026-08-31T14:47:10.226Z | user\n\nv0.3.0 conversion release: README proof image, conversion proof artifact, agent snippets, stronger review checklist, and proof-loop release evidence.\n\nv0.2.2 | 2026-08-26T10:32:57.168Z | user\n\nSync ClawHub package with GitHub docs/discovery polish, current skill metadata, and public maintenance release.\n\nv0.2.1 | 2026-05-24T09:59:57.235Z | user\n\nNarrow activation to explicit UI/design/front-end work and document that visual rules are subordinate to accessibility, security, localization, product requirements, and existing design systems.\n\nv0.2.0 | 2026-05-22T17:05:01.180Z | user\n\nShorten trigger metadata, add version metadata, and add a concrete UI review rubric.\n\nv0.1.0 | 2026-05-20T23:40:47.628Z | user\n\nInitial public No Slop UI skill.\n\nArchive index:\n\nArchive v0.3.0: 14 files, 19182 bytes\n\nFiles: assets/no-slop-ui-before-after.svg (6305b), docs/agent-snippets.md (1942b), docs/conversion-proof.md (2659b), examples/before-after.html (5108b), examples/README.md (848b), examples/review-checklist.md (2849b), LICENSE (1068b), README.md (6289b), references/banned-patterns.md (3890b), references/colour-palettes.md (1648b), scripts/validate_skill_repo.py (2232b), skill-card.md (2285b), SKILL.md (3597b), _meta.json (129b)\n\nFile v0.3.0:SKILL.md\n\n---\nname: no-slop-ui\ndescription: \"Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.\"\nmetadata:\n  version: \"0.3.0\"\n---\n# No Slop UI\n\nYou are building UI for a human audience. The goal is functional, honest, clean. Not impressive. Not dramatic. **Normal.**\n\nIf a design decision feels like the easy AI default — it probably is. Pick the harder, cleaner option.\n\nRead `references/banned-patterns.md` for the full banned list before writing any UI code.\nRead `references/colour-palettes.md` when you need to pick colours.\n\n\n## Activation Boundary\n\nUse 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.\n\nTreat 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.\n\n## The Standard\n\nThink **Linear. Raycast. Stripe. GitHub.** They don't try to grab attention. They just work.\n\n**What normal looks like:**\n- Sidebar: 240–260px fixed, solid background, 1px border-right. No floating shells, no rounded outer corners.\n- Cards: 8–12px radius max, subtle 1px border, shadow max `0 2px 8px rgba(0,0,0,0.08)`. No glow, no float.\n- Buttons: solid fill or simple border, 6–10px radius max. No pills, no gradients.\n- Typography: clear hierarchy, 14–16px body, system font or single sans-serif. No mixed serif/sans.\n- Spacing: 4/8/12/16/24/32px scale. Consistent. No random gaps.\n- Borders: 1px solid, subtle colour. No thick decorative borders, no gradient borders.\n- Transitions: 100–200ms ease. Opacity or colour only. No bouncy, no transforms.\n- Inputs: solid border, simple focus ring. Labels above fields.\n- Icons: 16–20px, monochrome or subtle colour, no decorative backgrounds.\n\n## Colour Priority\n\n1. **Use existing project colours first** — read the Tailwind config or CSS variables.\n2. If no palette exists — pick from `references/colour-palettes.md`.\n3. Never invent random colour combinations.\n\n## Stack-Specific Notes\n\n**shadcn/ui + Tailwind:**\n- Use shadcn components as-is — don't re-invent what's already there\n- Respect the existing CSS variable system (`--background`, `--foreground`, `--primary` etc.)\n- Don't override component defaults unless there's a clear product reason\n\n**Plain HTML dashboards:**\n- Single-file is fine — keep it self-contained\n- Use CSS custom properties for theming\n- No external CDN dependencies unless absolutely necessary\n\n## Hard Rules\n\n- No floating glassmorphism panels\n- No gradient backgrounds as decoration\n- No oversized rounded corners (20px+ everywhere)\n- No eyebrow labels (`<small>SECTION LABEL</small>` above headings)\n- No hero sections inside internal dashboards\n- No decorative copy (\"Operational clarity without the clutter\")\n- No metric-card grid as the default dashboard layout\n- No fake charts that exist to fill space\n- No transform animations on hover\n- No `Segoe UI`, `Trebuchet MS`, `Arial` font stacks\n- No status dots via `::before` pseudo-elements\n- No nav badges unless they carry real data\n- No pill buttons everywhere\n- No dramatic box shadows (24px+ blur)\n- No mixed alignment (some left-aligned, some floating center)\n\nFull banned list with examples: `references/banned-patterns.md`\n\nFile v0.3.0:examples/README.md\n\n# no-slop-ui Examples\n\nStart here if you want to see the design rule set applied instead of described.\n\n| Example | What it shows |\n| --- | --- |\n| [`before-after.html`](before-after.html) | Browser-openable compact UI demo: generic AI dashboard habits vs a quieter usable work surface. |\n| [`review-checklist.md`](review-checklist.md) | Practical acceptance checklist for rejecting obvious AI UI slop before accepting frontend work. |\n| [`../docs/conversion-proof.md`](../docs/conversion-proof.md) | The v0.3 proof artifact: failure notes, checklist verdict, and why the after state converts better. |\n| [`../docs/agent-snippets.md`](../docs/agent-snippets.md) | Copy-paste snippets for Codex, Claude Code, OpenClaw, Cursor, custom agents, and PR review. |\n\nOpen `before-after.html` in a browser, then use the checklist against generated UI work.\n\nFile v0.3.0:README.md\n\n# no-slop-ui\n\n![Validate](https://github.com/LeoStehlik/no-slop-ui/actions/workflows/validate.yml/badge.svg)\n\n**Stop AI agents shipping generic frontend sludge.**\n\n`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.\n\nUse 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.\n\n## Start Here\n\n```bash\ngit clone https://github.com/LeoStehlik/no-slop-ui.git\ncd no-slop-ui\npython3 scripts/validate_skill_repo.py\nopen examples/before-after.html\n```\n\nFor agent work, paste or reference [`SKILL.md`](SKILL.md), then review the output with [`examples/review-checklist.md`](examples/review-checklist.md).\n\n```text\nRead 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.\n```\n\n## Credibility Artifact\n\n![No Slop UI before/after artifact](assets/no-slop-ui-before-after.svg)\n\nThe 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.\n\n## What It Blocks\n\n- Glassmorphism and frosted panels\n- Decorative gradient backgrounds, gradient text, and glow\n- Huge rounded cards and floating shells\n- Hero sections inside internal dashboards\n- Fake metric grids that fill space but do not support the task\n- Eyebrow labels and vague SaaS filler copy\n- Transform, bounce, scale, or spring hover effects\n- One-hue purple/blue-dark palettes that read as generic AI output\n\nFull list: [`references/banned-patterns.md`](references/banned-patterns.md).\n\n## Works With\n\nNo Slop UI is framework-agnostic. It is a rule set and review surface, not a component library.\n\n| Surface | Use it how |\n| --- | --- |\n| Codex | Add `SKILL.md` to repo instructions or the task brief before UI work starts. |\n| Claude Code | Add the skill rules to project memory or paste the quick prompt from [`docs/agent-snippets.md`](docs/agent-snippets.md). |\n| OpenClaw | Install as a workspace skill and invoke it for frontend implementation or review. |\n| Cursor / custom agents | Paste the short guardrail prompt and require the checklist verdict in the final response. |\n\nFrontend stacks it fits: React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, plain HTML/CSS dashboards, and internal tools.\n\n## Tiny Agent Snippets\n\nCopy the relevant snippet from [`docs/agent-snippets.md`](docs/agent-snippets.md):\n\n- Codex repo instruction\n- Claude Code project instruction\n- OpenClaw skill usage\n- Cursor/custom-agent prompt\n- Pull-request review prompt\n\n## Review Checklist\n\nUse [`examples/review-checklist.md`](examples/review-checklist.md) after an agent generates or edits UI.\n\nA simple rule: if two or more checklist sections fail, revise before calling the UI done.\n\n## Installation\n\n### OpenClaw\n\nClone this repo into a loaded skills directory:\n\n```bash\ngit clone https://github.com/LeoStehlik/no-slop-ui.git /path/to/your/skills/no-slop-ui\n```\n\nThen use it when the task is explicitly about UI design, frontend implementation, visual polish, or design review.\n\n### Codex / Claude Code / other agents\n\nReference the skill directly in your task:\n\n```text\nRead no-slop-ui/SKILL.md before building this interface.\n```\n\nOr paste the focused snippets from [`docs/agent-snippets.md`](docs/agent-snippets.md).\n\n## Repository Map\n\n```text\nno-slop-ui/\n├── SKILL.md                         Core rules and activation boundary\n├── references/\n│   ├── banned-patterns.md           Full banned list with examples\n│   └── colour-palettes.md           Conservative palettes when no system exists\n├── examples/\n│   ├── before-after.html            Browser-openable before/after demo\n│   ├── review-checklist.md          Fast acceptance checklist\n│   └── README.md                    Example index\n├── docs/\n│   ├── agent-snippets.md            Copy-paste setup snippets\n│   └── conversion-proof.md          v0.3 proof artifact and checklist verdict\n├── assets/\n│   └── no-slop-ui-before-after.svg  README proof image\n└── scripts/\n    └── validate_skill_repo.py       Link and metadata validator\n```\n\n## The Standard\n\nThink Linear, Raycast, Stripe, GitHub. They do not try to look clever. They make the work legible.\n\nGood generated UI usually has:\n\n- Stable sidebar or toolbar dimensions\n- Clear type hierarchy with normal product-scale text\n- Solid surfaces, subtle borders, restrained shadows\n- Buttons with 6-10px radius, no gradients, no pills everywhere\n- Tables, forms, menus, filters, and tabs that behave like familiar software\n- Responsive constraints that stop text and controls from overlapping\n- Direct labels and headings that describe the user task\n\n## When To Use Which Repo\n\n| Need | Use |\n| --- | --- |\n| Turn a fuzzy request into an executable agent brief | [Brief Master](https://github.com/LeoStehlik/brief-master) |\n| Prove one coding task is actually done | [Proof Loop](https://github.com/LeoStehlik/proof-loop) |\n| Improve repeated agent behaviour with evals | [Loopsmith](https://github.com/LeoStehlik/loopsmith) |\n| Keep source-backed memory for long-running agents | [Sovereign Brain](https://github.com/LeoStehlik/decoupled-agent-memory) |\n| Stop frontend agents producing generic UI sludge | [no-slop-ui](https://github.com/LeoStehlik/no-slop-ui) |\n\nA practical chain: Brief Master writes the UI task, No Slop UI constrains the visual output, Proof Loop verifies the work, Loopsmith turns repeated failures into evals, and Sovereign Brain keeps the durable lesson.\n\n## Inspiration\n\nInspired by [Uncodixfy](https://github.com/cyxzdev/Uncodixfy) by cyxzdev. Built as our own take: smaller, stricter, and aimed at agent-generated production UI.\n\n## License\n\nMIT - see [LICENSE](LICENSE).\n\nFile v0.3.0:_meta.json\n\n{\n  \"ownerId\": \"kn7d3r58cdxk8k0xg6jq6k65gs873c0c\",\n  \"slug\": \"no-slop-ui\",\n  \"version\": \"0.3.0\",\n  \"publishedAt\": 1788187630226\n}\n\nFile v0.3.0:references/banned-patterns.md\n\n# Banned UI Patterns\n\nEvery item below is what AI-generated UI does by default. Recognise it. Avoid it.\n\n## Layout\n\n| Banned | Use instead |\n|--------|-------------|\n| Floating detached sidebar with rounded outer shell | Fixed sidebar, solid bg, 1px border-right |\n| Hero section inside an internal dashboard | Standard page header, h1 + subtitle only |\n| Metric-card grid as default dashboard layout | Content-first layout — metrics only where they belong |\n| Right-side rail with \"Today\" schedule | Only if product explicitly requires it |\n| Asymmetric creative layout | Predictable grid/flex |\n| Dead space to look expensive | Consistent 24–32px padding |\n| Mobile: everything stacked into one long scroll | Proper responsive breakpoints |\n\n## Components\n\n| Banned | Use instead |\n|--------|-------------|\n| Glassmorphism / frosted panels | Solid background, subtle border |\n| Floating cards with dramatic shadows | `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max |\n| Pill buttons everywhere | 6–10px border-radius max |\n| Gradient button backgrounds | Solid fill or outlined |\n| Animated underline inputs / morphing focus | `outline: 2px solid var(--ring)` |\n| Fancy floating labels on inputs | Labels above the field, always |\n| Dropdown with entrance animation | Simple list, subtle shadow, no animation |\n| Modal with slide-in / scale animation | Centered overlay, simple fade |\n| Tabs with sliding pill indicator | Underline or border indicator only |\n| Zebra stripes on tables (unless data-dense) | Clean rows, subtle hover |\n| Status dots via `::before` pseudo-elements | Simple inline badge or icon |\n\n## Typography\n\n| Banned | Use instead |\n|--------|-------------|\n| Eyebrow label: `<small>TEAM COMMAND</small>` + h2 | Just h1/h2 with proper hierarchy |\n| Uppercase + letter-spacing labels everywhere | Reserve for truly categorical labels |\n| Gradient text | Solid colour |\n| Mixed serif + sans-serif | Single typeface family |\n| Decorative copy: \"One place to track what matters\" | Direct, functional headings only |\n| `Segoe UI`, `Trebuchet MS`, `Arial` | System UI or a single clean sans-serif |\n\n## Colour & Visual\n\n| Banned | Use instead |\n|--------|-------------|\n| Soft corporate gradients as backgrounds | Solid colours from the palette |\n| Blue-black gradient \"premium dark mode\" | True dark: `#0f172a` / `#1e293b` |\n| Cyan accents on dark blue | Muted, intentional accent colour |\n| Coloured glows on cards or buttons | No glow |\n| Conic-gradient donuts as decoration | No decorative gradients |\n| Gradient borders | 1px solid subtle border |\n| Random colour combinations | Pick from `colour-palettes.md` |\n\n## Motion\n\n| Banned | Use instead |\n|--------|-------------|\n| `transform: translateX(2px)` on nav hover | Background colour change only |\n| Bounce / spring animations | `100–200ms ease` |\n| Scale on card hover | Subtle border or shadow change |\n| Entrance animations on page load | No animation, or simple opacity fade |\n\n## Specific HTML Patterns — Hard No\n\n```html\n<!-- BANNED: Eyebrow + headline combo -->\n<div class=\"headline\">\n  <small>Team Command</small>\n  <h2>One place to track what matters today.</h2>\n  <p>The layout stays strict and readable...</p>\n</div>\n\n<!-- BANNED: Small label + strong note -->\n<div class=\"team-note\">\n  <small>Focus</small>\n  <strong>Keep updates brief, blockers visible, and next actions easy to spot.</strong>\n</div>\n\n<!-- BANNED: Nav badge -->\n<span class=\"nav-badge\">Live</span>\n\n<!-- BANNED: Gradient brand block -->\n<div style=\"background: linear-gradient(135deg, #2a2a2a, #171717)\">...</div>\n\n<!-- BANNED: KPI grid as dashboard default -->\n<div class=\"kpi-grid\">\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n</div>\n```\n\n## The Rule\n\n**If it feels like the AI default — it is. Pick the harder, cleaner option.**\n\nWhen in doubt: what would Linear do?\n\nFile v0.3.0:references/colour-palettes.md\n\n# Colour Palettes\n\nUse these when no existing project palette is available.\n**Always check for existing colours first** (Tailwind config, CSS variables, design tokens).\n\n## Dark Palettes\n\n| Name | Background | Surface | Primary | Secondary | Accent | Text |\n|------|-----------|---------|---------|-----------|--------|------|\n| Void Space | `#0d1117` | `#161b22` | `#58a6ff` | `#79c0ff` | `#f78166` | `#c9d1d9` |\n| Slate Noir | `#0f172a` | `#1e293b` | `#38bdf8` | `#818cf8` | `#fb923c` | `#f1f5f9` |\n| Charcoal Studio | `#1c1c1e` | `#2c2c2e` | `#0a84ff` | `#5e5ce6` | `#ff375f` | `#f2f2f7` |\n| Graphite Pro | `#18181b` | `#27272a` | `#a855f7` | `#ec4899` | `#14b8a6` | `#fafafa` |\n| Obsidian Depth | `#0f0f0f` | `#1a1a1a` | `#00d4aa` | `#00a3cc` | `#ff6b9d` | `#f5f5f5` |\n\n## Light Palettes\n\n| Name | Background | Surface | Primary | Secondary | Accent | Text |\n|------|-----------|---------|---------|-----------|--------|------|\n| Cloud Canvas | `#fafafa` | `#ffffff` | `#2563eb` | `#7c3aed` | `#dc2626` | `#0f172a` |\n| Pearl Minimal | `#f8f9fa` | `#ffffff` | `#0066cc` | `#6610f2` | `#ff6b35` | `#212529` |\n| Porcelain Clean | `#f9fafb` | `#ffffff` | `#4f46e5` | `#8b5cf6` | `#ec4899` | `#111827` |\n| Alabaster Pure | `#fcfcfc` | `#ffffff` | `#1d4ed8` | `#2563eb` | `#dc2626` | `#1e293b` |\n| Frost Bright | `#f1f5f9` | `#f8fafc` | `#0f766e` | `#14b8a6` | `#e11d48` | `#0f172a` |\n\n## Usage\n\n- Pick one palette and stick to it for the whole component/page\n- Use `--background`, `--surface`, `--primary` as CSS custom properties\n- Don't mix palettes\n- If building dark + light modes: pick one dark and one light palette that complement each other\n\nFile v0.3.0:docs/agent-snippets.md\n\n# Agent Snippets\n\nCopy the smallest snippet that fits your agent surface.\n\n## Codex Repo Instruction\n\n```text\nUse no-slop-ui for frontend work. Before editing visible UI, read no-slop-ui/SKILL.md. Build the actual product surface first. Avoid glassmorphism, decorative gradients, nested cards, oversized rounded corners, fake metrics, vague SaaS copy, and transform-heavy hover effects. After editing, check examples/review-checklist.md and report any misses before calling the UI done.\n```\n\n## Claude Code Project Instruction\n\n```text\nFor UI tasks, apply no-slop-ui. Prefer quiet product UI: stable layout, restrained radius, subtle borders, clear hierarchy, direct labels, and real workflow density. Do not ship generic AI dashboard styling. Use no-slop-ui/examples/review-checklist.md as the final acceptance pass.\n```\n\n## OpenClaw Skill Usage\n\n```text\n/no-slop-ui\nBuild this visible interface with the repository's existing design system first. Keep the screen practical and scannable. Run the No Slop UI checklist before final response.\n```\n\n## Cursor Or Custom Agent Prompt\n\n```text\nRead no-slop-ui/SKILL.md, then revise this UI. Remove generic AI styling: decorative gradients, glass panels, huge cards, empty metric grids, eyebrow labels, vague copy, and hover transforms. Keep only the UI structure that helps the user complete the task. Return a checklist verdict using examples/review-checklist.md.\n```\n\n## Pull Request Review Prompt\n\n```text\nReview this frontend PR with no-slop-ui. Focus on product fit, layout density, component states, visual restraint, responsive text fit, and generic AI visual patterns. List blockers first. Do not request purely subjective polish unless it affects usability or makes the UI look AI-generated.\n```\n\n## Tiny Brief Clause\n\n```text\nVisual quality gate: no-slop-ui applies. The task is not complete until generated UI passes examples/review-checklist.md or documents a justified exception.\n```\n\nFile v0.3.0:docs/conversion-proof.md\n\n# No Slop UI v0.3 Conversion Proof\n\nThis artifact exists so a stranger arriving from GitHub, Google, or ChatGPT can see the rule set working in under a minute.\n\n## Scenario\n\nAn AI coding agent is asked to build a review queue for an internal operations tool. The user needs to scan items, see status, and run a check.\n\nThe common generated result looks flashy but weak: glass panel, decorative gradient, vague command-center copy, oversized radius, fake metric boxes, and no real workflow density.\n\nThe no-slop-ui result is plainer: fixed navigation, direct page title, ordinary action button, table rows, subtle borders, and no decorative filler.\n\nOpen the browser demo: [`../examples/before-after.html`](../examples/before-after.html)\n\n## Before Verdict\n\n| Checklist Area | Verdict | Evidence |\n| --- | --- | --- |\n| Product fit | FAIL | The generated screen invents metric cards instead of supporting review work. |\n| Layout | FAIL | The UI centers one oversized floating panel instead of a real work surface. |\n| Components | FAIL | Cards and metric boxes are decorative; no table, filters, or task structure. |\n| Visual style | FAIL | Gradient background, frosted panel, large radius, glow/shadow, purple-blue AI palette. |\n| Copy | FAIL | \"Operational clarity\" and \"Command centre\" describe a mood, not a task. |\n| Motion | PASS | The compact demo does not include motion. |\n\nOverall: **REVISE**\n\n## After Verdict\n\n| Checklist Area | Verdict | Evidence |\n| --- | --- | --- |\n| Product fit | PASS | The screen now centers the review queue task. |\n| Layout | PASS | Fixed sidebar, stable content area, table-first workflow. |\n| Components | PASS | Ordinary nav, toolbar, button, and table. |\n| Visual style | PASS | Solid surfaces, subtle borders, restrained radius, no glow or decorative gradient. |\n| Copy | PASS | Labels name the user's task directly. |\n| Motion | PASS | No decorative movement required. |\n\nOverall: **PASS**\n\n## What Changed\n\n- Removed decorative gradient and glass panel.\n- Replaced fake metric cards with a real table.\n- Replaced vague copy with task labels.\n- Reduced radius and shadow strength.\n- Added stable sidebar and toolbar dimensions.\n- Kept the example small enough to inspect quickly.\n\n## Why This Converts Better\n\nPeople arriving from search or ChatGPT need immediate proof. A rule list is useful, but a before/after artifact shows the taste boundary faster: the repo is not selling a style, it is preventing a predictable agent failure.\n\nThe conversion path is now:\n\n1. Land on README.\n2. See the proof image.\n3. Open the live HTML example.\n4. Copy an agent snippet.\n5. Use the checklist before accepting generated UI.\n\nFile v0.3.0:examples/review-checklist.md\n\n# No Slop UI Review Checklist\n\nUse this as a quick proof pass after an agent generates or edits UI.\n\n## Product Fit\n\n- [ ] The first screen is the actual product experience, not a marketing hero unless the task explicitly asked for a landing page.\n- [ ] The layout helps the user's real workflow: scan, compare, edit, decide, or navigate.\n- [ ] The UI does not invent decorative metrics, charts, badges, or activity just to fill space.\n- [ ] The screen would still make sense with real production data, empty states, and long labels.\n\n## Layout\n\n- [ ] Dashboards use dense, scannable structure instead of oversized decorative cards.\n- [ ] Sidebars and toolbars have stable dimensions and do not float inside decorative shells.\n- [ ] Cards are used only for repeated items, modals, or genuinely framed tools.\n- [ ] No card is nested inside another card.\n- [ ] Mobile and desktop views have explicit responsive constraints; text does not overlap or resize the layout awkwardly.\n\n## Components\n\n- [ ] Buttons use familiar icons where appropriate and avoid pill styling by default.\n- [ ] Tables, forms, filters, tabs, and menus use normal product patterns rather than novelty styling.\n- [ ] Inputs have visible labels, ordinary borders, and predictable focus states.\n- [ ] Loading, disabled, active, selected, empty, and error states preserve stable dimensions.\n\n## Visual Style\n\n- [ ] No glassmorphism, decorative gradients, gradient text, glow, or floating background blobs.\n- [ ] Border radius stays restrained: usually 6-10px for controls and 8px or less for cards unless the existing design system says otherwise.\n- [ ] Typography uses clear hierarchy without hero-scale type inside compact UI surfaces.\n- [ ] The palette does not collapse into one hue family or generic dark-blue/purple AI styling.\n- [ ] Shadows are subtle; no large blur shadows, coloured glow, or floating-panel drama.\n\n## Motion\n\n- [ ] Hover states are subtle: color, border, or shadow changes only.\n- [ ] No transform, bounce, spring, scale, slide, or parallax effects unless the product domain truly needs them.\n- [ ] Loading states preserve layout dimensions.\n\n## Copy\n\n- [ ] Headings and labels are functional, not decorative.\n- [ ] No eyebrow-label plus headline pattern.\n- [ ] No vague SaaS filler such as clarity, command center, unlock productivity, seamless, or supercharge unless it is real product language.\n- [ ] Button text names the action and still fits at mobile widths.\n\n## Verdict\n\n- **PASS:** No checklist section has more than one miss, and no hard visual ban is present.\n- **REVISE:** Two or more checks fail, or any hard-ban visual pattern appears.\n- **ESCALATE:** A no-slop rule conflicts with accessibility, product requirements, localization, security, or the existing design system. Preserve the higher-priority requirement and document the tradeoff.\n\nFile v0.3.0:skill-card.md\n\n## Description:\n\nBuild or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[leostehlik](https://clawhub.ai/user/leostehlik)\n\n### License/Terms of Use:\n\nMIT\n\n## Use Case:\n\nDevelopers and teams use this skill as a UI quality guardrail when coding agents build, revise, or review visible frontend interfaces. It helps agents avoid generic AI dashboard patterns and apply a practical checklist before accepting UI work.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill may apply opinionated UI preferences that conflict with an existing design system or product requirement.\n\nMitigation: Review generated UI against the project design system and preserve higher-priority requirements such as accessibility, security, localization, and data correctness.\n\nRisk: The skill can be over-applied to work that is not primarily a visible frontend interface.\n\nMitigation: Use it only for UI design, frontend implementation, visual polish, and UI review tasks; do not treat it as a general coding policy.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/leostehlik/skills/no-slop-ui)\n- [Banned UI Patterns](references/banned-patterns.md)\n- [Colour Palettes](references/colour-palettes.md)\n- [Agent Snippets](docs/agent-snippets.md)\n- [No Slop UI v0.3 Conversion Proof](docs/conversion-proof.md)\n- [No Slop UI Review Checklist](examples/review-checklist.md)\n\n## Skill Output:\n\n**Output Type(s):** [guidance, markdown, code, shell commands, configuration]\n\n**Output Format:** [Markdown guidance with optional code, shell commands, configuration edits, and checklist findings]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Framework-agnostic frontend guidance for agent-generated UI; includes a small local repository validation script.]\n\n## Skill Version(s):\n\n0.3.0 (source: SKILL.md frontmatter and ClawHub release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v0.3.0:LICENSE\n\nMIT License\n\nCopyright (c) 2026 Leo Stehlik\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\nArchive v0.2.2: 11 files, 15014 bytes\n\nFiles: examples/before-after.html (5108b), examples/README.md (518b), examples/review-checklist.md (1873b), LICENSE (1068b), README.md (7364b), references/banned-patterns.md (3890b), references/colour-palettes.md (1648b), scripts/validate_skill_repo.py (2232b), skill-card.md (1805b), SKILL.md (3597b), _meta.json (129b)\n\nFile v0.2.2:SKILL.md\n\n---\nname: no-slop-ui\ndescription: \"Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.\"\nmetadata:\n  version: \"0.2.2\"\n---\n# No Slop UI\n\nYou are building UI for a human audience. The goal is functional, honest, clean. Not impressive. Not dramatic. **Normal.**\n\nIf a design decision feels like the easy AI default — it probably is. Pick the harder, cleaner option.\n\nRead `references/banned-patterns.md` for the full banned list before writing any UI code.\nRead `references/colour-palettes.md` when you need to pick colours.\n\n\n## Activation Boundary\n\nUse 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.\n\nTreat 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.\n\n## The Standard\n\nThink **Linear. Raycast. Stripe. GitHub.** They don't try to grab attention. They just work.\n\n**What normal looks like:**\n- Sidebar: 240–260px fixed, solid background, 1px border-right. No floating shells, no rounded outer corners.\n- Cards: 8–12px radius max, subtle 1px border, shadow max `0 2px 8px rgba(0,0,0,0.08)`. No glow, no float.\n- Buttons: solid fill or simple border, 6–10px radius max. No pills, no gradients.\n- Typography: clear hierarchy, 14–16px body, system font or single sans-serif. No mixed serif/sans.\n- Spacing: 4/8/12/16/24/32px scale. Consistent. No random gaps.\n- Borders: 1px solid, subtle colour. No thick decorative borders, no gradient borders.\n- Transitions: 100–200ms ease. Opacity or colour only. No bouncy, no transforms.\n- Inputs: solid border, simple focus ring. Labels above fields.\n- Icons: 16–20px, monochrome or subtle colour, no decorative backgrounds.\n\n## Colour Priority\n\n1. **Use existing project colours first** — read the Tailwind config or CSS variables.\n2. If no palette exists — pick from `references/colour-palettes.md`.\n3. Never invent random colour combinations.\n\n## Stack-Specific Notes\n\n**shadcn/ui + Tailwind:**\n- Use shadcn components as-is — don't re-invent what's already there\n- Respect the existing CSS variable system (`--background`, `--foreground`, `--primary` etc.)\n- Don't override component defaults unless there's a clear product reason\n\n**Plain HTML dashboards:**\n- Single-file is fine — keep it self-contained\n- Use CSS custom properties for theming\n- No external CDN dependencies unless absolutely necessary\n\n## Hard Rules\n\n- No floating glassmorphism panels\n- No gradient backgrounds as decoration\n- No oversized rounded corners (20px+ everywhere)\n- No eyebrow labels (`<small>SECTION LABEL</small>` above headings)\n- No hero sections inside internal dashboards\n- No decorative copy (\"Operational clarity without the clutter\")\n- No metric-card grid as the default dashboard layout\n- No fake charts that exist to fill space\n- No transform animations on hover\n- No `Segoe UI`, `Trebuchet MS`, `Arial` font stacks\n- No status dots via `::before` pseudo-elements\n- No nav badges unless they carry real data\n- No pill buttons everywhere\n- No dramatic box shadows (24px+ blur)\n- No mixed alignment (some left-aligned, some floating center)\n\nFull banned list with examples: `references/banned-patterns.md`\n\nFile v0.2.2:examples/README.md\n\n# no-slop-ui Examples\n\nStart here if you want to see the design rule set applied instead of described.\n\n| Example | What it shows |\n| --- | --- |\n| [`before-after.html`](before-after.html) | A compact before/after UI example: generic AI dashboard habits vs a quieter usable work surface. |\n| [`review-checklist.md`](review-checklist.md) | A practical checklist for rejecting obvious AI UI slop before accepting frontend work. |\n\nOpen `before-after.html` in a browser, then use the checklist against generated UI work.\n\nFile v0.2.2:README.md\n\n# no-slop-ui\n\n![Validate](https://github.com/LeoStehlik/no-slop-ui/actions/workflows/validate.yml/badge.svg)\n\n**Stop AI UI slop. Build interfaces that look human-designed.**\n\nAI coding agents default to the same tired patterns: floating glass cards, gradient abuse, oversized rounded corners, eyebrow labels, hero sections inside dashboards. After a while you can spot \"AI UI\" from a mile away.\n\nThis skill exists to stop that.\n\n`no-slop-ui` is a frontend design rule set for AI coding agents. It blocks the default AI aesthetic and pushes toward clean, functional, honest interfaces - the kind built by teams like Linear, Raycast, Stripe, and GitHub.\n\n**Status:** usable OpenClaw/Codex skill. It is intentionally small: install it, let it trigger on frontend work, and use the checklist in `examples/review-checklist.md` before accepting generated UI.\n\n## Start Here\n\nUse No Slop UI when an agent is about to build or review a visible interface. The fastest path is:\n\n```bash\ngit clone https://github.com/LeoStehlik/no-slop-ui.git\ncd no-slop-ui\npython3 scripts/validate_skill_repo.py\nopen examples/before-after.html\n```\n\nFor agent work, give the agent `SKILL.md`, then check the result against `examples/review-checklist.md` before accepting the UI. The skill is intentionally blunt: it rejects common AI defaults such as glass panels, decorative gradients, oversized corners, empty hero copy, and dashboard filler.\n\n## Works With\n\nNo Slop UI is framework-agnostic. Use it with any coding agent or frontend stack where the output is a visible screen.\n\nKnown-fit surfaces:\n\n- Codex\n- Claude Code\n- OpenClaw\n- OpenCode\n- custom agent runners\n\nKnown-fit frontend stacks:\n\n- React / Next.js\n- Vue / Svelte\n- Tailwind / shadcn/ui\n- plain HTML/CSS dashboards\n\n\n## Activation Boundary\n\nUse `no-slop-ui` for explicit UI design, frontend implementation, visual polish, or design review tasks. It should not trigger on backend-only work, infrastructure tasks, copywriting, diagrams, or unrelated code review.\n\nThe rules are advisory visual constraints. They do not override accessibility, security, localization, product requirements, or an existing project design system.\n\n## Use Cases\n\n- stop AI agents from producing generic glassy dashboard UI\n- review frontend work before accepting generated code\n- give coding agents concrete design rules instead of taste adjectives\n- keep app screens quiet, usable, and domain-appropriate\n\n---\n\n## Credibility Artifact\n\nSee [`examples/README.md`](examples/README.md) for the example index, or open [`examples/before-after.html`](examples/before-after.html) to compare generic AI dashboard habits with a plain usable work surface.\n\n## What It Does\n\n- Blocks the most common AI UI anti-patterns (full list in `references/banned-patterns.md`)\n- Enforces consistent spacing, typography, border-radius, and shadow rules\n- Provides curated dark and light colour palettes when no project palette exists\n- Stack-agnostic: works with React, Next.js, Vue, Svelte, plain HTML, Tailwind, shadcn/ui - anything\n\n---\n\n## Installation\n\n### OpenClaw\n\nAdd your workspace skills directory to `openclaw.json`:\n\n```json\n{\n  \"skills\": {\n    \"load\": {\n      \"extraDirs\": [\"/path/to/your/skills\"]\n    }\n  }\n}\n```\n\nClone this repo into that directory:\n\n```bash\ngit clone https://github.com/LeoStehlik/no-slop-ui.git /path/to/your/skills/no-slop-ui\n```\n\nOpenClaw will auto-discover the skill. Use it when the task is explicitly about frontend UI work.\n\n### Codex / Claude Code / other agents\n\nInclude the contents of `SKILL.md` in your system prompt or agent instructions when asking for UI generation.\n\nOr reference the file directly in your prompt:\n\n```\nRead no-slop-ui/SKILL.md before building any UI.\n```\n\n---\n\n## Usage\n\nInvoke it explicitly for UI work:\n\n```\n/no-slop-ui\n```\n\nOr reference it in agent briefs:\n\n```\nApply no-slop-ui rules to this component.\n```\n\n---\n\n## What's Inside\n\n```\nno-slop-ui/\n├── SKILL.md                        Core rules and standards\n└── references/\n    ├── banned-patterns.md          Full banned list with HTML examples\n    └── colour-palettes.md          Dark + light palettes to use when no project palette exists\n└── examples/\n    └── review-checklist.md         Fast acceptance checklist for generated UI\n```\n\n---\n\n## The Standard\n\n> Think Linear. Think Raycast. Think Stripe. Think GitHub.  \n> They don't try to grab attention. They just work.\n\n**What normal looks like:**\n- Sidebar: 240–260px fixed, solid background, 1px border-right\n- Cards: 8–12px radius max, subtle 1px border, `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max\n- Buttons: solid fill or outlined, 6–10px radius max - no pills, no gradients\n- Typography: 14–16px body, single typeface, clear hierarchy - no mixed serif/sans\n- Spacing: 4/8/12/16/24/32px scale - consistent, never random\n- Transitions: 100–200ms ease - opacity or colour only, no transform effects\n\n**Hard no:**\n- Glassmorphism / frosted panels\n- Gradient backgrounds as decoration  \n- Eyebrow labels (`<small>SECTION NAME</small>` + heading)\n- Hero sections inside internal dashboards\n- Decorative copy (\"Operational clarity without the clutter\")\n- Metric-card grid as the default dashboard layout\n- Transform animations on hover\n- Dramatic box shadows (24px+ blur)\n\nFull list: [`references/banned-patterns.md`](references/banned-patterns.md)\n\nBefore accepting generated UI, run the short proof checklist in [`examples/review-checklist.md`](examples/review-checklist.md).\n\n---\n\n\n## When To Use Which Repo\n\nUse this repo when an AI agent is building frontend UI and you want to block the usual generic output: glass panels, decorative gradients, oversized rounded corners, empty hero copy, and dashboard sludge.\n\nUse the neighbouring tools at different points in the workflow:\n\n| Need | Use |\n| --- | --- |\n| Turn a fuzzy request into an executable agent brief | [Brief Master](https://github.com/LeoStehlik/brief-master) |\n| Prove one coding task is actually done | [Proof Loop](https://github.com/LeoStehlik/proof-loop) |\n| Improve repeated agent behaviour with evals | [Loopsmith](https://github.com/LeoStehlik/loopsmith) |\n| Keep source-backed memory for long-running agents | [Sovereign Brain](https://github.com/LeoStehlik/decoupled-agent-memory) |\n| Stop frontend agents producing generic UI sludge | [no-slop-ui](https://github.com/LeoStehlik/no-slop-ui) |\n\nA practical chain looks like this: messy request -> Brief Master brief -> Proof Loop task -> Loopsmith eval if the same failure keeps recurring -> Sovereign Brain records the durable decision.\n\n## Related Tools\n\n- [Brief Master](https://github.com/LeoStehlik/brief-master) - write frontend briefs that include clear audience, constraints, and success criteria before UI generation starts.\n- [Proof Loop](https://github.com/LeoStehlik/proof-loop) - use when a UI change needs explicit acceptance criteria, screenshots, browser checks, or fresh verification before it is called done.\n- [Loopsmith](https://github.com/LeoStehlik/loopsmith) - use when the same UI-quality failure keeps recurring and should become an eval case rather than another one-off review.\n\n## Inspiration\n\nInspired by [Uncodixfy](https://github.com/cyxzdev/Uncodixfy) by cyxzdev. Built as our own take - adapted, extended, and published as an OpenClaw skill.\n\n---\n\n## License\n\nMIT - see [LICENSE](LICENSE)\n\nFile v0.2.2:_meta.json\n\n{\n  \"ownerId\": \"kn7d3r58cdxk8k0xg6jq6k65gs873c0c\",\n  \"slug\": \"no-slop-ui\",\n  \"version\": \"0.2.2\",\n  \"publishedAt\": 1787740377168\n}\n\nFile v0.2.2:references/banned-patterns.md\n\n# Banned UI Patterns\n\nEvery item below is what AI-generated UI does by default. Recognise it. Avoid it.\n\n## Layout\n\n| Banned | Use instead |\n|--------|-------------|\n| Floating detached sidebar with rounded outer shell | Fixed sidebar, solid bg, 1px border-right |\n| Hero section inside an internal dashboard | Standard page header, h1 + subtitle only |\n| Metric-card grid as default dashboard layout | Content-first layout — metrics only where they belong |\n| Right-side rail with \"Today\" schedule | Only if product explicitly requires it |\n| Asymmetric creative layout | Predictable grid/flex |\n| Dead space to look expensive | Consistent 24–32px padding |\n| Mobile: everything stacked into one long scroll | Proper responsive breakpoints |\n\n## Components\n\n| Banned | Use instead |\n|--------|-------------|\n| Glassmorphism / frosted panels | Solid background, subtle border |\n| Floating cards with dramatic shadows | `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max |\n| Pill buttons everywhere | 6–10px border-radius max |\n| Gradient button backgrounds | Solid fill or outlined |\n| Animated underline inputs / morphing focus | `outline: 2px solid var(--ring)` |\n| Fancy floating labels on inputs | Labels above the field, always |\n| Dropdown with entrance animation | Simple list, subtle shadow, no animation |\n| Modal with slide-in / scale animation | Centered overlay, simple fade |\n| Tabs with sliding pill indicator | Underline or border indicator only |\n| Zebra stripes on tables (unless data-dense) | Clean rows, subtle hover |\n| Status dots via `::before` pseudo-elements | Simple inline badge or icon |\n\n## Typography\n\n| Banned | Use instead |\n|--------|-------------|\n| Eyebrow label: `<small>TEAM COMMAND</small>` + h2 | Just h1/h2 with proper hierarchy |\n| Uppercase + letter-spacing labels everywhere | Reserve for truly categorical labels |\n| Gradient text | Solid colour |\n| Mixed serif + sans-serif | Single typeface family |\n| Decorative copy: \"One place to track what matters\" | Direct, functional headings only |\n| `Segoe UI`, `Trebuchet MS`, `Arial` | System UI or a single clean sans-serif |\n\n## Colour & Visual\n\n| Banned | Use instead |\n|--------|-------------|\n| Soft corporate gradients as backgrounds | Solid colours from the palette |\n| Blue-black gradient \"premium dark mode\" | True dark: `#0f172a` / `#1e293b` |\n| Cyan accents on dark blue | Muted, intentional accent colour |\n| Coloured glows on cards or buttons | No glow |\n| Conic-gradient donuts as decoration | No decorative gradients |\n| Gradient borders | 1px solid subtle border |\n| Random colour combinations | Pick from `colour-palettes.md` |\n\n## Motion\n\n| Banned | Use instead |\n|--------|-------------|\n| `transform: translateX(2px)` on nav hover | Background colour change only |\n| Bounce / spring animations | `100–200ms ease` |\n| Scale on card hover | Subtle border or shadow change |\n| Entrance animations on page load | No animation, or simple opacity fade |\n\n## Specific HTML Patterns — Hard No\n\n```html\n<!-- BANNED: Eyebrow + headline combo -->\n<div class=\"headline\">\n  <small>Team Command</small>\n  <h2>One place to track what matters today.</h2>\n  <p>The layout stays strict and readable...</p>\n</div>\n\n<!-- BANNED: Small label + strong note -->\n<div class=\"team-note\">\n  <small>Focus</small>\n  <strong>Keep updates brief, blockers visible, and next actions easy to spot.</strong>\n</div>\n\n<!-- BANNED: Nav badge -->\n<span class=\"nav-badge\">Live</span>\n\n<!-- BANNED: Gradient brand block -->\n<div style=\"background: linear-gradient(135deg, #2a2a2a, #171717)\">...</div>\n\n<!-- BANNED: KPI grid as dashboard default -->\n<div class=\"kpi-grid\">\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n</div>\n```\n\n## The Rule\n\n**If it feels like the AI default — it is. Pick the harder, cleaner option.**\n\nWhen in doubt: what would Linear do?\n\nFile v0.2.2:references/colour-palettes.md\n\n# Colour Palettes\n\nUse these when no existing project palette is available.\n**Always check for existing colours first** (Tailwind config, CSS variables, design tokens).\n\n## Dark Palettes\n\n| Name | Background | Surface | Primary | Secondary | Accent | Text |\n|------|-----------|---------|---------|-----------|--------|------|\n| Void Space | `#0d1117` | `#161b22` | `#58a6ff` | `#79c0ff` | `#f78166` | `#c9d1d9` |\n| Slate Noir | `#0f172a` | `#1e293b` | `#38bdf8` | `#818cf8` | `#fb923c` | `#f1f5f9` |\n| Charcoal Studio | `#1c1c1e` | `#2c2c2e` | `#0a84ff` | `#5e5ce6` | `#ff375f` | `#f2f2f7` |\n| Graphite Pro | `#18181b` | `#27272a` | `#a855f7` | `#ec4899` | `#14b8a6` | `#fafafa` |\n| Obsidian Depth | `#0f0f0f` | `#1a1a1a` | `#00d4aa` | `#00a3cc` | `#ff6b9d` | `#f5f5f5` |\n\n## Light Palettes\n\n| Name | Background | Surface | Primary | Secondary | Accent | Text |\n|------|-----------|---------|---------|-----------|--------|------|\n| Cloud Canvas | `#fafafa` | `#ffffff` | `#2563eb` | `#7c3aed` | `#dc2626` | `#0f172a` |\n| Pearl Minimal | `#f8f9fa` | `#ffffff` | `#0066cc` | `#6610f2` | `#ff6b35` | `#212529` |\n| Porcelain Clean | `#f9fafb` | `#ffffff` | `#4f46e5` | `#8b5cf6` | `#ec4899` | `#111827` |\n| Alabaster Pure | `#fcfcfc` | `#ffffff` | `#1d4ed8` | `#2563eb` | `#dc2626` | `#1e293b` |\n| Frost Bright | `#f1f5f9` | `#f8fafc` | `#0f766e` | `#14b8a6` | `#e11d48` | `#0f172a` |\n\n## Usage\n\n- Pick one palette and stick to it for the whole component/page\n- Use `--background`, `--surface`, `--primary` as CSS custom properties\n- Don't mix palettes\n- If building dark + light modes: pick one dark and one light palette that complement each other\n\nFile v0.2.2:examples/review-checklist.md\n\n# No Slop UI Review Checklist\n\nUse this as a quick proof pass after an agent generates or edits UI.\n\n## Layout\n\n- [ ] The first screen is the actual product experience, not a marketing hero unless the task explicitly asked for a landing page.\n- [ ] Dashboards use dense, scannable structure instead of oversized decorative cards.\n- [ ] Sidebars and toolbars have stable dimensions and do not float inside decorative shells.\n- [ ] Mobile and desktop views have clear responsive constraints; text does not overlap or resize layout awkwardly.\n\n## Components\n\n- [ ] Buttons use familiar icons where appropriate and avoid pill styling by default.\n- [ ] Cards have a practical reason to exist: repeated items, modals, or framed tools.\n- [ ] No card is nested inside another card.\n- [ ] Tables, forms, filters, tabs, and menus use normal product patterns rather than novelty styling.\n\n## Visual Style\n\n- [ ] No glassmorphism, decorative gradients, gradient text, glow, or floating background blobs.\n- [ ] Border radius stays restrained: usually 6-10px for controls and 8px or less for cards unless the existing design system says otherwise.\n- [ ] Typography uses clear hierarchy without hero-scale type inside compact UI surfaces.\n- [ ] The palette does not collapse into one hue family or generic dark-blue/purple AI styling.\n\n## Motion\n\n- [ ] Hover states are subtle: color, border, or shadow changes only.\n- [ ] No transform, bounce, spring, scale, or slide effects unless the product domain truly needs them.\n- [ ] Loading states preserve layout dimensions.\n\n## Copy\n\n- [ ] Headings and labels are functional, not decorative.\n- [ ] No eyebrow-label plus headline pattern.\n- [ ] No vague SaaS filler such as clarity, command center, or unlock productivity unless it is real product language.\n\n## Verdict\n\nIf two or more checks fail, revise the UI before calling the task done.\n\nFile v0.2.2:skill-card.md\n\n## Description:\n\nBuild or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[leostehlik](https://clawhub.ai/user/leostehlik)\n\n### License/Terms of Use:\n\nMIT\n\n## Use Case:\n\nDevelopers and coding-agent users apply this skill when building or reviewing visible frontend interfaces. It provides practical visual rules, review criteria, and palette guidance to avoid generic AI-generated UI patterns while preserving product requirements and existing design systems.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The skill can influence frontend design choices beyond its visual-quality scope.\n\nMitigation: Apply it as advisory UI guidance only, and preserve accessibility, security, localization, product requirements, data correctness, and existing design-system constraints.\n\n## Reference(s):\n\n- [Banned UI Patterns](references/banned-patterns.md)\n- [Colour Palettes](references/colour-palettes.md)\n- [No Slop UI Review Checklist](examples/review-checklist.md)\n\n## Skill Output:\n\n**Output Type(s):** [Guidance, Markdown, Code]\n\n**Output Format:** [Markdown guidance with possible code or configuration changes during frontend work]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Advisory visual-quality guidance scoped to UI design and frontend implementation tasks.]\n\n## Skill Version(s):\n\n0.2.2 (source: SKILL.md metadata and server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nFile v0.2.2:LICENSE\n\nMIT License\n\nCopyright (c) 2026 Leo Stehlik\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\nArchive v0.2.1: 11 files, 14804 bytes\n\nFiles: examples/before-after.html (5108b), examples/README.md (518b), examples/review-checklist.md (1873b), LICENSE (1068b), README.md (6463b), references/banned-patterns.md (3890b), references/colour-palettes.md (1648b), scripts/validate_skill_repo.py (2232b), skill-card.md (2333b), SKILL.md (3597b), _meta.json (129b)\n\nFile v0.2.1:SKILL.md\n\n---\nname: no-slop-ui\ndescription: \"Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.\"\nmetadata:\n  version: \"0.2.1\"\n---\n# No Slop UI\n\nYou are building UI for a human audience. The goal is functional, honest, clean. Not impressive. Not dramatic. **Normal.**\n\nIf a design decision feels like the easy AI default — it probably is. Pick the harder, cleaner option.\n\nRead `references/banned-patterns.md` for the full banned list before writing any UI code.\nRead `references/colour-palettes.md` when you need to pick colours.\n\n\n## Activation Boundary\n\nUse 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.\n\nTreat 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.\n\n## The Standard\n\nThink **Linear. Raycast. Stripe. GitHub.** They don't try to grab attention. They just work.\n\n**What normal looks like:**\n- Sidebar: 240–260px fixed, solid background, 1px border-right. No floating shells, no rounded outer corners.\n- Cards: 8–12px radius max, subtle 1px border, shadow max `0 2px 8px rgba(0,0,0,0.08)`. No glow, no float.\n- Buttons: solid fill or simple border, 6–10px radius max. No pills, no gradients.\n- Typography: clear hierarchy, 14–16px body, system font or single sans-serif. No mixed serif/sans.\n- Spacing: 4/8/12/16/24/32px scale. Consistent. No random gaps.\n- Borders: 1px solid, subtle colour. No thick decorative borders, no gradient borders.\n- Transitions: 100–200ms ease. Opacity or colour only. No bouncy, no transforms.\n- Inputs: solid border, simple focus ring. Labels above fields.\n- Icons: 16–20px, monochrome or subtle colour, no decorative backgrounds.\n\n## Colour Priority\n\n1. **Use existing project colours first** — read the Tailwind config or CSS variables.\n2. If no palette exists — pick from `references/colour-palettes.md`.\n3. Never invent random colour combinations.\n\n## Stack-Specific Notes\n\n**shadcn/ui + Tailwind:**\n- Use shadcn components as-is — don't re-invent what's already there\n- Respect the existing CSS variable system (`--background`, `--foreground`, `--primary` etc.)\n- Don't override component defaults unless there's a clear product reason\n\n**Plain HTML dashboards:**\n- Single-file is fine — keep it self-contained\n- Use CSS custom properties for theming\n- No external CDN dependencies unless absolutely necessary\n\n## Hard Rules\n\n- No floating glassmorphism panels\n- No gradient backgrounds as decoration\n- No oversized rounded corners (20px+ everywhere)\n- No eyebrow labels (`<small>SECTION LABEL</small>` above headings)\n- No hero sections inside internal dashboards\n- No decorative copy (\"Operational clarity without the clutter\")\n- No metric-card grid as the default dashboard layout\n- No fake charts that exist to fill space\n- No transform animations on hover\n- No `Segoe UI`, `Trebuchet MS`, `Arial` font stacks\n- No status dots via `::before` pseudo-elements\n- No nav badges unless they carry real data\n- No pill buttons everywhere\n- No dramatic box shadows (24px+ blur)\n- No mixed alignment (some left-aligned, some floating center)\n\nFull banned list with examples: `references/banned-patterns.md`\n\nFile v0.2.1:examples/README.md\n\n# no-slop-ui Examples\n\nStart here if you want to see the design rule set applied instead of described.\n\n| Example | What it shows |\n| --- | --- |\n| [`before-after.html`](before-after.html) | A compact before/after UI example: generic AI dashboard habits vs a quieter usable work surface. |\n| [`review-checklist.md`](review-checklist.md) | A practical checklist for rejecting obvious AI UI slop before accepting frontend work. |\n\nOpen `before-after.html` in a browser, then use the checklist against generated UI work.\n\nFile v0.2.1:README.md\n\n# no-slop-ui\n\n![Validate](https://github.com/LeoStehlik/no-slop-ui/actions/workflows/validate.yml/badge.svg)\n\n**Stop AI UI slop. Build interfaces that look human-designed.**\n\nAI coding agents default to the same tired patterns: floating glass cards, gradient abuse, oversized rounded corners, eyebrow labels, hero sections inside dashboards. After a while you can spot \"AI UI\" from a mile away.\n\nThis skill exists to stop that.\n\n`no-slop-ui` is a frontend design rule set for AI coding agents. It blocks the default AI aesthetic and pushes toward clean, functional, honest interfaces - the kind built by teams like Linear, Raycast, Stripe, and GitHub.\n\n**Status:** usable OpenClaw/Codex skill. It is intentionally small: install it, let it trigger on frontend work, and use the checklist in `examples/review-checklist.md` before accepting generated UI.\n\n\n## Activation Boundary\n\nUse `no-slop-ui` for explicit UI design, frontend implementation, visual polish, or design review tasks. It should not trigger on backend-only work, infrastructure tasks, copywriting, diagrams, or unrelated code review.\n\nThe rules are advisory visual constraints. They do not override accessibility, security, localization, product requirements, or an existing project design system.\n\n## Use Cases\n\n- stop AI agents from producing generic glassy dashboard UI\n- review frontend work before accepting generated code\n- give coding agents concrete design rules instead of taste adjectives\n- keep app screens quiet, usable, and domain-appropriate\n\n---\n\n## Credibility Artifact\n\nSee [`examples/README.md`](examples/README.md) for the example index, or open [`examples/before-after.html`](examples/before-after.html) to compare generic AI dashboard habits with a plain usable work surface.\n\n## What It Does\n\n- Blocks the most common AI UI anti-patterns (full list in `references/banned-patterns.md`)\n- Enforces consistent spacing, typography, border-radius, and shadow rules\n- Provides curated dark and light colour palettes when no project palette exists\n- Stack-agnostic: works with React, Next.js, Vue, Svelte, plain HTML, Tailwind, shadcn/ui - anything\n\n---\n\n## Installation\n\n### OpenClaw\n\nAdd your workspace skills directory to `openclaw.json`:\n\n```json\n{\n  \"skills\": {\n    \"load\": {\n      \"extraDirs\": [\"/path/to/your/skills\"]\n    }\n  }\n}\n```\n\nClone this repo into that directory:\n\n```bash\ngit clone https://github.com/LeoStehlik/no-slop-ui.git /path/to/your/skills/no-slop-ui\n```\n\nOpenClaw will auto-discover the skill. Use it when the task is explicitly about frontend UI work.\n\n### Codex / Claude Code / other agents\n\nInclude the contents of `SKILL.md` in your system prompt or agent instructions when asking for UI generation.\n\nOr reference the file directly in your prompt:\n\n```\nRead no-slop-ui/SKILL.md before building any UI.\n```\n\n---\n\n## Usage\n\nInvoke it explicitly for UI work:\n\n```\n/no-slop-ui\n```\n\nOr reference it in agent briefs:\n\n```\nApply no-slop-ui rules to this component.\n```\n\n---\n\n## What's Inside\n\n```\nno-slop-ui/\n├── SKILL.md                        Core rules and standards\n└── references/\n    ├── banned-patterns.md          Full banned list with HTML examples\n    └── colour-palettes.md          Dark + light palettes to use when no project palette exists\n└── examples/\n    └── review-checklist.md         Fast acceptance checklist for generated UI\n```\n\n---\n\n## The Standard\n\n> Think Linear. Think Raycast. Think Stripe. Think GitHub.  \n> They don't try to grab attention. They just work.\n\n**What normal looks like:**\n- Sidebar: 240–260px fixed, solid background, 1px border-right\n- Cards: 8–12px radius max, subtle 1px border, `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max\n- Buttons: solid fill or outlined, 6–10px radius max - no pills, no gradients\n- Typography: 14–16px body, single typeface, clear hierarchy - no mixed serif/sans\n- Spacing: 4/8/12/16/24/32px scale - consistent, never random\n- Transitions: 100–200ms ease - opacity or colour only, no transform effects\n\n**Hard no:**\n- Glassmorphism / frosted panels\n- Gradient backgrounds as decoration  \n- Eyebrow labels (`<small>SECTION NAME</small>` + heading)\n- Hero sections inside internal dashboards\n- Decorative copy (\"Operational clarity without the clutter\")\n- Metric-card grid as the default dashboard layout\n- Transform animations on hover\n- Dramatic box shadows (24px+ blur)\n\nFull list: [`references/banned-patterns.md`](references/banned-patterns.md)\n\nBefore accepting generated UI, run the short proof checklist in [`examples/review-checklist.md`](examples/review-checklist.md).\n\n---\n\n\n## When To Use Which Repo\n\nUse this repo when an AI agent is building frontend UI and you want to block the usual generic output: glass panels, decorative gradients, oversized rounded corners, empty hero copy, and dashboard sludge.\n\nUse the neighbouring tools at different points in the workflow:\n\n| Need | Use |\n| --- | --- |\n| Turn a fuzzy request into an executable agent brief | [Brief Master](https://github.com/LeoStehlik/brief-master) |\n| Prove one coding task is actually done | [Proof Loop](https://github.com/LeoStehlik/proof-loop) |\n| Improve repeated agent behaviour with evals | [Loopsmith](https://github.com/LeoStehlik/loopsmith) |\n| Keep source-backed memory for long-running agents | [Sovereign Brain](https://github.com/LeoStehlik/decoupled-agent-memory) |\n| Stop frontend agents producing generic UI sludge | [no-slop-ui](https://github.com/LeoStehlik/no-slop-ui) |\n\nA practical chain looks like this: messy request -> Brief Master brief -> Proof Loop task -> Loopsmith eval if the same failure keeps recurring -> Sovereign Brain records the durable decision.\n\n## Related Tools\n\n- [Brief Master](https://github.com/LeoStehlik/brief-master) - write frontend briefs that include clear audience, constraints, and success criteria before UI generation starts.\n- [Proof Loop](https://github.com/LeoStehlik/proof-loop) - use when a UI change needs explicit acceptance criteria, screenshots, browser checks, or fresh verification before it is called done.\n- [Loopsmith](https://github.com/LeoStehlik/loopsmith) - use when the same UI-quality failure keeps recurring and should become an eval case rather than another one-off review.\n\n## Inspiration\n\nInspired by [Uncodixfy](https://github.com/cyxzdev/Uncodixfy) by cyxzdev. Built as our own take - adapted, extended, and published as an OpenClaw skill.\n\n---\n\n## License\n\nMIT - see [LICENSE](LICENSE)\n\nFile v0.2.1:_meta.json\n\n{\n  \"ownerId\": \"kn7d3r58cdxk8k0xg6jq6k65gs873c0c\",\n  \"slug\": \"no-slop-ui\",\n  \"version\": \"0.2.1\",\n  \"publishedAt\": 1779616797235\n}\n\nFile v0.2.1:references/banned-patterns.md\n\n# Banned UI Patterns\n\nEvery item below is what AI-generated UI does by default. Recognise it. Avoid it.\n\n## Layout\n\n| Banned | Use instead |\n|--------|-------------|\n| Floating detached sidebar with rounded outer shell | Fixed sidebar, solid bg, 1px border-right |\n| Hero section inside an internal dashboard | Standard page header, h1 + subtitle only |\n| Metric-card grid as default dashboard layout | Content-first layout — metrics only where they belong |\n| Right-side rail with \"Today\" schedule | Only if product explicitly requires it |\n| Asymmetric creative layout | Predictable grid/flex |\n| Dead space to look expensive | Consistent 24–32px padding |\n| Mobile: everything stacked into one long scroll | Proper responsive breakpoints |\n\n## Components\n\n| Banned | Use instead |\n|--------|-------------|\n| Glassmorphism / frosted panels | Solid background, subtle border |\n| Floating cards with dramatic shadows | `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max |\n| Pill buttons everywhere | 6–10px border-radius max |\n| Gradient button backgrounds | Solid fill or outlined |\n| Animated underline inputs / morphing focus | `outline: 2px solid var(--ring)` |\n| Fancy floating labels on inputs | Labels above the field, always |\n| Dropdown with entrance animation | Simple list, subtle shadow, no animation |\n| Modal with slide-in / scale animation | Centered overlay, simple fade |\n| Tabs with sliding pill indicator | Underline or border indicator only |\n| Zebra stripes on tables (unless data-dense) | Clean rows, subtle hover |\n| Status dots via `::before` pseudo-elements | Simple inline badge or icon |\n\n## Typography\n\n| Banned | Use instead |\n|--------|-------------|\n| Eyebrow label: `<small>TEAM COMMAND</small>` + h2 | Just h1/h2 with proper hierarchy |\n| Uppercase + letter-spacing labels everywhere | Reserve for truly categorical labels |\n| Gradient text | Solid colour |\n| Mixed serif + sans-serif | Single typeface family |\n| Decorative copy: \"One place to track what matters\" | Direct, functional headings only |\n| `Segoe UI`, `Trebuchet MS`, `Arial` | System UI or a single clean sans-serif |\n\n## Colour & Visual\n\n| Banned | Use instead |\n|--------|-------------|\n| Soft corporate gradients as backgrounds | Solid colours from the palette |\n| Blue-black gradient \"premium dark mode\" | True dark: `#0f172a` / `#1e293b` |\n| Cyan accents on dark blue | Muted, intentional accent colour |\n| Coloured glows on cards or buttons | No glow |\n| Conic-gradient donuts as decoration | No decorative gradients |\n| Gradient borders | 1px solid subtle border |\n| Random colour combinations | Pick from `colour-palettes.md` |\n\n## Motion\n\n| Banned | Use instead |\n|--------|-------------|\n| `transform: translateX(2px)` on nav hover | Background colour change only |\n| Bounce / spring animations | `100–200ms ease` |\n| Scale on card hover | Subtle border or shadow change |\n| Entrance animations on page load | No animation, or simple opacity fade |\n\n## Specific HTML Patterns — Hard No\n\n```html\n<!-- BANNED: Eyebrow + headline combo -->\n<div class=\"headline\">\n  <small>Team Command</small>\n  <h2>One place to track what matters today.</h2>\n  <p>The layout stays strict and readable...</p>\n</div>\n\n<!-- BANNED: Small label + strong note -->\n<div class=\"team-note\">\n  <small>Focus</small>\n  <strong>Keep updates brief, blockers visible, and next actions easy to spot.</strong>\n</div>\n\n<!-- BANNED: Nav badge -->\n<span class=\"nav-badge\">Live</span>\n\n<!-- BANNED: Gradient brand block -->\n<div style=\"background: linear-gradient(135deg, #2a2a2a, #171717)\">...</div>\n\n<!-- BANNED: KPI grid as dashboard default -->\n<div class=\"kpi-grid\">\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n</div>\n```\n\n## The Rule\n\n**If it feels like the AI default — it is. Pick the harder, cleaner option.**\n\nWhen in doubt: what would Linear do?\n\nFile v0.2.1:references/colour-palettes.md\n\n# Colour Palettes\n\nUse these when no existing project palette is available.\n**Always check for existing colours first** (Tailwind config, CSS variables, design tokens).\n\n## Dark Palettes\n\n| Name | Background | Surface | Primary | Secondary | Accent | Text |\n|------|-----------|---------|---------|-----------|--------|------|\n| Void Space | `#0d1117` | `#161b22` | `#58a6ff` | `#79c0ff` | `#f78166` | `#c9d1d9` |\n| Slate Noir | `#0f172a` | `#1e293b` | `#38bdf8` | `#818cf8` | `#fb923c` | `#f1f5f9` |\n| Charcoal Studio | `#1c1c1e` | `#2c2c2e` | `#0a84ff` | `#5e5ce6` | `#ff375f` | `#f2f2f7` |\n| Graphite Pro | `#18181b` | `#27272a` | `#a855f7` | `#ec4899` | `#14b8a6` | `#fafafa` |\n| Obsidian Depth | `#0f0f0f` | `#1a1a1a` | `#00d4aa` | `#00a3cc` | `#ff6b9d` | `#f5f5f5` |\n\n## Light Palettes\n\n| Name | Background | Surface | Primary | Secondary | Accent | Text |\n|------|-----------|---------|---------|-----------|--------|------|\n| Cloud Canvas | `#fafafa` | `#ffffff` | `#2563eb` | `#7c3aed` | `#dc2626` | `#0f172a` |\n| Pearl Minimal | `#f8f9fa` | `#ffffff` | `#0066cc` | `#6610f2` | `#ff6b35` | `#212529` |\n| Porcelain Clean | `#f9fafb` | `#ffffff` | `#4f46e5` | `#8b5cf6` | `#ec4899` | `#111827` |\n| Alabaster Pure | `#fcfcfc` | `#ffffff` | `#1d4ed8` | `#2563eb` | `#dc2626` | `#1e293b` |\n| Frost Bright | `#f1f5f9` | `#f8fafc` | `#0f766e` | `#14b8a6` | `#e11d48` | `#0f172a` |\n\n## Usage\n\n- Pick one palette and stick to it for the whole component/page\n- Use `--background`, `--surface`, `--primary` as CSS custom properties\n- Don't mix palettes\n- If building dark + light modes: pick one dark and one light palette that complement each other\n\nFile v0.2.1:examples/review-checklist.md\n\n# No Slop UI Review Checklist\n\nUse this as a quick proof pass after an agent generates or edits UI.\n\n## Layout\n\n- [ ] The first screen is the actual product experience, not a marketing hero unless the task explicitly asked for a landing page.\n- [ ] Dashboards use dense, scannable structure instead of oversized decorative cards.\n- [ ] Sidebars and toolbars have stable dimensions and do not float inside decorative shells.\n- [ ] Mobile and desktop views have clear responsive constraints; text does not overlap or resize layout awkwardly.\n\n## Components\n\n- [ ] Buttons use familiar icons where appropriate and avoid pill styling by default.\n- [ ] Cards have a practical reason to exist: repeated items, modals, or framed tools.\n- [ ] No card is nested inside another card.\n- [ ] Tables, forms, filters, tabs, and menus use normal product patterns rather than novelty styling.\n\n## Visual Style\n\n- [ ] No glassmorphism, decorative gradients, gradient text, glow, or floating background blobs.\n- [ ] Border radius stays restrained: usually 6-10px for controls and 8px or less for cards unless the existing design system says otherwise.\n- [ ] Typography uses clear hierarchy without hero-scale type inside compact UI surfaces.\n- [ ] The palette does not collapse into one hue family or generic dark-blue/purple AI styling.\n\n## Motion\n\n- [ ] Hover states are subtle: color, border, or shadow changes only.\n- [ ] No transform, bounce, spring, scale, or slide effects unless the product domain truly needs them.\n- [ ] Loading states preserve layout dimensions.\n\n## Copy\n\n- [ ] Headings and labels are functional, not decorative.\n- [ ] No eyebrow-label plus headline pattern.\n- [ ] No vague SaaS filler such as clarity, command center, or unlock productivity unless it is real product language.\n\n## Verdict\n\nIf two or more checks fail, revise the UI before calling the task done.\n\nFile v0.2.1:skill-card.md\n\n## Description: <br>\nBuild or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns. <br>\n\nThis skill is ready for commercial/non-commercial use. <br>\n\n## Publisher: <br>\n[leostehlik](https://clawhub.ai/user/leostehlik) <br>\n\n### License/Terms of Use: <br>\nMIT <br>\n\n\n## Use Case: <br>\nDevelopers and AI coding agents use this skill when creating or reviewing frontend UI to avoid generic AI visual patterns and produce restrained, usable interfaces. <br>\n\n### Deployment Geography for Use: <br>\nGlobal <br>\n\n## Known Risks and Mitigations: <br>\nRisk: The skill can shape frontend implementation choices and may conflict with product, accessibility, security, localization, or existing design-system requirements. <br>\nMitigation: Treat the rules as advisory visual-quality constraints and preserve explicit product, accessibility, security, localization, and design-system requirements when they conflict. <br>\nRisk: Generated UI may still include misleading, decorative, or hard-to-use interface patterns if the checklist is skipped. <br>\nMitigation: Use the bundled review checklist and reference files before accepting generated frontend work. <br>\n\n\n## Reference(s): <br>\n- [Banned UI Patterns](references/banned-patterns.md) <br>\n- [Colour Palettes](references/colour-palettes.md) <br>\n- [No Slop UI Review Checklist](examples/review-checklist.md) <br>\n- [ClawHub Skill Page](https://clawhub.ai/leostehlik/no-slop-ui) <br>\n- [Publisher Profile](https://clawhub.ai/user/leostehlik) <br>\n\n\n## Skill Output: <br>\n**Output Type(s):** [Guidance, Markdown, Code, Configuration] <br>\n**Output Format:** [Markdown guidance with frontend code and configuration recommendations when applicable] <br>\n**Output Parameters:** [1D] <br>\n**Other Properties Related to Output:** [Advisory visual-quality rules subordinate to accessibility, security, localization, product requirements, and existing design systems.] <br>\n\n## Skill Version(s): <br>\n0.2.1 (source: SKILL.md frontmatter and server release metadata) <br>\n\n## Ethical Considerations: <br>\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>\n\nFile v0.2.1:LICENSE\n\nMIT License\n\nCopyright (c) 2026 Leo Stehlik\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\nArchive v0.2.0: 6 files, 7780 bytes\n\nFiles: LICENSE (1068b), README.md (3443b), references/banned-patterns.md (3890b), references/colour-palettes.md (1648b), SKILL.md (3554b), _meta.json (129b)\n\nFile v0.2.0:SKILL.md\n\n---\nname: no-slop-ui\ndescription: \"Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.\"\nmetadata:\n  version: \"0.2.0\"\n---\n\n# No Slop UI\n\nYou are building UI for a human audience. The goal is functional, honest, clean. Not impressive. Not dramatic. **Normal.**\n\nIf a design decision feels like the easy AI default — it probably is. Pick the harder, cleaner option.\n\nRead `references/banned-patterns.md` for the full banned list before writing any UI code.\nRead `references/colour-palettes.md` when you need to pick colours.\n\n## Review Rubric\n\n- Layout: clear hierarchy, aligned content, no floating shells unless the product truly needs them\n- Typography: compact scale, readable line lengths, no oversized dashboard headings\n- Colour: existing project palette first; otherwise restrained, multi-hue palette from references\n- Components: standard controls for standard jobs; no decorative substitutes for familiar UI\n- Responsiveness: desktop and mobile checked for overlap, clipping, and text overflow\n- Assets: real product/place/state visuals when the user needs to inspect something\n\n## The Standard\n\nThink **Linear. Raycast. Stripe. GitHub.** They don't try to grab attention. They just work.\n\n**What normal looks like:**\n- Sidebar: 240–260px fixed, solid background, 1px border-right. No floating shells, no rounded outer corners.\n- Cards: 8–12px radius max, subtle 1px border, shadow max `0 2px 8px rgba(0,0,0,0.08)`. No glow, no float.\n- Buttons: solid fill or simple border, 6–10px radius max. No pills, no gradients.\n- Typography: clear hierarchy, 14–16px body, system font or single sans-serif. No mixed serif/sans.\n- Spacing: 4/8/12/16/24/32px scale. Consistent. No random gaps.\n- Borders: 1px solid, subtle colour. No thick decorative borders, no gradient borders.\n- Transitions: 100–200ms ease. Opacity or colour only. No bouncy, no transforms.\n- Inputs: solid border, simple focus ring. Labels above fields.\n- Icons: 16–20px, monochrome or subtle colour, no decorative backgrounds.\n\n## Colour Priority\n\n1. **Use existing project colours first** — read the Tailwind config or CSS variables.\n2. If no palette exists — pick from `references/colour-palettes.md`.\n3. Never invent random colour combinations.\n\n## Stack-Specific Notes\n\n**shadcn/ui + Tailwind:**\n- Use shadcn components as-is — don't re-invent what's already there\n- Respect the existing CSS variable system (`--background`, `--foreground`, `--primary` etc.)\n- Don't override component defaults unless there's a clear product reason\n\n**Plain HTML dashboards:**\n- Single-file is fine — keep it self-contained\n- Use CSS custom properties for theming\n- No external CDN dependencies unless absolutely necessary\n\n## Hard Rules\n\n- No floating glassmorphism panels\n- No gradient backgrounds as decoration\n- No oversized rounded corners (20px+ everywhere)\n- No eyebrow labels (`<small>SECTION LABEL</small>` above headings)\n- No hero sections inside internal dashboards\n- No decorative copy (\"Operational clarity without the clutter\")\n- No metric-card grid as the default dashboard layout\n- No fake charts that exist to fill space\n- No transform animations on hover\n- No `Segoe UI`, `Trebuchet MS`, `Arial` font stacks\n- No status dots via `::before` pseudo-elements\n- No nav badges unless they carry real data\n- No pill buttons everywhere\n- No dramatic box shadows (24px+ blur)\n- No mixed alignment (some left-aligned, some floating center)\n\nFull banned list with examples: `references/banned-patterns.md`\n\nFile v0.2.0:README.md\n\n# no-slop-ui\n\n**Stop AI UI slop. Build interfaces that look human-designed.**\n\nAI coding agents default to the same tired patterns: floating glass cards, gradient abuse, oversized rounded corners, eyebrow labels, hero sections inside dashboards. After a while you can spot \"AI UI\" from a mile away.\n\nThis skill exists to stop that.\n\n`no-slop-ui` is a rule set for AI coding agents that blocks the default AI aesthetic and pushes toward clean, functional, honest interfaces - the kind built by teams like Linear, Raycast, Stripe, and GitHub.\n\n---\n\n## What It Does\n\n- Blocks the most common AI UI anti-patterns (full list in `references/banned-patterns.md`)\n- Enforces consistent spacing, typography, border-radius, and shadow rules\n- Provides curated dark and light colour palettes when no project palette exists\n- Stack-agnostic: works with React, Next.js, Vue, Svelte, plain HTML, Tailwind, shadcn/ui - anything\n\n---\n\n## Installation\n\n### OpenClaw\n\nAdd your workspace skills directory to `openclaw.json`:\n\n```json\n{\n  \"skills\": {\n    \"load\": {\n      \"extraDirs\": [\"/path/to/your/skills\"]\n    }\n  }\n}\n```\n\nClone this repo into that directory:\n\n```bash\ngit clone https://github.com/LeoStehlik/no-slop-ui.git /path/to/your/skills/no-slop-ui\n```\n\nOpenClaw will auto-discover the skill. It triggers automatically whenever you ask for frontend UI work.\n\n### Codex / Claude Code / other agents\n\nInclude the contents of `SKILL.md` in your system prompt or agent instructions when asking for UI generation.\n\nOr reference the file directly in your prompt:\n\n```\nRead no-slop-ui/SKILL.md before building any UI.\n```\n\n---\n\n## Usage\n\nOnce installed in OpenClaw, it triggers automatically on any UI task. You can also invoke it explicitly:\n\n```\n/no-slop-ui\n```\n\nOr reference it in agent briefs:\n\n```\nApply no-slop-ui rules to this component.\n```\n\n---\n\n## What's Inside\n\n```\nno-slop-ui/\n├── SKILL.md                        Core rules and standards\n└── references/\n    ├── banned-patterns.md          Full banned list with HTML examples\n    └── colour-palettes.md          Dark + light palettes to use when no project palette exists\n```\n\n---\n\n## The Standard\n\n> Think Linear. Think Raycast. Think Stripe. Think GitHub.  \n> They don't try to grab attention. They just work.\n\n**What normal looks like:**\n- Sidebar: 240–260px fixed, solid background, 1px border-right\n- Cards: 8–12px radius max, subtle 1px border, `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max\n- Buttons: solid fill or outlined, 6–10px radius max - no pills, no gradients\n- Typography: 14–16px body, single typeface, clear hierarchy - no mixed serif/sans\n- Spacing: 4/8/12/16/24/32px scale - consistent, never random\n- Transitions: 100–200ms ease - opacity or colour only, no transform effects\n\n**Hard no:**\n- Glassmorphism / frosted panels\n- Gradient backgrounds as decoration  \n- Eyebrow labels (`<small>SECTION NAME</small>` + heading)\n- Hero sections inside internal dashboards\n- Decorative copy (\"Operational clarity without the clutter\")\n- Metric-card grid as the default dashboard layout\n- Transform animations on hover\n- Dramatic box shadows (24px+ blur)\n\nFull list: [`references/banned-patterns.md`](references/banned-patterns.md)\n\n---\n\n## Inspiration\n\nInspired by [Uncodixfy](https://github.com/cyxzdev/Uncodixfy) by cyxzdev. Built as our own take - adapted, extended, and published as an OpenClaw skill.\n\n---\n\n## License\n\nMIT - see [LICENSE](LICENSE)\n\nFile v0.2.0:_meta.json\n\n{\n  \"ownerId\": \"kn7d3r58cdxk8k0xg6jq6k65gs873c0c\",\n  \"slug\": \"no-slop-ui\",\n  \"version\": \"0.2.0\",\n  \"publishedAt\": 1779469501180\n}\n\nFile v0.2.0:references/banned-patterns.md\n\n# Banned UI Patterns\n\nEvery item below is what AI-generated UI does by default. Recognise it. Avoid it.\n\n## Layout\n\n| Banned | Use instead |\n|--------|-------------|\n| Floating detached sidebar with rounded outer shell | Fixed sidebar, solid bg, 1px border-right |\n| Hero section inside an internal dashboard | Standard page header, h1 + subtitle only |\n| Metric-card grid as default dashboard layout | Content-first layout — metrics only where they belong |\n| Right-side rail with \"Today\" schedule | Only if product explicitly requires it |\n| Asymmetric creative layout | Predictable grid/flex |\n| Dead space to look expensive | Consistent 24–32px padding |\n| Mobile: everything stacked into one long scroll | Proper responsive breakpoints |\n\n## Components\n\n| Banned | Use instead |\n|--------|-------------|\n| Glassmorphism / frosted panels | Solid background, subtle border |\n| Floating cards with dramatic shadows | `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max |\n| Pill buttons everywhere | 6–10px border-radius max |\n| Gradient button backgrounds | Solid fill or outlined |\n| Animated underline inputs / morphing focus | `outline: 2px solid var(--ring)` |\n| Fancy floating labels on inputs | Labels above the field, always |\n| Dropdown with entrance animation | Simple list, subtle shadow, no animation |\n| Modal with slide-in / scale animation | Centered overlay, simple fade |\n| Tabs with sliding pill indicator | Underline or border indicator only |\n| Zebra stripes on tables (unless data-dense) | Clean rows, subtle hover |\n| Status dots via `::before` pseudo-elements | Simple inline badge or icon |\n\n## Typography\n\n| Banned | Use instead |\n|--------|-------------|\n| Eyebrow label: `<small>TEAM COMMAND</small>` + h2 | Just h1/h2 with proper hierarchy |\n| Uppercase + letter-spacing labels everywhere | Reserve for truly categorical labels |\n| Gradient text | Solid colour |\n| Mixed serif + sans-serif | Single typeface family |\n| Decorative copy: \"One place to track what matters\" | Direct, functional headings only |\n| `Segoe UI`, `Trebuchet MS`, `Arial` | System UI or a single clean sans-serif |\n\n## Colour & Visual\n\n| Banned | Use instead |\n|--------|-------------|\n| Soft corporate gradients as backgrounds | Solid colours from the palette |\n| Blue-black gradient \"premium dark mode\" | True dark: `#0f172a` / `#1e293b` |\n| Cyan accents on dark blue | Muted, intentional accent colour |\n| Coloured glows on cards or buttons | No glow |\n| Conic-gradient donuts as decoration | No decorative gradients |\n| Gradient borders | 1px solid subtle border |\n| Random colour combinations | Pick from `colour-palettes.md` |\n\n## Motion\n\n| Banned | Use instead |\n|--------|-------------|\n| `transform: translateX(2px)` on nav hover | Background colour change only |\n| Bounce / spring animations | `100–200ms ease` |\n| Scale on card hover | Subtle border or shadow change |\n| Entrance animations on page load | No animation, or simple opacity fade |\n\n## Specific HTML Patterns — Hard No\n\n```html\n<!-- BANNED: Eyebrow + headline combo -->\n<div class=\"headline\">\n  <small>Team Command</small>\n  <h2>One place to track what matters today.</h2>\n  <p>The layout stays strict and readable...</p>\n</div>\n\n<!-- BANNED: Small label + strong note -->\n<div class=\"team-note\">\n  <small>Focus</small>\n  <strong>Keep updates brief, blockers visible, and next actions easy to spot.</strong>\n</div>\n\n<!-- BANNED: Nav badge -->\n<span class=\"nav-badge\">Live</span>\n\n<!-- BANNED: Gradient brand block -->\n<div style=\"background: linear-gradient(135deg, #2a2a2a, #171717)\">...</div>\n\n<!-- BANNED: KPI grid as dashboard default -->\n<div class=\"kpi-grid\">\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n</div>\n```\n\n## The Rule\n\n**If it feels like the AI default — it is. Pick the harder, cleaner option.**\n\nWhen in doubt: what would Linear do?\n\nFile v0.2.0:references/colour-palettes.md\n\n# Colour Palettes\n\nUse these when no existing project palette is available.\n**Always check for existing colours first** (Tailwind config, CSS variables, design tokens).\n\n## Dark Palettes\n\n| Name | Background | Surface | Primary | Secondary | Accent | Text |\n|------|-----------|---------|---------|-----------|--------|------|\n| Void Space | `#0d1117` | `#161b22` | `#58a6ff` | `#79c0ff` | `#f78166` | `#c9d1d9` |\n| Slate Noir | `#0f172a` | `#1e293b` | `#38bdf8` | `#818cf8` | `#fb923c` | `#f1f5f9` |\n| Charcoal Studio | `#1c1c1e` | `#2c2c2e` | `#0a84ff` | `#5e5ce6` | `#ff375f` | `#f2f2f7` |\n| Graphite Pro | `#18181b` | `#27272a` | `#a855f7` | `#ec4899` | `#14b8a6` | `#fafafa` |\n| Obsidian Depth | `#0f0f0f` | `#1a1a1a` | `#00d4aa` | `#00a3cc` | `#ff6b9d` | `#f5f5f5` |\n\n## Light Palettes\n\n| Name | Background | Surface | Primary | Secondary | Accent | Text |\n|------|-----------|---------|---------|-----------|--------|------|\n| Cloud Canvas | `#fafafa` | `#ffffff` | `#2563eb` | `#7c3aed` | `#dc2626` | `#0f172a` |\n| Pearl Minimal | `#f8f9fa` | `#ffffff` | `#0066cc` | `#6610f2` | `#ff6b35` | `#212529` |\n| Porcelain Clean | `#f9fafb` | `#ffffff` | `#4f46e5` | `#8b5cf6` | `#ec4899` | `#111827` |\n| Alabaster Pure | `#fcfcfc` | `#ffffff` | `#1d4ed8` | `#2563eb` | `#dc2626` | `#1e293b` |\n| Frost Bright | `#f1f5f9` | `#f8fafc` | `#0f766e` | `#14b8a6` | `#e11d48` | `#0f172a` |\n\n## Usage\n\n- Pick one palette and stick to it for the whole component/page\n- Use `--background`, `--surface`, `--primary` as CSS custom properties\n- Don't mix palettes\n- If building dark + light modes: pick one dark and one light palette that complement each other\n\nFile v0.2.0:LICENSE\n\nMIT License\n\nCopyright (c) 2026 Leo Stehlik\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\nArchive v0.1.0: 6 files, 7649 bytes\n\nFiles: LICENSE (1068b), README.md (3443b), references/banned-patterns.md (3890b), references/colour-palettes.md (1648b), SKILL.md (3310b), _meta.json (129b)\n\nFile v0.1.0:SKILL.md\n\n---\nname: no-slop-ui\ndescription: Prevents generic AI UI slop when building any frontend. Use whenever generating or reviewing HTML, CSS, React, Next.js, Vue, Svelte, plain HTML dashboards, admin panels, or landing pages. Stops floating glass cards, gradient abuse, oversized rounded corners, eyebrow labels, hero sections inside dashboards, and every other \"AI-generated UI\" tell. Enforces clean, honest, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub. Stack-agnostic.\n---\n\n# No Slop UI\n\nYou are building UI for a human audience. The goal is functional, honest, clean. Not impressive. Not dramatic. **Normal.**\n\nIf a design decision feels like the easy AI default — it probably is. Pick the harder, cleaner option.\n\nRead `references/banned-patterns.md` for the full banned list before writing any UI code.\nRead `references/colour-palettes.md` when you need to pick colours.\n\n## The Standard\n\nThink **Linear. Raycast. Stripe. GitHub.** They don't try to grab attention. They just work.\n\n**What normal looks like:**\n- Sidebar: 240–260px fixed, solid background, 1px border-right. No floating shells, no rounded outer corners.\n- Cards: 8–12px radius max, subtle 1px border, shadow max `0 2px 8px rgba(0,0,0,0.08)`. No glow, no float.\n- Buttons: solid fill or simple border, 6–10px radius max. No pills, no gradients.\n- Typography: clear hierarchy, 14–16px body, system font or single sans-serif. No mixed serif/sans.\n- Spacing: 4/8/12/16/24/32px scale. Consistent. No random gaps.\n- Borders: 1px solid, subtle colour. No thick decorative borders, no gradient borders.\n- Transitions: 100–200ms ease. Opacity or colour only. No bouncy, no transforms.\n- Inputs: solid border, simple focus ring. Labels above fields.\n- Icons: 16–20px, monochrome or subtle colour, no decorative backgrounds.\n\n## Colour Priority\n\n1. **Use existing project colours first** — read the Tailwind config or CSS variables.\n2. If no palette exists — pick from `references/colour-palettes.md`.\n3. Never invent random colour combinations.\n\n## Stack-Specific Notes\n\n**shadcn/ui + Tailwind:**\n- Use shadcn components as-is — don't re-invent what's already there\n- Respect the existing CSS variable system (`--background`, `--foreground`, `--primary` etc.)\n- Don't override component defaults unless there's a clear product reason\n\n**Plain HTML dashboards:**\n- Single-file is fine — keep it self-contained\n- Use CSS custom properties for theming\n- No external CDN dependencies unless absolutely necessary\n\n## Hard Rules\n\n- No floating glassmorphism panels\n- No gradient backgrounds as decoration\n- No oversized rounded corners (20px+ everywhere)\n- No eyebrow labels (`<small>SECTION LABEL</small>` above headings)\n- No hero sections inside internal dashboards\n- No decorative copy (\"Operational clarity without the clutter\")\n- No metric-card grid as the default dashboard layout\n- No fake charts that exist to fill space\n- No transform animations on hover\n- No `Segoe UI`, `Trebuchet MS`, `Arial` font stacks\n- No status dots via `::before` pseudo-elements\n- No nav badges unless they carry real data\n- No pill buttons everywhere\n- No dramatic box shadows (24px+ blur)\n- No mixed alignment (some left-aligned, some floating center)\n\nFull banned list with examples: `references/banned-patterns.md`\n\nFile v0.1.0:README.md\n\n# no-slop-ui\n\n**Stop AI UI slop. Build interfaces that look human-designed.**\n\nAI coding agents default to the same tired patterns: floating glass cards, gradient abuse, oversized rounded corners, eyebrow labels, hero sections inside dashboards. After a while you can spot \"AI UI\" from a mile away.\n\nThis skill exists to stop that.\n\n`no-slop-ui` is a rule set for AI coding agents that blocks the default AI aesthetic and pushes toward clean, functional, honest interfaces - the kind built by teams like Linear, Raycast, Stripe, and GitHub.\n\n---\n\n## What It Does\n\n- Blocks the most common AI UI anti-patterns (full list in `references/banned-patterns.md`)\n- Enforces consistent spacing, typography, border-radius, and shadow rules\n- Provides curated dark and light colour palettes when no project palette exists\n- Stack-agnostic: works with React, Next.js, Vue, Svelte, plain HTML, Tailwind, shadcn/ui - anything\n\n---\n\n## Installation\n\n### OpenClaw\n\nAdd your workspace skills directory to `openclaw.json`:\n\n```json\n{\n  \"skills\": {\n    \"load\": {\n      \"extraDirs\": [\"/path/to/your/skills\"]\n    }\n  }\n}\n```\n\nClone this repo into that directory:\n\n```bash\ngit clone https://github.com/LeoStehlik/no-slop-ui.git /path/to/your/skills/no-slop-ui\n```\n\nOpenClaw will auto-discover the skill. It triggers automatically whenever you ask for frontend UI work.\n\n### Codex / Claude Code / other agents\n\nInclude the contents of `SKILL.md` in your system prompt or agent instructions when asking for UI generation.\n\nOr reference the file directly in your prompt:\n\n```\nRead no-slop-ui/SKILL.md before building any UI.\n```\n\n---\n\n## Usage\n\nOnce installed in OpenClaw, it triggers automatically on any UI task. You can also invoke it explicitly:\n\n```\n/no-slop-ui\n```\n\nOr reference it in agent briefs:\n\n```\nApply no-slop-ui rules to this component.\n```\n\n---\n\n## What's Inside\n\n```\nno-slop-ui/\n├── SKILL.md                        Core rules and standards\n└── references/\n    ├── banned-patterns.md          Full banned list with HTML examples\n    └── colour-palettes.md          Dark + light palettes to use when no project palette exists\n```\n\n---\n\n## The Standard\n\n> Think Linear. Think Raycast. Think Stripe. Think GitHub.  \n> They don't try to grab attention. They just work.\n\n**What normal looks like:**\n- Sidebar: 240–260px fixed, solid background, 1px border-right\n- Cards: 8–12px radius max, subtle 1px border, `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max\n- Buttons: solid fill or outlined, 6–10px radius max - no pills, no gradients\n- Typography: 14–16px body, single typeface, clear hierarchy - no mixed serif/sans\n- Spacing: 4/8/12/16/24/32px scale - consistent, never random\n- Transitions: 100–200ms ease - opacity or colour only, no transform effects\n\n**Hard no:**\n- Glassmorphism / frosted panels\n- Gradient backgrounds as decoration  \n- Eyebrow labels (`<small>SECTION NAME</small>` + heading)\n- Hero sections inside internal dashboards\n- Decorative copy (\"Operational clarity without the clutter\")\n- Metric-card grid as the default dashboard layout\n- Transform animations on hover\n- Dramatic box shadows (24px+ blur)\n\nFull list: [`references/banned-patterns.md`](references/banned-patterns.md)\n\n---\n\n## Inspiration\n\nInspired by [Uncodixfy](https://github.com/cyxzdev/Uncodixfy) by cyxzdev. Built as our own take - adapted, extended, and published as an OpenClaw skill.\n\n---\n\n## License\n\nMIT - see [LICENSE](LICENSE)\n\nFile v0.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn7d3r58cdxk8k0xg6jq6k65gs873c0c\",\n  \"slug\": \"no-slop-ui\",\n  \"version\": \"0.1.0\",\n  \"publishedAt\": 1779320447628\n}\n\nFile v0.1.0:references/banned-patterns.md\n\n# Banned UI Patterns\n\nEvery item below is what AI-generated UI does by default. Recognise it. Avoid it.\n\n## Layout\n\n| Banned | Use instead |\n|--------|-------------|\n| Floating detached sidebar with rounded outer shell | Fixed sidebar, solid bg, 1px border-right |\n| Hero section inside an internal dashboard | Standard page header, h1 + subtitle only |\n| Metric-card grid as default dashboard layout | Content-first layout — metrics only where they belong |\n| Right-side rail with \"Today\" schedule | Only if product explicitly requires it |\n| Asymmetric creative layout | Predictable grid/flex |\n| Dead space to look expensive | Consistent 24–32px padding |\n| Mobile: everything stacked into one long scroll | Proper responsive breakpoints |\n\n## Components\n\n| Banned | Use instead |\n|--------|-------------|\n| Glassmorphism / frosted panels | Solid background, subtle border |\n| Floating cards with dramatic shadows | `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max |\n| Pill buttons everywhere | 6–10px border-radius max |\n| Gradient button backgrounds | Solid fill or outlined |\n| Animated underline inputs / morphing focus | `outline: 2px solid var(--ring)` |\n| Fancy floating labels on inputs | Labels above the field, always |\n| Dropdown with entrance animation | Simple list, subtle shadow, no animation |\n| Modal with slide-in / scale animation | Centered overlay, simple fade |\n| Tabs with sliding pill indicator | Underline or border indicator only |\n| Zebra stripes on tables (unless data-dense) | Clean rows, subtle hover |\n| Status dots via `::before` pseudo-elements | Simple inline badge or icon |\n\n## Typography\n\n| Banned | Use instead |\n|--------|-------------|\n| Eyebrow label: `<small>TEAM COMMAND</small>` + h2 | Just h1/h2 with proper hierarchy |\n| Uppercase + letter-spacing labels everywhere | Reserve for truly categorical labels |\n| Gradient text | Solid colour |\n| Mixed serif + sans-serif | Single typeface family |\n| Decorative copy: \"One place to track what matters\" | Direct, functional headings only |\n| `Segoe UI`, `Trebuchet MS`, `Arial` | System UI or a single clean sans-serif |\n\n## Colour & Visual\n\n| Banned | Use instead |\n|--------|-------------|\n| Soft corporate gradients as backgrounds | Solid colours from the palette |\n| Blue-black gradient \"premium dark mode\" | True dark: `#0f172a` / `#1e293b` |\n| Cyan accents on dark blue | Muted, intentional accent colour |\n| Coloured glows on cards or buttons | No glow |\n| Conic-gradient donuts as decoration | No decorative gradients |\n| Gradient borders | 1px solid subtle border |\n| Random colour combinations | Pick from `colour-palettes.md` |\n\n## Motion\n\n| Banned | Use instead |\n|--------|-------------|\n| `transform: translateX(2px)` on nav hover | Background colour change only |\n| Bounce / spring animations | `100–200ms ease` |\n| Scale on card hover | Subtle border or shadow change |\n| Entrance animations on page load | No animation, or simple opacity fade |\n\n## Specific HTML Patterns — Hard No\n\n```html\n<!-- BANNED: Eyebrow + headline combo -->\n<div class=\"headline\">\n  <small>Team Command</small>\n  <h2>One place to track what matters today.</h2>\n  <p>The layout stays strict and readable...</p>\n</div>\n\n<!-- BANNED: Small label + strong note -->\n<div class=\"team-note\">\n  <small>Focus</small>\n  <strong>Keep updates brief, blockers visible, and next actions easy to spot.</strong>\n</div>\n\n<!-- BANNED: Nav badge -->\n<span class=\"nav-badge\">Live</span>\n\n<!-- BANNED: Gradient brand block -->\n<div style=\"background: linear-gradient(135deg, #2a2a2a, #171717)\">...</div>\n\n<!-- BANNED: KPI grid as dashboard default -->\n<div class=\"kpi-grid\">\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n</div>\n```\n\n## The Rule\n\n**If it feels like the AI default — it is. Pick the harder, cleaner option.**\n\nWhen in doubt: what would Linear do?\n\nFile v0.1.0:references/colour-palettes.md\n\n# Colour Palettes\n\nUse these when no existing project palette is available.\n**Always check for existing colours first** (Tailwind config, CSS variables, design tokens).\n\n## Dark Palettes\n\n| Name | Background | Surface | Primary | Secondary | Accent | Text |\n|------|-----------|---------|---------|-----------|--------|------|\n| Void Space | `#0d1117` | `#161b22` | `#58a6ff` | `#79c0ff` | `#f78166` | `#c9d1d9` |\n| Slate Noir | `#0f172a` | `#1e293b` | `#38bdf8` | `#818cf8` | `#fb923c` | `#f1f5f9` |\n| Charcoal Studio | `#1c1c1e` | `#2c2c2e` | `#0a84ff` | `#5e5ce6` | `#ff375f` | `#f2f2f7` |\n| Graphite Pro | `#18181b` | `#27272a` | `#a855f7` | `#ec4899` | `#14b8a6` | `#fafafa` |\n| Obsidian Depth | `#0f0f0f` | `#1a1a1a` | `#00d4aa` | `#00a3cc` | `#ff6b9d` | `#f5f5f5` |\n\n## Light Palettes\n\n| Name | Background | Surface | Primary | Secondary | Accent | Text |\n|------|-----------|---------|---------|-----------|--------|------|\n| Cloud Canvas | `#fafafa` | `#ffffff` | `#2563eb` | `#7c3aed` | `#dc2626` | `#0f172a` |\n| Pearl Minimal | `#f8f9fa` | `#ffffff` | `#0066cc` | `#6610f2` | `#ff6b35` | `#212529` |\n| Porcelain Clean | `#f9fafb` | `#ffffff` | `#4f46e5` | `#8b5cf6` | `#ec4899` | `#111827` |\n| Alabaster Pure | `#fcfcfc` | `#ffffff` | `#1d4ed8` | `#2563eb` | `#dc2626` | `#1e293b` |\n| Frost Bright | `#f1f5f9` | `#f8fafc` | `#0f766e` | `#14b8a6` | `#e11d48` | `#0f172a` |\n\n## Usage\n\n- Pick one palette and stick to it for the whole component/page\n- Use `--background`, `--surface`, `--primary` as CSS custom properties\n- Don't mix palettes\n- If building dark + light modes: pick one dark and one light palette that complement each other\n\nFile v0.1.0:LICENSE\n\nMIT License\n\nCopyright (c) 2026 Leo Stehlik\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","readmeExcerpt":"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,","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"git clone https://github.com/LeoStehlik/no-slop-ui.git\ncd no-slop-ui\npython3 scripts/validate_skill_repo.py\nopen examples/before-after.html"},{"language":"text","snippet":"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."},{"language":"bash","snippet":"git clone https://github.com/LeoStehlik/no-slop-ui.git /path/to/your/skills/no-slop-ui"},{"language":"text","snippet":"Read no-slop-ui/SKILL.md before building this interface."},{"language":"text","snippet":"no-slop-ui/\n├── SKILL.md                         Core rules and activation boundary\n├── references/\n│   ├── banned-patterns.md           Full banned list with examples\n│   └── colour-palettes.md           Conservative palettes when no system exists\n├── examples/\n│   ├── before-after.html            Browser-openable before/after demo\n│   ├── review-checklist.md          Fast acceptance checklist\n│   └── README.md                    Example index\n├── docs/\n│   ├── agent-snippets.md            Copy-paste setup snippets\n│   └── conversion-proof.md          v0.3 proof artifact and checklist verdict\n├── assets/\n│   └── no-slop-ui-before-after.svg  README proof image\n└── scripts/\n    └── validate_skill_repo.py       Link and metadata validator"},{"language":"html","snippet":"<!-- BANNED: Eyebrow + headline combo -->\n<div class=\"headline\">\n  <small>Team Command</small>\n  <h2>One place to track what matters today.</h2>\n  <p>The layout stays strict and readable...</p>\n</div>\n\n<!-- BANNED: Small label + strong note -->\n<div class=\"team-note\">\n  <small>Focus</small>\n  <strong>Keep updates brief, blockers visible, and next actions easy to spot.</strong>\n</div>\n\n<!-- BANNED: Nav badge -->\n<span class=\"nav-badge\">Live</span>\n\n<!-- BANNED: Gradient brand block -->\n<div style=\"background: linear-gradient(135deg, #2a2a2a, #171717)\">...</div>\n\n<!-- BANNED: KPI grid as dashboard default -->\n<div class=\"kpi-grid\">\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n  <div class=\"kpi-card\">...</div>\n</div>"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: no-slop-ui\ndescription: \"Build or review frontend UI for clean, restrained, human-designed interfaces without generic AI visual patterns.\"\nmetadata:\n  version: \"0.3.0\"\n---\n# No Slop UI\n\nYou are building UI for a human audience. The goal is functional, honest, clean. Not impressive. Not dramatic. **Normal.**\n\nIf a design decision feels like the easy AI default — it probably is. Pick the harder, cleaner option.\n\nRead `references/banned-patterns.md` for the full banned list before writing any UI code.\nRead `references/colour-palettes.md` when you need to pick colours.\n\n\n## Activation Boundary\n\nUse 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.\n\nTreat 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.\n\n## The Standard\n\nThink **Linear. Raycast. Stripe. GitHub.** They don't try to grab attention. They just work.\n\n**What normal looks like:**\n- Sidebar: 240–260px fixed, solid background, 1px border-right. No floating shells, no rounded outer corners.\n- Cards: 8–12px radius max, subtle 1px border, shadow max `0 2px 8px rgba(0,0,0,0.08)`. No glow, no float.\n- Buttons: solid fill or simple border, 6–10px radius max. No pills, no gradients.\n- Typography: clear hierarchy, 14–16px body, system font or single sans-serif. No mixed serif/sans.\n- Spacing: 4/8/12/16/24/32px scale. Consistent. No random gaps.\n- Borders: 1px solid, subtle colour. No thick decorative borders, no gradient borders.\n- Transitions: 100–200ms ease. Opacity or colour only. No bouncy, no transforms.\n- Inputs: solid border, simple focus ring. Labels above fields.\n- Icons: 16–20px, monochrome or subtle colour, no decorative backgrounds.\n\n## Colour Priority\n\n1. **Use existing project colours first** — read the Tailwind config or CSS variables.\n2. If no palette exists — pick from `references/colour-palettes.md`.\n3. Never invent random colour combinations.\n\n## Stack-Specific Notes\n\n**shadcn/ui + Tailwind:**\n- Use shadcn components as-is — don't re-invent what's already there\n- Respect the existing CSS variable system (`--background`, `--foreground`, `--primary` etc.)\n- Don't override component defaults unless there's a clear product reason\n\n**Plain HTML dashboards:**\n- Single-file is fine — keep it self-contained\n- Use CSS custom properties for theming\n- No external CDN dependencies unless absolutely necessary\n\n## Hard Rules\n\n- No floating glassmorphism panels\n- No gradient backgrounds as decoration\n- No oversized rounded corners (20px+ everywhere)\n- No eyebrow labels (`<small>SECTION LABEL</small>` above headings)\n- No her"},{"path":"examples/README.md","content":"# no-slop-ui Examples\n\nStart here if you want to see the design rule set applied instead of described.\n\n| Example | What it shows |\n| --- | --- |\n| [`before-after.html`](before-after.html) | Browser-openable compact UI demo: generic AI dashboard habits vs a quieter usable work surface. |\n| [`review-checklist.md`](review-checklist.md) | Practical acceptance checklist for rejecting obvious AI UI slop before accepting frontend work. |\n| [`../docs/conversion-proof.md`](../docs/conversion-proof.md) | The v0.3 proof artifact: failure notes, checklist verdict, and why the after state converts better. |\n| [`../docs/agent-snippets.md`](../docs/agent-snippets.md) | Copy-paste snippets for Codex, Claude Code, OpenClaw, Cursor, custom agents, and PR review. |\n\nOpen `before-after.html` in a browser, then use the checklist against generated UI work."},{"path":"README.md","content":"# no-slop-ui\n\n![Validate](https://github.com/LeoStehlik/no-slop-ui/actions/workflows/validate.yml/badge.svg)\n\n**Stop AI agents shipping generic frontend sludge.**\n\n`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.\n\nUse 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.\n\n## Start Here\n\n```bash\ngit clone https://github.com/LeoStehlik/no-slop-ui.git\ncd no-slop-ui\npython3 scripts/validate_skill_repo.py\nopen examples/before-after.html\n```\n\nFor agent work, paste or reference [`SKILL.md`](SKILL.md), then review the output with [`examples/review-checklist.md`](examples/review-checklist.md).\n\n```text\nRead 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.\n```\n\n## Credibility Artifact\n\n![No Slop UI before/after artifact](assets/no-slop-ui-before-after.svg)\n\nThe 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.\n\n## What It Blocks\n\n- Glassmorphism and frosted panels\n- Decorative gradient backgrounds, gradient text, and glow\n- Huge rounded cards and floating shells\n- Hero sections inside internal dashboards\n- Fake metric grids that fill space but do not support the task\n- Eyebrow labels and vague SaaS filler copy\n- Transform, bounce, scale, or spring hover effects\n- One-hue purple/blue-dark palettes that read as generic AI output\n\nFull list: [`references/banned-patterns.md`](references/banned-patterns.md).\n\n## Works With\n\nNo Slop UI is framework-agnostic. It is a rule set and review surface, not a component library.\n\n| Surface | Use it how |\n| --- | --- |\n| Codex | Add `SKILL.md` to repo instructions or the task brief before UI work starts. |\n| Claude Code | Add the skill rules to project memory or paste the quick prompt from [`docs/agent-snippets.md`](docs/agent-snippets.md). |\n| OpenClaw | Install as a workspace skill and invoke it for frontend implementation or review. |\n| Cursor / custom agents | Paste the short guardrail prompt and require the checklist verdict in the final response. |\n\nFrontend stacks it fits: React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, plain HTML/CSS dashboards, and internal tools.\n\n## Tiny Agent Snippets\n\nCopy the relevant snippet from [`docs/agent-snippets.md`](docs/agent-snippets.md):\n\n- Codex repo instruction\n- Claude Code project instruction\n- OpenClaw skill usage\n- Cursor/custom-agent pro"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7d3r58cdxk8k0xg6jq6k65gs873c0c\",\n  \"slug\": \"no-slop-ui\",\n  \"version\": \"0.3.0\",\n  \"publishedAt\": 1788187630226\n}"},{"path":"references/banned-patterns.md","content":"# Banned UI Patterns\n\nEvery item below is what AI-generated UI does by default. Recognise it. Avoid it.\n\n## Layout\n\n| Banned | Use instead |\n|--------|-------------|\n| Floating detached sidebar with rounded outer shell | Fixed sidebar, solid bg, 1px border-right |\n| Hero section inside an internal dashboard | Standard page header, h1 + subtitle only |\n| Metric-card grid as default dashboard layout | Content-first layout — metrics only where they belong |\n| Right-side rail with \"Today\" schedule | Only if product explicitly requires it |\n| Asymmetric creative layout | Predictable grid/flex |\n| Dead space to look expensive | Consistent 24–32px padding |\n| Mobile: everything stacked into one long scroll | Proper responsive breakpoints |\n\n## Components\n\n| Banned | Use instead |\n|--------|-------------|\n| Glassmorphism / frosted panels | Solid background, subtle border |\n| Floating cards with dramatic shadows | `box-shadow: 0 2px 8px rgba(0,0,0,0.08)` max |\n| Pill buttons everywhere | 6–10px border-radius max |\n| Gradient button backgrounds | Solid fill or outlined |\n| Animated underline inputs / morphing focus | `outline: 2px solid var(--ring)` |\n| Fancy floating labels on inputs | Labels above the field, always |\n| Dropdown with entrance animation | Simple list, subtle shadow, no animation |\n| Modal with slide-in / scale animation | Centered overlay, simple fade |\n| Tabs with sliding pill indicator | Underline or border indicator only |\n| Zebra stripes on tables (unless data-dense) | Clean rows, subtle hover |\n| Status dots via `::before` pseudo-elements | Simple inline badge or icon |\n\n## Typography\n\n| Banned | Use instead |\n|--------|-------------|\n| Eyebrow label: `<small>TEAM COMMAND</small>` + h2 | Just h1/h2 with proper hierarchy |\n| Uppercase + letter-spacing labels everywhere | Reserve for truly categorical labels |\n| Gradient text | Solid colour |\n| Mixed serif + sans-serif | Single typeface family |\n| Decorative copy: \"One place to track what matters\" | Direct, functional headings only |\n| `Segoe UI`, `Trebuchet MS`, `Arial` | System UI or a single clean sans-serif |\n\n## Colour & Visual\n\n| Banned | Use instead |\n|--------|-------------|\n| Soft corporate gradients as backgrounds | Solid colours from the palette |\n| Blue-black gradient \"premium dark mode\" | True dark: `#0f172a` / `#1e293b` |\n| Cyan accents on dark blue | Muted, intentional accent colour |\n| Coloured glows on cards or buttons | No glow |\n| Conic-gradient donuts as decoration | No decorative gradients |\n| Gradient borders | 1px solid subtle border |\n| Random colour combinations | Pick from `colour-palettes.md` |\n\n## Motion\n\n| Banned | Use instead |\n|--------|-------------|\n| `transform: translateX(2px)` on nav hover | Background colour change only |\n| Bounce / spring animations | `100–200ms ease` |\n| Scale on card hover | Subtle border or shadow change |\n| Entrance animations on page load | No animation, or simple opacity fade |\n\n## Specific HTML Patterns — Hard No\n\n```html\n<!-"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"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,","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1741,"uniquenessScore":47,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-10T16:04:00.801Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-10T16:04:00.801Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-10T21:53:44.997Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"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!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"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","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}