cursorrules

A set of Cursor rules for building front-end interfaces according to a specified 2026 UI/UX design system. It defines requirements for design classification, responsive layouts, themes, accessibility, states, images, and animations.

In plain words
What is it for?
Use it when planning or coding front-end pages and components, especially for mobile-first layouts, dark and light themes, async states, interactive controls, and accessible images.
Why use it?
It gives an agent consistent guardrails for implementing interfaces and checking common usability, accessibility, and responsive-design details.

Cursor rule for Cursor

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 rules/dev-lou/pixelpilot/cursorrules
Clone the repo
git clone --depth 1 https://github.com/dev-lou/PixelPilot

Made for: Cursor.

Per session 559 This file is loaded in full into every session.
When invoked 559 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.00559 $0.00559
Opus 5 $0.00280 $0.00280
Sonnet 5 $0.00112 $0.00112
Haiku 4.5 $0.00056 $0.00056

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

Security

Grade A, and why

cursorrules 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.

cursor/.cursorrules · 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 — Cursor Rules (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 rule files from .cursor/rules/ based on the task
  2. Read those files
  3. Base your implementation on the rules 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 RULE FILES (in .cursor/rules/)

File Load when
uiux-tokens.md Always first
uiux-components.md Every project
uiux-a11y.md Every page
uiux-forms.md Any form
uiux-motion.md Any animation
reasoning.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 · 559 tokens per session scan A 47778a8e0619

Subscribe to this mod's changes

cursorrules is a cursor rule published in the GitHub repository dev-lou/PixelPilot (2 stars, last pushed 4mo ago), licensed MIT. It adds 559 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 cursor rules, from other repositories

quality

Code quality checklist and anti-patterns to avoid before shipping.

chihebnabil/lovable-boilerplate · 11 tokens

design-animation-rules

Taste is trained, not innate. Reverse engineer animations. Inspect interactions. Unseen details compound — a thousand barely audible voices all singing in tune. Beauty is leverage.

Kevin-Liu-01/Sigil-UI · 1,372 tokens

network-troubleshoot

Systematic, safety-first network troubleshooting for developers.

CacinieP/network-troubleshoot-skill · 0 tokens

RULE

Network troubleshooting — systematic diagnosis and resolution for connectivity, DNS, proxy, SSL, HTTP errors.

CacinieP/network-troubleshoot-skill · 682 tokens

code-organization

Assets/ ├── !Project/ # Main project content (! keeps it at top) │ ├── Art/ │ │ ├── Materials/ │ │ ├── Models/ │ │ ├── Textures/ │ │ └── Animations/ │ ├── Audio/ │ │ ├── Music/ │ │ ├── SFX/ │ │ └── Mixers/ │ ├── Prefabs/ │ │ ├── Characters/ │ │ ├── Environment/ │ │ ├── UI/ │ │ └── Effects/ │ ├── Scenes/ │ │ ├──…

Common-ka/ai-agent-unity-rules · 1,948 tokens

react-rendering-performance

React rendering and DOM performance patterns for animations, SVG optimization, CSS content-visibility, conditional rendering, and useTransition loading states. Use when working with animations, SVG elements, long lists, show/hide toggles, or loading state management.

alonsarias/agent-rules · 0 tokens