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-sveltegit 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-svelte)<a href="https://agentmods.dev/skills/matteocervelli/llms/frontend-design-fix-svelte"><img src="https://agentmods.dev/badge/skills/matteocervelli/llms/frontend-design-fix-svelte/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-svelte"><img src="https://agentmods.dev/badge/skills/matteocervelli/llms/frontend-design-fix-svelte.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.00036 | $0.02256 |
| Opus 5 | $0.00018 | $0.01128 |
| Sonnet 5 | $0.00007 | $0.00451 |
| Haiku 4.5 | $0.00004 | $0.00226 |
Grade A, and why
frontend-design-fix-svelte 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 — 353 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design Fix - Svelte
Overview
Transform bland, generic Svelte component designs into visually distinctive interfaces by systematically applying the 5 design dimensions from Anthropic's design framework.
Core Workflow
1. Analysis Phase
- Read existing Svelte component files (.svelte)
- 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 component props
- Identify target audience and purpose
- Determine appropriate aesthetic direction based on component usage
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)
- Use scoped styles with Svelte's native CSS-in-component
Color & Theme
- Remove default purple gradients on white backgrounds
- Introduce CSS custom properties for theming
- Establish dominant colors with sharp accent colors
- Avoid evenly-distributed palettes (use 70-20-10 rule)
- Create theme variants (light/dark) with consistent color tokens
Motion
- Add orchestrated page load animations (fade, scale, slide)
- Implement staggered reveals with Svelte transitions and animations
- Add hover state surprises and micro-interactions
- Include scroll-triggered animations via
svelte-use - Use
svelte/animatefor list transitions
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)
- Use CSS Grid and Flexbox creatively with Svelte slots
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)
- Use pseudo-elements for background layering
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.
- 6d ago First seen · 353 lines · 36 tokens per session scan A f6996fea50d1
frontend-design-fix-svelte is a skill published in the GitHub repository matteocervelli/llms (25 stars, last pushed 3mo ago), licensed MIT. It adds 36 tokens to every session and 2,256 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.
handoff-spec
Write the implementation handoff — measurements, behaviours, assets, states, and edge cases. Use when engineering picks up the work. For verifying the result afterwards use design-qa-checklist; for reusable library components use component-spec (design-systems).