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 OutlineDriven/odin-claude-plugin --skill frontend-design-deslopgit clone --depth 1 https://github.com/OutlineDriven/odin-claude-pluginWrote 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/outlinedriven/odin-claude-plugin/frontend-design-deslop)<a href="https://agentmods.dev/skills/outlinedriven/odin-claude-plugin/frontend-design-deslop"><img src="https://agentmods.dev/badge/skills/outlinedriven/odin-claude-plugin/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/outlinedriven/odin-claude-plugin/frontend-design-deslop"><img src="https://agentmods.dev/badge/skills/outlinedriven/odin-claude-plugin/frontend-design-deslop.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to high
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- high YARA Match · line 3 YARA rule matched a hack tool or exploit indicator (offensive tools, reconnaissance, privilege escalation, or exploit frameworks).Fix: Remove offensive tool references and exploit code. Legitimate agent skills should not contain penetration testing tools, exploit frameworks, or reconnaissance utilities.
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.00042 | $0.01007 |
| Opus 5 | $0.00021 | $0.00504 |
| Sonnet 5 | $0.00008 | $0.00201 |
| Haiku 4.5 | $0.00004 | $0.00101 |
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 5d 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 — 56 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend design deslop
Contract
| Field | Bound contract |
|---|---|
| Trigger | User builds or styles a web frontend or asks to make it not look AI-generated. |
| Authority | Reversible local: writes only DESIGN.md, design token files, and component CSS in the working project; rollback is version control. No remote mutation. No other files are touched. |
| Side effect | Writes DESIGN.md, design tokens, and component CSS. |
| Done | A committed token system and a crafted interface with a recorded slop-audit pass and a WCAG 2.2 AA pass/fail gate that passes. |
Not for
- Component-level UI work without a token system: use frontend-ui-engineering.
- Clean-room reconstruction of an authorized reference surface: use frontend-fidelity-rebuild.
- Remote, credential, publish, deploy, or irreversible changes.
Inputs
Required: the frontend project directory to style, and the surface to craft (page, component, or app shell).
Optional: brand palette, typeface preferences, existing token files, and a target framework. When omitted, derive a neutral token system from the project's existing styles; state that it was derived rather than supplied.
Procedure
- Read the target surface and any existing styles, tokens, and brand inputs. Record what was found versus supplied so the design system is grounded, not invented. Done when: found-versus-supplied is recorded.
- Author a design strategy in DESIGN.md: layout grid, type scale, color system in OKLCH, spacing scale, motion intent, and component list. State the strategy before writing tokens so the tokens follow a decision, not a guess. Done when: DESIGN.md strategy section is written.
- Emit a token system as CSS custom properties (or the project's token format) covering color, typography, spacing, radius, shadow, and motion. Tokens are the single source of truth; component CSS references tokens, never hard-coded values. Done when: token system covers all six categories and no component CSS uses hard-coded values.
- Craft the interface using the tokens. Apply the never-slop list and reject every violation before claiming the surface done:
- Generic AI gradient backgrounds and rainbow color stops.
- Default framework spacing, borders, and radius with no design intent.
- Centered hero stacks, three-card feature grids, and other templated AI layouts used without purpose.
- Hard-coded color, font, spacing, or radius values that bypass the token system.
- Placeholder copy, lorem ipsum, or unfilled image alt text.
- Low-contrast text, focus rings removed, or interactive elements without a visible focus state. Done when: every never-slop item is checked and cleared or fixed.
- Run a WCAG 2.2 AA pass/fail gate over the crafted surface: contrast ratios for text and UI components, focus visibility, target sizes, and semantic structure. Record pass or fail per criterion. Done when: every criterion is recorded as pass.
- Run a slop audit against the never-slop list and record each item as cleared or violated. Fix violations in the interface and tokens before recording a pass. Done when: every item is recorded as cleared.
- Commit DESIGN.md, the token files, and the component CSS. Record the slop-audit result and the WCAG 2.2 AA gate result alongside the commit so the pass is auditable. Done when: artifacts are committed with both gate results recorded.
What ships with it
1 file 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.
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.
- 5d ago First seen · 56 lines · 42 tokens per session scan A aaa9b760990f
frontend-design-deslop is a skill published in the GitHub repository OutlineDriven/odin-claude-plugin (35 stars, last pushed 2d ago), licensed Apache-2.0. It adds 42 tokens to every session and 1,007 once invoked, about $0.0002 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-09-06.
Other skills, from other repositories
aceternity-ui
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
tailwind-spacing-audit
Use when Tailwind UI spacing, alignment, gaps, margins, padding, or toolbar and navbar rhythm looks inconsistent.
ui-polish
Design-engineering details that make an interface feel polished — border radius, optical alignment, shadows and elevation, animations and micro-interactions, press feedback, icons. INVOKE PROACTIVELY when building or reviewing UI components, adding motion or hover/active states, or when the user says "make it feel…
layout
Layout structure for web interfaces — grouping, alignment, negative space, reading order, progressive disclosure, breakpoints, direction-aware (RTL) structure. INVOKE PROACTIVELY when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, or reviewing frontend structure.…
svg-mastery
Expert knowledge for working with SVG (Scalable Vector Graphics) — optimization, embedding, animation, accessibility, responsive scaling, React integration, filters, and programmatic creation. Use when the user asks to "optimize SVG", "clean up SVG", "reduce SVG file size", "embed SVG in HTML", "inline SVG vs img…
frontend-aesthetics
Design guidance and aesthetic patterns for building beautiful, distinctive frontends — websites, web apps, landing pages. Provides typography strategies, color application, motion choreography, layout composition, and component design recipes. Use when the user asks to "make this look better", "improve the design"…