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 agentmods add instructions/dev-lou/pixelpilot/uiux-componentsgit clone --depth 1 https://github.com/dev-lou/PixelPilotWhat 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 | $0.04556 | $0.04556 |
| Opus 5 | $0.02278 | $0.02278 |
| Sonnet 5 | $0.00911 | $0.00911 |
| Haiku 4.5 | $0.00456 | $0.00456 |
Grade A, and why
PixelPilot uiux-components.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 yesterday.
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 — 515 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI/UX Components, Alerts, Nav & Grid
Dark mode setup, global CSS reset, CDN stack, SweetAlert2 themes, spacing, responsive navigation, grid layouts.
STEP 3 — Dark/Light Mode System
Anti-FOWT (Flash of Wrong Theme) — ALWAYS inline in <head>
<script>
(function(){
var t=localStorage.getItem('theme')||
(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');
document.documentElement.setAttribute('data-theme',t);
})();
</script>
Toggle JS (universal, all stacks)
const applyTheme = t => {
document.documentElement.setAttribute('data-theme', t);
localStorage.setItem('theme', t);
};
const toggleTheme = () => {
applyTheme(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
};
// Init
applyTheme(localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
// System change listener
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (!localStorage.getItem('theme')) applyTheme(e.matches ? 'dark' : 'light');
});
React / Next.js Theme Hook
// hooks/useTheme.js — import in _app.js / layout.jsx
import { useEffect, useState } from 'react';
export function useTheme() {
const [theme, setTheme] = useState('light');
useEffect(() => {
const saved = localStorage.getItem('theme') ||
(matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
setTheme(saved);
document.documentElement.setAttribute('data-theme', saved);
}, []);
const toggle = () => {
const next = theme === 'dark' ? 'light' : 'dark';
setTheme(next);
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
};
return { theme, toggle };
}
Toggle Button Styles by Language
/* Luxury — minimal text toggle */
.theme-toggle-luxury {
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
border: 1px solid var(--border); padding: 8px 16px; background: none;
cursor: pointer; color: var(--text); transition: var(--transition-slow);
}
/* Premium / Technical — icon button */
.theme-toggle-icon {
width: 40px; height: 40px; border-radius: var(--radius-md);
border: 1px solid var(--border); background: var(--surface);
display: grid; place-items: center; cursor: pointer;
transition: var(--transition-base); color: var(--text);
}
.theme-toggle-icon:hover { background: var(--surface-up); }
/* Warm — pill toggle with sliding circle */
.theme-toggle-pill {
width: 52px; height: 28px; border-radius: var(--radius-full);
background: var(--surface-up); border: 1px solid var(--border);
position: relative; cursor: pointer; transition: var(--transition-spring);
}
.theme-toggle-pill::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 20px; height: 20px; border-radius: 50%;
background: var(--accent); transition: var(--transition-spring);
}
[data-theme="dark"] .theme-toggle-pill::after { transform: translateX(24px); }
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.
- yesterday First seen · 515 lines · 4,556 tokens per session scan A 8e95411962b7
PixelPilot uiux-components.instructions.md is an instructions file published in the GitHub repository dev-lou/PixelPilot (2 stars, last pushed 4mo ago), licensed MIT. It adds 4,556 tokens to every session, about $0.0228 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 instructions, from other repositories
arai CLAUDE.md
Instructions for taniwhaai/arai, covering claude.md — arai, commands, architecture, prompt-collector module (src/promptcollector.rs) and extending the match pipeline.
healthcare-agents AGENTS.md
Instructions for ajhcs/healthcare-agents, covering healthcare agents repository instructions, repository map, git workflow and self-improvement loop.
arai AGENTS.md
Instructions for taniwhaai/arai, covering agents.md — arai, core discipline (non-negotiable), taniwha / subagent rules, work style and tool usage.
shenzjd-skills CLAUDE.md
Claude Code instructions for wu529778790/shenzjd-skills, covering claude.md, project overview, commands, a single skill's unit test and architecture.
ui-ux-design-pro-skill CLAUDE.md
Instructions for saifyxpro/ui-ux-design-pro-skill, covering project overview, cli commands, full design system generation (markdown output), search across all databases (sub-50ms) and audit ui code quality.
syncai copilot-instructions.md
Instructions for dmtrkzntsv/syncai, covering claude.md, build & run, architecture, lifecycle and identify is the routing decision.