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 bestdeejay-design/agent-skills --skill frontend-perfectiongit clone --depth 1 https://github.com/bestdeejay-design/agent-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/bestdeejay-design/agent-skills/frontend-perfection)<a href="https://agentmods.dev/skills/bestdeejay-design/agent-skills/frontend-perfection"><img src="https://agentmods.dev/badge/skills/bestdeejay-design/agent-skills/frontend-perfection/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/bestdeejay-design/agent-skills/frontend-perfection"><img src="https://agentmods.dev/badge/skills/bestdeejay-design/agent-skills/frontend-perfection.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to medium
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 →
- medium Excessive Agency · line 170 Skill enables autonomous high-impact decisions without human-in-the-loop verification. Critical operations (destructive commands, financial transactions, data deletion) should require explicit user confirmation.Fix: Add human-in-the-loop confirmation for destructive, irreversible, or high-impact operations. Never auto-execute commands that modify files, send data, or alter system state.
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.00218 | $0.04355 |
| Opus 5 | $0.00109 | $0.02178 |
| Sonnet 5 | $0.00044 | $0.00871 |
| Haiku 4.5 | $0.00022 | $0.00436 |
Grade A, and why
frontend-perfection scanned grade A with 1 finding 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 10d 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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
`curl -I`. How it starts
The opening of the file, as written. The whole thing — 276 lines — stays where its author put it; the contents beside it link to each section on GitHub.
frontend-perfection
Audit and polish a frontend — static HTML/CSS/JS or a built SPA — towards verifiable perfection. The skill exists because production web perf tooling commonly breaks when it pokes at private APIs (Playwright internals, old Lighthouse signatures, unisolated global deps). This skill runs on STABLE apis only, computes exactly (luminance, not eyeballs), and demands a before/after report bound to audit ids.
When to use
- User asks to "make the layout perfect", "fix performance", "reach 100/100/100/100", "check the frontend", "audit the page".
- User wants an OG image or social share meta for a homepage.
- User reports contrast problems, missing SEO tags, broken anchors under a fixed header, colors duplicated as raw hex.
Composition
- For Core Web Vitals / schema.org / SEO deep-dives — load
seo-toolkit(this skill measures layout, contrast, tokens and a11y; the SEO-layer breadth lives there). - For a distinctive visual DIRECTION before building — load
frontend-design-taste(palette/type/signature), then run this skill to verify the result.
Workflow
- Locate the project — static files (index.html + css/) or built SPA.
- Serve it locally if needed:
python3 -m http.server 8377(or the project's dev server). Static files are fine over http://localhost. - Run audit.js (Lighthouse, real Chrome):
Default threshold is 100; exit 0 only when every measured category is at or above it. Addnode scripts/audit.js --url http://localhost:8377/ --mobile --out lh-mobile.json node scripts/audit.js --url http://localhost:8377/ --desktop --out lh-desktop.json--only <category>to iterate on one category. - Run meta_audit.py (SEO/contrast/headings/tokens, offline):
Exit 0 = no violations; exit 1 = violations found.python3 scripts/meta_audit.py --html index.html --css main.css css/demo.css --out meta.json
- Run security_privacy_audit.py (Security/Privacy/i18n, offline) — see the section below. Exit 0 = no violations; exit 1 = violations found.
- Fix by audit id — every fix must reference the audit it closes
(e.g.
audit.jscolor-contrast,meta_audit.pymeta:description). - Re-audit until green on both form factors. Only then call it done.
- Write the before/after report in the showcase format: input paths, exact commands, real output, interpretation. Explicitly list what was deliberately NOT done.
What ships with it
7 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.
- 10d ago First seen · 276 lines · 218 tokens per session scan A 669018e3e420
frontend-perfection is a skill published in the GitHub repository bestdeejay-design/agent-skills (5 stars, last pushed 3d ago), licensed MIT. It adds 218 tokens to every session and 4,355 once invoked, about $0.0011 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
ui-web
Web UI - glassmorphism, Tailwind, dark mode, accessibility.
daemon-loop
Autonomous recurring agent tasks — converts workflows into persistent background daemons that run on intervals. Stolen from Boris Cherny's Claude Code /loop pattern (2026-03-31).
interaction-skill
Layer A interaction-mechanics reference anchored to the beui.dev catalog. Stacks on any style skill whenever work adds or changes motion or interaction — micro-interactions, animated components, transitions, gestures, hover/press/state feedback, loading/success/error morphs, 'make it feel alive'. Mandates reading the…
layout-skill
Layer A layout-mechanics reference. Stacks on any style skill when the screen is an app shell, dashboard, settings, list-detail, mail/inbox, or any layout with fixed regions plus a scrolling body — or when a layout breaks under long, empty, or unbroken content. Owns spatial structure and scroll ownership; owns zero…
cmux
Controls the cmux macOS terminal app (Ghostty-based, AI-agent-aware) via its CLI socket API. Use this skill to: open browser preview panes when a dev server starts or an HTML file is created; spin up named workspaces for parallel subagents; show live sidebar progress/status during long tasks; open utility splits on…
panel-app-react-vite-creator
Create or update an engineering-style NextClaw Panel component with pnpm, Vite, React, TypeScript, and Tailwind CSS, then build it into a static .panel directory inside a schema v2 package or an explicitly loose workspace Panel. Use for modern, reusable, complex, Agent-powered, typed Panel interfaces.