Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add samber/cc-skills --skill frontend-design-deslopgit clone --depth 1 https://github.com/samber/cc-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/samber/cc-skills/frontend-design-deslop)<a href="https://agentmods.dev/skills/samber/cc-skills/frontend-design-deslop"><img src="https://agentmods.dev/badge/skills/samber/cc-skills/frontend-design-deslop/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/samber/cc-skills/frontend-design-deslop"><img src="https://agentmods.dev/badge/skills/samber/cc-skills/frontend-design-deslop.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00172 | $0.04294 |
| Opus 5 | $0.00086 | $0.02147 |
| Sonnet 5 | $0.00034 | $0.00859 |
| Haiku 4.5 | $0.00017 | $0.00429 |
Grade A, and why
frontend-design-deslop scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 172 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Questions: Ask the user through the environment's question tool — never as plain-text prose. One question at a time, 2–4 tappable options, wait for the answer. If the environment has no question tool, ask in prose with the same options, one at a time.
frontend design deslop
AI-generated UI looks generic for two reasons:
- No constraints. The model samples the statistical median of 2019-2024 web code — Tailwind UI's
bg-indigo-500, Inter, rounded cards, soft shadows. You cannot out-prompt a vacuum. - Designing before knowing what you're designing. A corporate landing page, a creative portfolio, a developer-tool landing page, an analytics dashboard, and an ecommerce product page share almost no design DNA — a beautiful aesthetic that fights the artifact's job is its own slop.
The fix is a discipline borrowed from brand design: strategy drives design, never aesthetics first.
- Commit to words first — what this is, who it serves, the adjectives it must feel like.
- Translate those words into a typography and color system.
- Build from tokens.
- Apply the craft layer (layout, components, motion, iconography, imagery, dark mode, accessibility).
- Audit.
Target the convergence mechanism, not a frozen blocklist; the slop fingerprint shifts over time (purple gradients in 2022, cream backgrounds and italic-serif heroes in 2026).
This skill does two jobs at once: it de-slops the default AI look, and it designs applications well. A distinctive theme on top of careless components, weak layout, or thoughtless motion still reads as amateur. The mechanisms behind every choice live in references/design-theory.md (hierarchy, Gestalt, CRAP, signal-vs-noise, affordances, the interaction laws); read it once so the rest is reasoning rather than rule-following.
Asking questions (CRITICAL)
Every single user question must go through the question tool (see the Questions: directive above) — never as plain-text prose. The bank is generous; the asking is selective. Do not interrogate.
What ships with it
21 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- evals/evals.json 15 KB
- references/accessibility.md 7.6 KB
- references/adapters.md 2.8 KB
- references/aesthetics-library.md 6.7 KB
- references/artifact-types.md 21 KB
- references/catalogs.md 5.2 KB
- references/color-oklch.md 11 KB
- references/components.md 10 KB
- references/dark-mode.md 7.0 KB
- references/design-md.md 6.6 KB
- references/design-theory.md 7.3 KB
- references/discovery.md 8.4 KB
- references/divergence.md 8.9 KB
- references/iconography.md 7.0 KB
- references/imagery.md 8.3 KB
- references/layout.md 8.0 KB
- references/motion.md 10.0 KB
- references/slop-checklist.md 11 KB
- references/token-core.css 3.2 KB
- references/token-sets.md 4.3 KB
- references/typography.md 16 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago Changed · +39 lines · -51 tokens per session 653c74f73b29
- 11d ago First seen · 133 lines · 223 tokens per session scan A 6919b3c9ee46
frontend-design-deslop is a skill published in the GitHub repository samber/cc-skills (209 stars, last pushed 4d ago), licensed MIT. It adds 172 tokens to every session and 4,294 once invoked, about $0.0009 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
frontend-blueprint
AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code. Collects visual references, design tokens, typography, icons, layout preferences, and brand guidelines to ensure the final output matches the user's vision with high fidelity. Use when the…
figma-implement-design
Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Use when the user provides Figma URLs or node IDs and asks to implement designs or components that must match Figma specs. Requires a working…
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics. Do NOT use for design review or audit (use web-design-guidelines…
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices". Focuses on visual design and interaction patterns. Do NOT use for performance audits (use core-web-vitals), SEO (use seo), or…
slop-hallmark
Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study.
slop-taste
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.