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-content-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.01652 | $0.01652 |
| Opus 5 | $0.00826 | $0.00826 |
| Sonnet 5 | $0.00330 | $0.00330 |
| Haiku 4.5 | $0.00165 | $0.00165 |
Grade A, and why
PixelPilot uiux-content-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 2d 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 — 264 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI/UX Content Components 2026
Tooltips, popovers, carousels, video players, lightboxes, avatars, ratings, progress bars, steppers, and code blocks.
1. TOOLTIP (Delay & Positioning)
<button class="btn btn--icon" data-tooltip="Search (⌘K)">
<i data-lucide="search"></i>
</button>
.tooltip {
position: absolute;
background: var(--text);
color: var(--bg);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
pointer-events: none;
opacity: 0;
transition: opacity var(--dur-micro) var(--ease-out);
z-index: 1000;
}
.tooltip.visible { opacity: 1; }
2. POPOVER (Rich Content & Arrow)
<div class="popover" role="dialog" aria-modal="true">
<div class="popover__content">
<h3>Notifications</h3>
<p>You have 3 new messages.</p>
</div>
<div class="popover__arrow"></div>
</div>
.popover {
position: absolute;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: var(--space-4);
z-index: 1000;
}
.popover__arrow {
position: absolute;
width: 8px; height: 8px;
background: var(--surface);
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
transform: rotate(45deg);
top: -5px; left: 50%;
margin-left: -4px;
}
3. CAROUSEL / SLIDER (Swiper Usage)
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
.swiper-slide {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-8);
display: flex;
align-items: center;
justify-content: center;
}
.swiper-button-next, .swiper-button-prev {
color: var(--accent);
}
4. VIDEO PLAYER WRAPPER (Custom Controls)
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.
- 2d ago First seen · 264 lines · 1,652 tokens per session scan A 138614cb5f46
PixelPilot uiux-content-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 1,652 tokens to every session, about $0.0083 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.