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 MartinOlivero/saas-builder --skill frontend-performancegit clone --depth 1 https://github.com/MartinOlivero/saas-builderWrote 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/martinolivero/saas-builder/frontend-performance)<a href="https://agentmods.dev/skills/martinolivero/saas-builder/frontend-performance"><img src="https://agentmods.dev/badge/skills/martinolivero/saas-builder/frontend-performance.svg" alt="Measured on agentmods" 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.00117 | $0.00935 |
| Opus 5 | $0.00059 | $0.00467 |
| Sonnet 5 | $0.00023 | $0.00187 |
| Haiku 4.5 | $0.00012 | $0.00093 |
Grade A, and why
frontend-performance 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 8d 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 — 61 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Performance
This skill makes a React + Vite app hit the Core Web Vitals bar — the same metrics Google uses for ranking and that users feel as "fast." It optimizes against real thresholds, not vibes.
Analogy: shipping a fast app is like packing for a flight. You don't drag every possession to the gate — you pack the carry-on with what's needed now (above-the-fold) and check the rest (lazy-load below-the-fold). Overpacking the initial bundle is what makes the page heavy.
The targets (field data, 75th percentile)
- LCP < 2.5s — largest content paint.
- INP < 200ms — interaction to next paint (replaced FID in March 2024).
- CLS < 0.1 — cumulative layout shift.
Discovery (max 3 questions, only if unknown)
- What's slow — first load (LCP/bundle) or interactions (INP)?
- Do you have field data (real users) or only a Lighthouse lab score?
- What's the biggest payload — JS bundle, images, or fonts?
Step 1 — Measure real users first
Install web-vitals (attribution build) and report onLCP/onINP/onCLS to your analytics. Lab tools (Lighthouse) miss field INP — optimize against real-user data, not just a local score. The Vercel Speed Insights package gives this with no backend.
Step 2 — Cut the bundle
- Route-level code splitting with
React.lazy+<Suspense>. Lazy-load below-the-fold and modal/dialog components so the initial bundle ships only above-the-fold code. - Split vendors in
vite.config.tsviabuild.rollupOptions.output.manualChunks(separatereact/react-dom, charts, icons) for long-term cache hits. - Keep the largest initial chunk under ~200KB gzipped. Treat Vite's "chunks larger than 500KB" warning as a budget failure, not a suggestion.
- Enforce the budget in CI with
size-limit; fail the build on regression. Inspect withvite-bundle-visualizer. - Tree-shake via named imports; prefer
lucide-reactover monolithic icon packs.
Step 3 — Fix LCP
- Preload the LCP image:
<link rel="preload" fetchpriority="high">. Never lazy-load the hero. - Serve images as AVIF/WebP through Vercel image optimization; always set explicit
width/height(oraspect-ratio) to prevent CLS. - Self-host or
preconnectfonts; usefont-display: swap.
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.
- 8d ago First seen · 61 lines · 117 tokens per session scan A 8501548b9eaa
frontend-performance is a skill published in the GitHub repository MartinOlivero/saas-builder (2 stars, last pushed 20d ago), licensed MIT. It adds 117 tokens to every session and 935 once invoked, about $0.0006 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-31.
Other skills, from other repositories
reef
Launch the coral-reef dashboard (auto-install, build, and start).
cinematic-scroll-landing
Build dark, cinematic, awwwards-style landing pages with seamless scroll choreography — endless/infinite scroll loops, pinned image-morph galleries, book page-flip feature sections, full-page book sites, cross-dissolve scene transitions, unified AI-generated imagery, film-slate section markers. Use when the user asks…
modern-frontend-design
How to design and build modern, premium-quality frontend interfaces that look like high-end SaaS products, modern AI tools, and award-winning design websites — not generic templates. Use this skill whenever the user asks to build a frontend, create a landing page, design a dashboard, scaffold a web app UI, build a…
frontend-design-saas
S-tier SaaS dashboard and product UI reference. Use this skill when building application shells, data tables, settings panels, billing pages, dashboards, auth flows, admin tools, or any internal/customer-facing SaaS product UI. Inspired by Stripe, Linear, Vercel, Airbnb, Notion. Covers neutral-led design tokens…
design-review
Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use…
miniapp-dev
A development guide for BitFun MiniApps, which are small applications that run inside BitFun. It covers creating new MiniApps as well as maintaining the MiniApp framework.