What every AI agent (Claude, Copilot, Cursor…) must follow when it builds or changes an interface, a README or an icon in a project using Pelote. These rules override the agent's default habits.

Icons

• Never generate, draw or invent an icon, even a simple one (settings, search, close, menu, arrow, bin…). No hand-written <path>, no "inspired by" SVG, no emoji instead.
• Always use an existing Google Material Symbols icon: Rounded for M3E and Plaza, Sharp for Chrome.
  • Web: the Google Fonts font with icon_names= and <span class="ms">settings</span>. If an SVG file is needed (favicon, app icon, README image), download it from the official Material Symbols repository, without editing it.
  • Flutter: Icons.settings_rounded (and _sharp in Chrome). Compose: Icons.Rounded.Settings.
• Look up the exact name on fonts.google.com/icons. If no icon matches, pick the closest one and say so, instead of creating one.
• App icons and favicons follow the AppIcon spec: a filled Material Symbol on cookie9, nothing else.

Code

• Reusable components first. Before writing a component, check whether one already exists (in the app or in this system) and reuse or extend it through props, rather than duplicating markup or styling.
• A component must be reusable elsewhere: it receives its data through props (or parameters in Flutter), does not reach for global screen state itself, and does not embed copy or colour specific to one page. Variants go through props (variant, size), not copies.
• One function, one responsibility. A function does one thing and is named after it. Separate data fetching, transformation and display. A function that grows gets split.
• Do not overload the code: no logic duplicated between two screens (factor it into a composable, a hook or a shared utility), no copy-pasted styles (use the system classes and tokens), no abstraction invented for a single use.
• The system helpers (Pelote.SHAPES, the .st state layer, the .btn, .chip, .card classes…) are the foundation: consume them, do not recreate them.

Web: PWA and Lighthouse

• Every delivered website or web app is a complete PWA and removes the blue tap highlight (see UX rules, "Mobile web and PWA").
• Lighthouse at 100 on SEO, Best practices, Accessibility and Agentic search, on mobile and desktop. Performance does not have to be 100, but must be as close as possible (WebP / AVIF images at the right size, subset fonts with font-display: swap, split code, nothing blocking rendering).
• Concretely, without exception: <title> and meta description per page, lang on <html>, canonical URLs, robots.txt and sitemap.xml, structured data where it makes sense, contrast and accessible names on every control, alt on every image, HTTPS, no console errors, content readable without JavaScript on the server or prerendered (the portfolio prerenders its pages).
• Run Lighthouse before shipping and fix anything that takes one of these categories below 100.

Layout

• Navigation: bottom bar on phone, left rail on tablet and desktop, two panes on an open fold (Layout section).
• On desktop, never dead space: an overview becomes a full-width bento (tiles of different sizes), content that is read stays bounded with a useful pane (widgets, detail, preview) or centred. Never identical cards stretched.

Motion

• Never write "Loading…", "Chargement…" or "Please wait" as the only feedback: always a system loader (Loader spec), a skeleton for content.
• Idle animations: decor only, one per area, slow, paused off screen, stopped by prefers-reduced-motion (IdleMotion spec).

Colours and shapes

• Always ship an appearance setting: light, dark or system mode, a theme colour of your choice, and on Android the Material You option (wallpaper colours), on by default on Android 12+.

• Always go through M3 roles (primary, secc, sc…), never a hard-coded colour, including in the Plaza and Chrome variants.

• Shapes: only the 26 shapes in Pelote.SHAPES. Do not recreate a shape from a formula, do not use the excluded shapes (bursts, pixel, heart, puffy, flower).

• Statuses: ok, warn, bad, always with a word or an icon.

Text

• Every delivered interface is at least in French and English, with no hard-coded text, following the localisation rules in UX rules (buttons without fixed width that stack, no truncated text, formats through Intl).

• In a card, no short element alone on its line if it fits elsewhere: no useless blank space.

• App language, sentence case, action verbs on buttons.

• Never an em dash, no emoji, no exclamation mark.

README

• Follow the GitHub README section: light and dark banner, badges, numbered sections, brand footer always present and clickable (beedywool.com on current projects).
• Check every visual on a white background and on #0d1117 before shipping.

When in doubt

Reuse an existing component or screen from this system rather than inventing one. Report what is missing instead of improvising it.