Menú
Use when optimizing LCP, INP, or CLS specifically for SEO in a Lovable SPA: PageSpeed/CrUX issues, hero image too heavy, layout shift from web fonts, slow interactions on mobile. Not for backend-only perf (use performance-budget).
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Use when reviewing or fixing accessibility: keyboard navigation, focus order, labels, color contrast, screen reader support, or ARIA attributes. Not for SEO-only or performance-only audits.
Use when adding product analytics (PostHog, GA4, Plausible), event tracking, funnels, or conversion measurement. Not for server logs only or A/B infra unless events are part of the task.
Use when standardizing API and edge function errors: HTTP status codes, error JSON shape, logging, or mapping Supabase/Stripe errors to client responses. Not for UI toast copy only or form field validation messages.
Use when recording audit trails: who changed what, admin action logs, compliance history, or append-only event tables. Not for product analytics (use analytics-events) or debug console logs only.
Use when scheduling background work: cron jobs, digest emails, cleanup tasks, pg_cron, Supabase scheduled edge functions, or job queues. Not for synchronous user-facing API in the request path.
Use when adding dark mode, theme toggle, system theme support, or fixing hardcoded colors that break in dark mode. Not for design-token migration unrelated to dark mode.
| name | seo-core-web-vitals |
| description | Use when optimizing LCP, INP, or CLS specifically for SEO in a Lovable SPA: PageSpeed/CrUX issues, hero image too heavy, layout shift from web fonts, slow interactions on mobile. Not for backend-only perf (use performance-budget). |
Core Web Vitals are a Google ranking signal. Each public page must pass on mobile (the harder threshold).
| Metric | Good | Poor |
|---|---|---|
| LCP — Largest Contentful Paint | ≤ 2.5 s | > 4.0 s |
| INP — Interaction to Next Paint | ≤ 200 ms | > 500 ms |
| CLS — Cumulative Layout Shift | ≤ 0.10 | > 0.25 |
Companion skills: performance-budget, seo-ssr-and-prerendering, dashboard-charts-recharts, accessibility-pass.
web-vitals package + your analytics for real-user monitoring.import { onLCP, onINP, onCLS } from "web-vitals";
onLCP((m) => track("web_vital", { name: "LCP", value: m.value }));
onINP((m) => track("web_vital", { name: "INP", value: m.value }));
onCLS((m) => track("web_vital", { name: "CLS", value: m.value }));
Almost always: the hero image is the LCP element on marketing pages.
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">.<img fetchpriority="high" loading="eager" decoding="async">, never loading="lazy".srcset for responsive sizes.width/height attributes — avoids CLS too.<img
src="/hero-960.webp"
srcSet="/hero-480.webp 480w, /hero-960.webp 960w, /hero-1440.webp 1440w"
sizes="(max-width: 768px) 100vw, 960px"
width={960}
height={540}
alt="Acme dashboard preview"
fetchPriority="high"
decoding="async"
/>
Other LCP wins:
seo-ssr-and-prerendering) — kills "white screen until JS".font-display: swap + preconnect to Google Fonts.Common culprits:
Fixes:
async or defer, load chat widgets after user intent.React.lazy + Suspense).tanstack-infinite-queries).useMemo, React.memo) only after profiling.startTransition for non-urgent updates (search filtering, tab switches).const [pending, startTransition] = useTransition();
const onFilter = (v: string) => startTransition(() => setQuery(v));
width/height (or aspect-ratio) on images, video, iframes, ads.font-display: swap + size-adjust or matching fallback metrics.@font-face {
font-family: "Inter";
src: url(/Inter.woff2) format("woff2");
font-display: swap;
size-adjust: 107%; /* match fallback metrics */
}
For shadcn projects, the default next/font or local font setup typically handles this — verify with Lighthouse.
Most SPAs ship with: PostHog, GA4, Stripe.js, Sentry, Intercom, Hotjar, Crisp. Each blocks the main thread.
/checkout).<head>: every <script> should justify its bytes.PageSpeed runs on a throttled 4G mobile. Your dev MacBook is not the customer.
loading="lazy" on the hero image (it's the LCP element, must load immediately).useMemo/useCallback "for safety" — they cost too.loading="lazy" on LCP element.font-display: swap.