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 matteocervelli/llms --skill frontend-design-fix-htmlgit clone --depth 1 https://github.com/matteocervelli/llmsWrote 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/matteocervelli/llms/frontend-design-fix-html)<a href="https://agentmods.dev/skills/matteocervelli/llms/frontend-design-fix-html"><img src="https://agentmods.dev/badge/skills/matteocervelli/llms/frontend-design-fix-html/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/matteocervelli/llms/frontend-design-fix-html"><img src="https://agentmods.dev/badge/skills/matteocervelli/llms/frontend-design-fix-html.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00035 | $0.01250 |
| Opus 5 | $0.00017 | $0.00625 |
| Sonnet 5 | $0.00007 | $0.00250 |
| Haiku 4.5 | $0.00003 | $0.00125 |
Grade A, and why
frontend-design-fix-html 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 — 174 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design Fix - HTML/CSS
Overview
Transform bland, generic HTML/CSS designs into visually distinctive interfaces by systematically applying the 5 design dimensions from Anthropic's design framework.
Core Workflow
1. Analysis Phase
- Read existing HTML/CSS files
- Identify generic elements (Inter/Roboto fonts, purple gradients, centered layouts, no animations, solid backgrounds)
- Score current design against anti-patterns checklist
- Generate "before" snapshot with metrics
2. Assessment Phase
- Understand brand/context from existing content and markup
- Identify target audience and purpose
- Determine appropriate aesthetic direction based on content
3. Dimension-Based Fixes
Typography
- Replace generic system fonts (Inter, Roboto, Arial) with distinctive typeface pairs
- Apply extreme weight ranges (100-200 for thin, 800-900 for bold)
- Increase size jumps (3x+ progression instead of 1.5x)
- Create high-contrast pairings (Display + Mono, Serif + Sans)
Color & Theme
- Remove default purple gradients on white backgrounds
- Introduce CSS custom properties (--primary, --accent, --surface)
- Establish dominant colors with sharp accent colors
- Avoid evenly-distributed palettes (use 70-20-10 rule)
Motion
- Add orchestrated page load animations (fade, scale, slide)
- Implement staggered reveals with
animation-delay - Add hover state surprises and micro-interactions
- Include scroll-triggered animations where appropriate
Spatial Composition
- Break centered, predictable layouts
- Add asymmetry or intentional overlap
- Introduce diagonal flow or grid-breaking elements
- Adjust spacing (generous negative space OR controlled density)
Backgrounds
- Replace solid colors with layered gradients
- Add geometric patterns or subtle noise textures
- Create atmospheric depth with multiple background layers
- Add contextual effects (blur, blend modes)
4. Implementation
- Apply fixes systematically per dimension
- Maintain accessibility standards (WCAG 2.1 AA)
- Preserve all existing functionality
- Test responsive behavior at key breakpoints
What ships with it
2 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.
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 · 174 lines · 35 tokens per session scan A 25bcd9d4fe7f
frontend-design-fix-html is a skill published in the GitHub repository matteocervelli/llms (25 stars, last pushed 3mo ago), licensed MIT. It adds 35 tokens to every session and 1,250 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-03.
Other skills, from other repositories
daisyui-colors
Color rules that you must use with daisyUI 5.
daisyui-config
Configuration options for daisyUI 5.
theme-creation
Create, update, or plan a Stencila theme for documents or published sites. Use when asked to choose a theme direction, write or patch theme.css, recommend semantic or module token families, customize site navigation or branding, tune PDF and print page tokens, align web, Python, and R plots with a Stencila design…
seed-token-analysis
A read-only analyzer for one SEED color token, including its definitions, aliases, dependent tokens, component uses, generated outputs, and color contrast. A design token is a named value such as a color that can be reused across an interface.
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
readable-measure
Set line length and measure for comfortable reading across type sizes and breakpoints. Use when tuning body text. Covers measure only — for the full size and weight scale, use typography-scale.