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-pwa.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-pwa)<a href="https://agentmods.dev/instructions/dev-lou/pixelpilot/uiux-pwa"><img src="https://agentmods.dev/badge/instructions/dev-lou/pixelpilot/uiux-pwa.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.00913 | $0.00913 |
| Opus 5 | $0.00456 | $0.00456 |
| Sonnet 5 | $0.00183 | $0.00183 |
| Haiku 4.5 | $0.00091 | $0.00091 |
Grade A, and why
PixelPilot uiux-pwa.instructions.md 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 4d 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.
return response || fetch(e.request).catch(() => caches.match('/offline.html')); How it starts
The opening of the file, as written. The whole thing — 145 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI/UX Progressive Web Apps (PWA) 2026
Service workers, manifest.json, app icon generation, and offline fallback strategies for modern web apps.
1. MANIFEST.JSON (Icons, Theme, Display)
{
"name": "OpenCode Premium UI/UX",
"short_name": "OpenCode",
"description": "The definitive UI/UX design system for 2026.",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#0066FF",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
2. SERVICE WORKER (Basic Offline Fallback)
// sw.js — Service Worker
const CACHE_NAME = 'opencode-v1';
const ASSETS = [
'/',
'/index.html',
'/styles/tokens.css',
'/styles/globals.css',
'/scripts/main.js',
'/offline.html'
];
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS))
);
});
self.addEventListener('fetch', (e) => {
e.respondWith(
caches.match(e.request).then(response => {
return response || fetch(e.request).catch(() => caches.match('/offline.html'));
})
);
});
3. SERVICE WORKER REGISTRATION
// Register Service Worker in main.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('SW Registered', reg))
.catch(err => console.log('SW Registration Failed', err));
});
}
4. APP ICON GENERATION (Touch Icons, Favicon)
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<!-- Favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<!-- Safari Pinned Tab -->
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#0066FF">
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.
- 4d ago First seen · 145 lines · 913 tokens per session scan A 4e8d85eabc6b
PixelPilot uiux-pwa.instructions.md is an instructions file published in the GitHub repository dev-lou/PixelPilot (2 stars, last pushed 5mo ago), licensed MIT. It adds 913 tokens to every session, about $0.0046 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-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.
plan-forge frontend.instructions.md
TypeScript frontend patterns — React, component architecture, state management.
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.
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).
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).