Borrowing it
Nothing to install: this file belongs to dev-lou/PixelPilot. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/dev-lou/PixelPilot/main/vscode/.github/instructions/uiux-performance.instructions.mdgit clone --depth 1 https://github.com/dev-lou/PixelPilotWrote 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/instructions/dev-lou/pixelpilot/uiux-performance)<a href="https://agentmods.dev/instructions/dev-lou/pixelpilot/uiux-performance"><img src="https://agentmods.dev/badge/instructions/dev-lou/pixelpilot/uiux-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.05469 | $0.05469 |
| Opus 5 | $0.02735 | $0.02735 |
| Sonnet 5 | $0.01094 | $0.01094 |
| Haiku 4.5 | $0.00547 | $0.00547 |
Grade A, and why
PixelPilot uiux-performance.instructions.md 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 3d 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 — 663 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI/UX Performance 2026
Core Web Vitals thresholds, font loading, resource hints, image format decisions, Lighthouse CI, bundle budgets. Performance is UX — slow = broken.
CORE WEB VITALS — 2026 Thresholds
Google's ranking signals. Measure all three on real devices, not just desktop.
| Metric | Good | Needs Work | Poor | What it measures |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2.5s | 2.5–4.0s | > 4.0s | When main content loads |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0.1–0.25 | > 0.25 | Visual stability (no jumps) |
| INP (Interaction to Next Paint) | ≤ 200ms | 200–500ms | > 500ms | Responsiveness to interaction |
INP replaced FID in March 2024. If your docs still say FID, they're outdated.
What Causes Each Metric to Fail
LCP fails when:
- Hero image has no
fetchpriority="high"orloading="eager" - Render-blocking CSS/JS delays the paint
- Server response time (TTFB) > 800ms
- Hero is a CSS
background-image(browser can't preload it) - Web font blocks text rendering (no
font-display: swap)
CLS fails when:
- Images have no
width/heightattributes (browser doesn't reserve space) - Web fonts swap and cause layout reflow
- Ads, embeds, or iframes load without reserved dimensions
- Dynamic content injected above existing content
INP fails when:
- Long JavaScript tasks (> 50ms) block the main thread
- Event handlers do heavy synchronous work
- Too many DOM nodes (> 1500 is a warning)
- React re-renders entire subtrees on every interaction
FONT LOADING STRATEGY
The Performance Stack (apply in this order)
<!-- 1. Preconnect — tells browser to open connection ASAP -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<!-- 2. Preload the most critical font file directly -->
<!-- Find the actual .woff2 URL from the font CSS, then preload it -->
<link rel="preload"
href="https://fonts.bunny.net/plus-jakarta-sans/files/plus-jakarta-sans-latin-500-normal.woff2"
as="font" type="font/woff2" crossorigin>
<!-- 3. Load font CSS non-render-blocking (media trick) -->
<link rel="stylesheet"
href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700&display=swap"
media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet"
href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700&display=swap">
</noscript>
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.
- 3d ago First seen · 663 lines · 5,469 tokens per session scan A c3a30e88c7cc
PixelPilot uiux-performance.instructions.md is an instructions file published in the GitHub repository dev-lou/PixelPilot (2 stars, last pushed 5mo ago), licensed MIT. It adds 5,469 tokens to every session, about $0.0273 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 instructions, from other repositories
plan-forge blazor-fluent-ui.instructions.md
Blazor Server + Microsoft Fluent UI patterns — component layering, state, lifecycle, accessibility. Auto-loads when editing .razor / .razor.cs files.
codex AGENTS.md
AGENTS.md instructions for openai/codex, covering rust/codex-rs, the codex-core crate, code review rules, crate api surface and model visible context.
vscode buildNext.instructions.md
Working notes and architecture documentation for the new esbuild-based build system in build/next. Use when making changes to the new build pipeline (transpile/bundle commands, NLS plugin, source-map handling, resource copying, or self-hosting watch tasks).
next.js AGENTS.md
AGENTS.md instructions for vercel/next.js, covering next.js development guide, codebase structure, monorepo overview, core package: packages/next and other important packages.
langchain AGENTS.md
AGENTS.md instructions for langchain-ai/langchain, covering global development guidelines for the langchain monorepo, corridor security analysis, project architecture and context, monorepo structure and development tools & commands.
vscode oss-third-party-notices.instructions.md
Instructions for microsoft/vscode, covering vs code oss third-party-notices pipeline, architecture, pipeline flow in ci, applying the notice (cutover) and fallback chain (never fail the build).