PixelPilot copilot-instructions.md

A set of GitHub Copilot instructions for building web interfaces according to a defined 2026 design system. It lists required design, accessibility, responsive-layout, animation, image, theme, and interaction rules.

In plain words
What is it for?
Use it when planning or implementing front-end pages and components, particularly when the project also contains more specific instruction files in .github/instructions/.
Why use it?
It keeps interface work consistent and prevents common problems such as missing loading states, inaccessible images, poor mobile layouts, and unsupported browser interactions.

Instructions file for GitHub Copilot

Install

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.

agentmods
npx agentmods add instructions/dev-lou/pixelpilot/copilot-instructions
Clone the repo
git clone --depth 1 https://github.com/dev-lou/PixelPilot

Made for: GitHub Copilot.

Per session 569 This file is loaded in full into every session.
When invoked 569 The same file — it is already loaded in full.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00569 $0.00569
Opus 5 $0.00284 $0.00284
Sonnet 5 $0.00114 $0.00114
Haiku 4.5 $0.00057 $0.00057

Measured yesterday against content hash 69dd744586c6, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

PixelPilot copilot-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.

vscode/.github/copilot-instructions.md · 52 lines

How it starts

The opening of the file, as written. The whole thing — 52 lines — stays where its author put it; the contents beside it link to each section on GitHub.

UI/UX 2026 — GitHub Copilot Instructions (v11)

You are a front-end expert following the UI/UX 2026 design system.

Proactive Reading Rule

Before planning or implementing any UI/UX task:

  1. Identify relevant instruction files from .github/instructions/ based on the task
  2. Read those files
  3. Base your implementation on the instructions read

NON-NEGOTIABLE LAWS (always enforced)

 1. Classify design language FIRST — before any code.
 2. Brand tokens in :root once — never override per-page or inline.
 3. Never window.alert/confirm/prompt — SweetAlert2 or custom toast only.
 4. No grey placeholder boxes — Picsum/Unsplash URLs, context-matched.
 5. No localhost in any user-visible text or URL.
 6. Dark + light mode on every project — [data-theme] on <html>.
 7. Mobile-first always — design at 390px, expand outward.
 8. transition: all NEVER — specify only changed properties.
 9. Every <img>: width, height, loading, alt — no exceptions.
10. Every async state has a skeleton — never blank.
11. prefers-reduced-motion respected in all animations.
12. Only animate transform and opacity (GPU S-Tier).
13. Every interactive component handles all 10 states:
    default → hover → focus → active → loading → disabled → error → success → empty → busy
14. Never native <select>, native date input — always custom.
15. Image grids mix shapes — never all-square.
16. Min contrast: 4.5:1 body, 3:1 large text.
17. Every page has a footer with role="contentinfo".
18. All spacing on the 8px scale — 4,8,12,16,24,32,48,64,80,96,120,160px only.
19. Every empty data state shows an empty-state component.
20. Images: <picture> + AVIF source + WebP fallback.

DESIGN LANGUAGE

[ FILL IN: Luxury / Premium Modern / Minimalist / Expressive / Editorial / Warm & Human / Technical ]

KEY INSTRUCTION FILES (in .github/instructions/)

File Load when
uiux-tokens.instructions.md Always first
uiux-components.instructions.md Every project
uiux-a11y.instructions.md Every page
uiux-forms.instructions.md Any form
uiux-motion.instructions.md Any animation
reasoning.instructions.md Complex tasks

Read the full file on GitHub · 52 lines

Changes

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.

  1. yesterday First seen · 52 lines · 569 tokens per session scan A 69dd744586c6

Subscribe to this mod's changes

PixelPilot copilot-instructions.md is an instructions file published in the GitHub repository dev-lou/PixelPilot (2 stars, last pushed 4mo ago), licensed MIT. It adds 569 tokens to every session, about $0.0028 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.

Related

Other instructions, from other repositories