Is performance-budget safe to install?

SaferSkills independently audited performance-budget (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.

CategoryWeightCategory scoreContribution

Securityprompt, exec, net, exfil, eval

35%

100

35.0 pts

Supply chainhash, typosquat, maintainer, lockfile

20%

100

20.0 pts

Maintenancestaleness, pinning, CI

15%

100

15.0 pts

TransparencySKILL.md, perms, README

15%

100

15.0 pts

Communityinstalls, verify, response

15%

100

15.0 pts

Findings & checks · 0 flagged

Securityscore 100 · 0 findings

✓—All security checks passedNo findings in this category for the latest scan.pass

Supply chainscore 100 · 0 findings

✓—All supply chain checks passedNo findings in this category for the latest scan.pass

Maintenancescore 100 · 0 findings

✓—All maintenance checks passedNo findings in this category for the latest scan.pass

Transparencyscore 100 · 0 findings

✓—All transparency checks passedNo findings in this category for the latest scan.pass

Communityscore 100 · 0 findings

✓—All community checks passedNo findings in this category for the latest scan.pass

The primary manifest — the file an agent reads to learn what this artifact does.

.claude/skills/performance-budget/SKILL.md · 1 file

.claude/skills/performance-budget/SKILL.md6.9 KB · Markdown

Performance Budget Skill

Performance violations are called out before the code is written, not after.

JavaScript Bundle Budget

Hard limit: 150kb gzipped per route.

Before writing any code that adds a significant dependency or duplicates logic:

📦 BUNDLE BUDGET CHECK — [route or component]
Current action: [what's being added]
Bundle impact: [estimated size or "unknown — check bundlephobia"]
If this route already has significant JS:
→ Flag for code splitting before adding more
→ Verify dynamic import() is used for non-critical components
→ Confirm tree-shaking is effective on any new imports

When code splitting is needed:

// ❌ Static import of heavy component loaded on initial render
import { HeavyChart } from '@/components/HeavyChart'

// ✓ Dynamic import — loads only when needed
import dynamic from 'next/dynamic'
const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <ChartSkeleton />,
  ssr: false // only if component requires browser APIs
})

Flag any single import that adds > 20kb gzipped without justification.

Images — No Raw `<img>` Tags

🔴 PERFORMANCE STOP — Raw <img> tag detected
Replace with Next.js <Image> component:
- Automatic WebP/AVIF conversion
- Responsive srcset generation
- Lazy loading by default
- Explicit width/height prevents CLS

Required pattern:

import Image from 'next/image'

// Local image
<Image
  src="/path/to/image.jpg"
  alt="Descriptive alt text"
  width={800}       // required — prevents CLS
  height={600}      // required — prevents CLS
  priority={true}   // only for LCP / above-the-fold images
/>

// Dynamic/fill usage
<div className="relative h-64 w-full">
  <Image
    src={imageUrl}
    alt="Description"
    fill
    className="object-cover"
    sizes="(max-width: 768px) 100vw, 50vw"  // required with fill
  />
</div>

Rules:

priority on above-the-fold images (hero, profile header) — never on below-fold images
sizes required when image width varies by viewport
Never set unoptimized={true} without flagging it

Fonts — Maximum 2 Families, `next/font` Only

🔴 PERFORMANCE STOP — External font CDN link detected
Google Fonts CDN links cause render-blocking requests and privacy implications.
Replace with next/font:

// ❌ Never
// In <head>: <link href="https://fonts.googleapis.com/css2?family=..." />

// ✓ Required
import { Inter, Playfair_Display } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

const playfair = Playfair_Display({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-playfair',
  weight: ['400', '700'],
})

Rules:

Maximum 2 font families per project — flag if a third is requested
Load only the weights actually used in the design system — no weight: ['100', '200', ..., '900']
display: 'swap' is the default and required
Local fonts use next/font/local

Third-Party Scripts — `next/script` Required

🟡 PERFORMANCE FLAG — Third-party script without next/script
Script: [url or description]

Required pattern:

import Script from 'next/script'

// Analytics, chat widgets, non-critical tools
<Script
  src="https://example.com/script.js"
  strategy="lazyOnload"
  onLoad={() => console.log('loaded')}
/>

// Tools needed after page interaction
<Script
  src="https://example.com/script.js"
  strategy="afterInteractive"
/>

// ⚠️ Only with explicit justification
<Script
  src="https://example.com/critical.js"
  strategy="beforeInteractive"
  // Justification: [required]
/>

Flag any script using strategy="beforeInteractive" — it blocks page render and must be explicitly justified.

`localStorage` / `sessionStorage` — No Sync Access on Render

🟡 PERFORMANCE FLAG — Synchronous storage access during render
localStorage/sessionStorage access during SSR causes hydration mismatch.

Required pattern:

// ❌ Causes SSR mismatch
const [value, setValue] = useState(localStorage.getItem('key'))

// ✓ Safe pattern — deferred to client
const [value, setValue] = useState<string | null>(null)

useEffect(() => {
  setValue(localStorage.getItem('key'))
}, [])

// ✓ Or use a hook that handles SSR safely
import { useLocalStorage } from '@/hooks/useLocalStorage'
const [value, setValue] = useLocalStorage('key', defaultValue)

Data Fetching — SWR or React Query, No Raw `useEffect`

🟡 PERFORMANCE FLAG — Raw useEffect fetch pattern detected
useEffect for data fetching causes:
- No caching (every mount re-fetches)
- No request deduplication
- Race conditions on fast navigation
- No background revalidation

Required pattern:

// ❌ Raw useEffect fetch
useEffect(() => {
  fetch('/api/trucks').then(r => r.json()).then(setTrucks)
}, [])

// ✓ SWR
import useSWR from 'swr'

const { data, error, isLoading } = useSWR('/api/trucks', fetcher, {
  revalidateOnFocus: false,
  dedupingInterval: 5000,
})

// ✓ React Query
import { useQuery } from '@tanstack/react-query'

const { data, isLoading, error } = useQuery({
  queryKey: ['trucks'],
  queryFn: fetchTrucks,
  staleTime: 5 * 60 * 1000, // 5 minutes
})

Server Components that fetch data directly do not need SWR/React Query — this rule applies to Client Components only.

LCP Element — Must Be Identified and Optimized

Before any page is considered complete:

⚡ LCP CHECK REQUIRED
Every page must have an identified LCP element before shipping.
Confirm:
  [ ] What is the LCP element? (image, heading, or text block)
  [ ] If image: uses <Image> with priority={true}
  [ ] If text: no render-blocking fonts or scripts delay its paint
  [ ] No Suspense boundary wraps the LCP element
  [ ] LCP element is server-rendered, not deferred to client

Imports — Tree Shaking Required

// ❌ Barrel import — pulls in entire library
import _ from 'lodash'
import * as Icons from 'lucide-react'

// ✓ Named import — tree-shakeable
import debounce from 'lodash/debounce'
import { ChevronRight, Search } from 'lucide-react'

// ❌ shadcn barrel (if applicable)
import { Button, Card, Input } from '@/components/ui'

// ✓ Direct import
import { Button } from '@/components/ui/button'

Performance Budget Summary — Pre-Code Checklist

Before writing any new page or component that has performance implications:

Bundle impact — will this push any route over 150kb gzipped?
Images — is <Image> used with explicit dimensions?
Fonts — is this adding a third font family?
Scripts — does any new script have a defined strategy?
LCP — is the LCP element identified and optimized?
Data fetching — is SWR or React Query used for client-side fetching?
Storage access — is localStorage/sessionStorage access deferred past render?

If any item is "unknown," flag it before writing code.

performance-budget— agent skill

Is performance-budget safe to install?

Performance Budget Skill

JavaScript Bundle Budget

Images — No Raw `<img>` Tags

Fonts — Maximum 2 Families, `next/font` Only

Third-Party Scripts — `next/script` Required

`localStorage` / `sessionStorage` — No Sync Access on Render

Data Fetching — SWR or React Query, No Raw `useEffect`

LCP Element — Must Be Identified and Optimized

Imports — Tree Shaking Required

Performance Budget Summary — Pre-Code Checklist

Audit the pieces. Scan the whole. Decide.

Is performance-budget safe to install?

Performance Budget Skill

JavaScript Bundle Budget

Images — No Raw <img> Tags

Fonts — Maximum 2 Families, next/font Only

Third-Party Scripts — next/script Required

localStorage / sessionStorage — No Sync Access on Render

Data Fetching — SWR or React Query, No Raw useEffect

LCP Element — Must Be Identified and Optimized

Imports — Tree Shaking Required

Performance Budget Summary — Pre-Code Checklist

Audit the pieces. Scan the whole. Decide.

Images — No Raw `<img>` Tags

Fonts — Maximum 2 Families, `next/font` Only

Third-Party Scripts — `next/script` Required

`localStorage` / `sessionStorage` — No Sync Access on Render

Data Fetching — SWR or React Query, No Raw `useEffect`