canon

Use when defining or auditing a product's written voice — the consistent personality across all UI copy. Covers voice vs tone, voice attribute definition, do/don't tables, and how to keep AI-generated copy on-brand. Trigger when the user mentions brand voice, tone of voice, writing style guide, copy guidelines, or product personality.

Use when auditing or reducing JavaScript and CSS bundle sizes, setting performance budgets, choosing lighter alternatives to heavy libraries, configuring tree shaking, code splitting, and lazy loading. Trigger when the user mentions bundle size, JavaScript size, tree shaking, code splitting, lazy loading, or performance budget.

Use when designing or auditing for color vision deficiency — ensuring that color is never the only visual signal, checking charts and status indicators, picking colorblind-safe palettes, and testing against deuteranopia, protanopia, and tritanopia simulations. Trigger when the user mentions color blindness, color vision, CVD, deuteranopia, protanopia, accessibility color, or color-only signal.

Use when planning content hierarchy, information density, content-first design, microcopy systems, or editorial patterns. Covers the content-before-design principle, content inventory, progressive disclosure, scannability, and content governance. Trigger when the user mentions content strategy, content hierarchy, information architecture, microcopy, or editorial design.

Use when designing or auditing cursor behavior — matching cursor shape to affordance, custom cursors, drag cursors, resize cursors, and the hover+cursor pairing rule. Trigger when the user mentions cursor, pointer, mouse cursor, drag cursor, or resize handle.

Use when designing, auditing, or implementing dark mode. Covers lightness inversion (not hue shift), elevation via lightness not shadow, surface stacking, contrast rechecking, and the prefers-color-scheme media query. Trigger when the user mentions dark mode, dark theme, night mode, theme toggle, or color scheme.

Use when designing dashboards, metrics displays, KPI widgets, sparklines, progress indicators, or any data-dense UI that isn't a standard chart. Covers the big-number pattern, sparklines, progress bars, gauges, metric comparison, and dashboard composition. Trigger when the user mentions dashboard, KPI, metric, progress bar, gauge, sparkline, or data display.

Use when designing or implementing density modes (compact, default, comfortable), adjusting spacing without changing font sizes, supporting power users who need denser UIs, or adapting layouts for data-heavy vs content-heavy contexts. Trigger when the user mentions density, compact mode, comfortable spacing, or information density.

Use when designing error states, error messages, recovery flows, fallback UIs, error boundaries, retry logic, or offline handling. Covers the three-part error message anatomy, inline vs toast vs page errors, error boundaries in React, optimistic-UI rollback, and the retry with backoff pattern. Trigger when the user mentions error, error handling, error state, fallback, retry, offline, or error boundary.

Use when implementing favicons, touch icons, web app icons, or browser tab icons — the full set of sizes and formats needed for modern browsers, iOS home screen, Android, and PWA manifests. Trigger when the user mentions favicon, icon, apple-touch-icon, manifest icons, or browser tab icon.

Use when designing or auditing focus indicators — visible focus rings, focus-visible vs focus, custom focus styles, contrast requirements, and focus management during route changes. Trigger when the user mentions focus ring, focus indicator, focus-visible, outline, focus style, or focus management.

Use when selecting, loading, or optimizing web fonts — font-display strategy, preloading, subsetting, variable fonts, FOUT/FOIT handling, and limiting font file count. Trigger when the user mentions web fonts, font loading, font-display, @font-face, Google Fonts, preload fonts, FOUT, or FOIT.

Use when designing or implementing CSS Grid or Flexbox layouts, choosing between the two, building responsive grids, dashboard layouts, or card grids. Covers the 1D vs 2D decision, grid template areas, auto-fill vs auto-fit, subgrid, and alignment. Trigger when the user mentions grid, CSS grid, flexbox, layout grid, columns, or responsive grid.

Use when designing or implementing internationalization — string externalization, locale-aware formatting, pluralization, text expansion, concatenation avoidance, and layout adaptation for multiple languages. Trigger when the user mentions i18n, internationalization, localization, translation, locale, or multi-language.

Use when designing or selecting illustrations for empty states, onboarding, error pages, marketing, or feature explanations. Covers illustration vs icon, style consistency, sizing, accessibility, and when illustrations help vs clutter. Trigger when the user mentions illustration, spot illustration, hero image, empty state art, or decorative graphic.

Use when optimizing images for the web — format selection (AVIF, WebP, PNG, SVG), responsive images with srcset, lazy loading, aspect ratio preservation, LCP image optimization, and image CDN usage. Trigger when the user mentions image optimization, srcset, lazy loading images, AVIF, WebP, image format, or responsive images.

Use when organizing site structure, navigation hierarchy, page grouping, URL schemas, or user flow maps. Covers card sorting results, tree testing, flat vs deep hierarchy, and labeling conventions. Trigger when the user mentions IA, information architecture, sitemap, page structure, navigation planning, or URL structure.

Use when designing or auditing keyboard navigation, focus management, shortcut keys, or keyboard-only workflows. Covers tab order, arrow keys within composite widgets, skip links, shortcut conventions, and ensuring every interaction works without a mouse. Trigger when the user mentions keyboard, tab order, shortcuts, hotkeys, focus order, or keyboard navigation.

Use when implementing Open Graph tags, Twitter Card tags, and social sharing metadata — the tags that control how URLs appear when shared on social media, messaging apps, and link previews. Trigger when the user mentions OG tags, Open Graph, Twitter card, social sharing, link preview, or og:image.

Use when designing small, functional animations tied to user actions — toggle switches, like buttons, checkbox ticks, pull-to-refresh, swipe-to-dismiss. Covers the trigger-feedback loop, animation budgets, spring physics, and when micro-interactions become distractions. Trigger when the user mentions micro-interaction, toggle animation, feedback animation, or interaction detail.

Use when designing first-run experiences, product tours, coachmarks, progressive onboarding, or empty-state-as-onboarding. Covers the principles of gradual engagement, contextual hints over upfront tutorials, and when to use tours vs inline guidance vs empty states. Trigger when the user mentions onboarding, first-run, product tour, coachmark, walkthrough, or getting started.

Use when designing or implementing right-to-left (RTL) layout support for Arabic, Hebrew, Farsi, Urdu, and other RTL scripts. Covers logical properties, mirroring rules, bidirectional text, icon direction, and what should NOT flip. Trigger when the user mentions RTL, right-to-left, Arabic, Hebrew, bidi, or dir="rtl".

Use when designing or auditing for screen reader compatibility — semantic HTML, ARIA roles and states, live regions, announcements, reading order, and hidden content. Trigger when the user mentions screen reader, VoiceOver, NVDA, JAWS, accessibility tree, ARIA, or assistive technology.

Use when auditing or implementing technical SEO — semantic HTML, meta tags, structured data, canonical URLs, sitemap, robots.txt, page speed as a ranking factor, and accessible content. Trigger when the user mentions SEO, search engine, meta tags, structured data, sitemap, or crawlability.

Use when designing or auditing accessibility, ARIA, semantic HTML, screen reader support, keyboard navigation, color contrast, motion preferences, or WCAG compliance. Trigger when the user mentions a11y, accessibility, ARIA, screen reader, WCAG, keyboard, focus, or asks to make something accessible.

Use when designing, auditing, or refactoring accordion components, collapsible sections, disclosure widgets, FAQ sections, or expand/collapse patterns. Covers when accordions help versus hurt comprehension, single vs multi-expand behavior, icon conventions, keyboard behavior, semantic markup (`<details>` vs ARIA), animation, and accessibility. Trigger when the user mentions accordion, collapsible, expandable, disclosure, FAQ, or expand/collapse.

Use when designing, auditing, or refactoring avatars, profile images, user pictures, avatar stacks, initials fallbacks, or any user-identifying image. Covers sizing, shape (circle vs square), initials logic, fallback color assignment, alt text, placement conventions, stacked avatar overflow, and the "anonymous user" state. Trigger when the user mentions avatar, profile image, user picture, initials, profile photo, or avatar stack.

Use when designing, auditing, or refactoring badges, pills, chips, tags, status indicators, count badges, notification dots, or any small piece of UI metadata. Covers when a badge is appropriate, sizing, color coding for status, count formatting, the "dot vs number" decision, accessibility for notifications, and the difference between badges, chips, and tags. Trigger when the user mentions badge, pill, chip, tag, label, status pill, count, or notification dot.

Use when designing, auditing, or refactoring buttons, CTAs, icon buttons, split buttons, or any clickable action affordance. Covers hierarchy, sizing, states, disabled-state handling, loading behavior, keyboard behavior, and button vs link distinction. Trigger when the user mentions button, CTA, action, click, submit, or primary/secondary/tertiary.

Use when designing, auditing, or refactoring card components, card grids, item tiles, product cards, or any bounded content container. Covers when a card is appropriate, internal layout, padding, shadows vs borders, interactive cards, hover states, image ratios, content hierarchy, and card grid spacing. Trigger when the user mentions card, tile, item, product card, grid, or thumbnail.

Use when designing, auditing, or refactoring charts, graphs, data visualizations, dashboards, sparklines, or any visual representation of data. Covers chart-type selection, color, axes, labels, tooltips, accessibility, animation, and anti-patterns like 3D pies and dual-axis charts. Trigger when the user mentions chart, graph, visualization, dashboard, bar chart, line chart, pie chart, or sparkline.

Use when designing or auditing color, contrast, theming, or dark mode in any interface. Covers OKLCH color space, semantic tokens, tinted neutrals, WCAG contrast requirements, accessible color pairing, dark mode construction, and the specific color anti-patterns AI agents fall into. Trigger when the user mentions colors, palette, theme, dark mode, contrast, or accessibility of color.

Use when designing or auditing shadows, elevation, layering, z-index, borders, dividers, or any visual depth in an interface. Covers shadow construction, elevation systems, when to use shadows vs borders, and the most common depth anti-patterns. Trigger when the user mentions shadow, elevation, depth, layer, z-index, border, divider, or visual hierarchy via depth.

Use when designing or auditing forms, inputs, validation, error messages, labels, submit flows, or any data entry interface. Covers field structure, label placement, validation timing, error UX, autocomplete, multi-step flows, and the most common form anti-patterns. Trigger when the user mentions form, input, label, validation, error, submit, signup, login, or checkout.

Use when designing, auditing, or refactoring iconography, icon libraries, emoji usage, or icon-only buttons. Covers icon sizing, stroke weight, grid alignment, meaning ambiguity, accessibility, when to pair icons with labels, and the rules for using SVG vs font vs emoji. Trigger when the user mentions icon, glyph, emoji, SVG, pictogram, or icon button.

Use when designing or auditing interactive states (hover, focus, active, disabled, loading), focus management, keyboard navigation, click targets, drag-and-drop, or any user input handling. Trigger when the user mentions states, focus, hover, keyboard, interaction, click, tap, or fixing how something responds.

Use when designing, auditing, or refactoring menus, dropdowns, select menus, combobox, context menus, kebab menus, action menus, or any list of actions triggered by a button. Covers the WAI-ARIA menu pattern, when to use menu vs listbox vs combobox, keyboard behavior, positioning, nesting, and the most common menu-as-navigation anti-pattern. Trigger when the user mentions menu, dropdown, action menu, kebab, overflow menu, select, combobox, or context menu.

Use when designing, auditing, or refactoring modal dialogs, alert dialogs, confirmation dialogs, drawers, popovers, sheets, or any overlay pattern. Covers when to use a modal vs page vs inline, focus trap, escape behavior, scroll locking, sizing, the dialog element, and modal stacking. Trigger when the user mentions modal, dialog, popup, drawer, sheet, overlay, or confirm.

Use when designing or auditing animation, transitions, micro-interactions, or motion in any interface. Covers easing curves, duration ranges, staggering, choreography rules, prefers-reduced-motion handling, performance, and motion anti-patterns. Trigger when the user mentions animation, transition, motion, easing, hover effect, page transition, or asks to add or fix animation.

Use when designing, auditing, or refactoring navigation — top bars, sidebars, breadcrumbs, footer nav, mobile menus, tab bars, or any way-finding element. Covers information architecture, active state, keyboard navigation, skip links, mobile patterns, and the sidebar vs top-bar decision. Trigger when the user mentions nav, navbar, sidebar, menu, breadcrumb, hamburger, or header.