Agent exports

Static context files for LLM agents that need to choose better UI/UX patterns before generating code. These files are generated from validated pattern data during the build.

298 complete patterns exported. 0 stub entries excluded.

Pattern Guidance

Use before code generation when an agent needs pattern contracts and common mistakes.

Pattern: Accordion
Use when: Choose accordion when multiple related page sections can be independently shown or hidden without changing route, page context, or selected mode.
Must include: All collapsed state with every section title visible.; One section expanded state with button and controlled panel synchronized.
Avoid: Using divs or links as section toggles without button semantics or expanded state.

Pattern: Account creation
Use when: Choose account creation when a persistent account is required for repeated access, saved data, account management, security, authorization, legal accountability, or returning to drafts.
Must include: Need-for-account state explaining why an account is required or beneficial at this point.; New-account entry state with clear identifier and new credential labels.
Avoid: Forcing accounts before users can evaluate a service or complete a one-off transaction.

Pattern: Action menu
Use when: Choose an action menu when commands are contextual to one object, selected set, resource, row, card, or local page surface.
Must include: Closed trigger or contextual entry point with resource scope.; Open menu with accessible name that includes the object or selection scope.
Avoid: Treating the action menu as a junk drawer for every command that does not fit elsewhere.

Pattern: Action sheet
Use when: Choose action sheet when an intentional user action needs a small set of immediate choices related to the current object, draft, page, document, or selected item.
Must include: Resting state with an initiating control or task context.; Opening state that ties the sheet to the action the user just invoked.
Avoid: Showing an action sheet before the user starts an action.

Open full Markdown

Decision Guide

Use when the agent must choose between patterns from task risk and state requirements.

Before generating UI:
1. Identify user job, consequence severity, reversibility, platform, and interruption cost.
2. Choose the pattern whose required states and interaction contract match that context.
3. Reject patterns whose avoid-when rules or common misuses match the current flow.
4. Generate the required empty, loading, error, disabled, keyboard, and recovery states.

Open full Markdown

Anti-pattern Checklist

Use after generation or during review to find known interaction failures and safer replacements.

Anti-pattern: AI agent acts without approval
Detect: The agent can call tools, send external messages, spend money, issue refunds, change access, update customer records, deploy code, delete data, submit forms, publish content, or trigger downstream workflows.
Replace with: Inventory all agent tools and mark read-only, draft-only, reversible, externally visible, money-moving, access-changing, destructive, deployment, publication, and customer-impact steps.
Review: Which agent steps are read-only, draft-only, reversible, externally visible, destructive, money-moving, access-changing, or customer-impacting?

Anti-pattern: AI answer without sources
Detect: The answer may be generated from web search, file search, enterprise knowledge sources, selected documents, uploaded files, chat history, model prior knowledge, tool outputs, or no retrieval at all.
Replace with: Track answer provenance as structured state: source mode, source scope, retrieval status, used evidence, unsupported claims, permissions, freshness, and no-source reason.
Review: Which claims in this answer require evidence before users act?

Anti-pattern: AI confidence shown as fake precision
Detect: The UI displays model output, retrieval ranking, classifier score, extractor score, recommendation rank, generated-answer score, or risk estimate as if it were a calibrated probability.
Replace with: Trace each displayed confidence number to its source: calibrated probability, raw score, rank, similarity, heuristic, model confidence, or stale stored value.
Review: What exactly does this number measure, and can users interpret it as probability of correctness?

Anti-pattern: Ambiguous destructive action copy
Detect: A dialog, sheet, action menu, toast, command palette, mobile action sheet, or review page includes a destructive command.
Replace with: Inventory every destructive prompt and record the trigger label, title, final action, safe action, status message, object, count, and consequence.
Review: Would the final action label still be clear if read without color or icon?

Anti-pattern: Carousel auto-advance without pause
Detect: A carousel, hero, promotion rail, onboarding slider, or recommendation strip changes visible content on a timer.
Replace with: Decide whether auto-advance is needed at all; default to paused or static content unless the user starts motion.
Review: Can users stop the carousel before any automatic change happens?

Anti-pattern: Confirmation fatigue
Detect: A product uses modal confirmations, alert dialogs, browser confirms, action sheets, or extra OK prompts for many commands in the same workflow.
Replace with: Inventory all confirmation prompts in the workflow and tag each by action, frequency, reversibility, external effects, consequence severity, and existing recovery.
Review: What specific mistake does this confirmation prevent?

Anti-pattern: Dark-pattern consent
Detect: The surface asks for optional data use, marketing, research contact, AI training, partner sharing, personalization, sensitive-data use, non-essential cookies, local storage, advertising tags, analytics tags, or similar tracking.
Replace with: Inventory every consent surface and record accept path, reject path, manage path, withdrawal path, default state, processing start time, and stored evidence.
Review: Can users reject or customize with effort comparable to accepting?

Anti-pattern: Dead-end empty state
Detect: A list, table, dashboard, workspace, inbox, or panel can render with no visible items.
Replace with: Track data status separately from rendered item count: loading, empty, no-results, permission, error, and ready.
Review: Can users name what is absent after reading this state?

Anti-pattern: Disabled button with no explanation
Detect: A form, setup flow, permission model, quota, dependency, or safety gate controls whether an action can run.
Replace with: Name the exact condition blocking the action, such as Enter a workspace name, Accept billing terms, or Ask an admin for owner access.
Review: Can users tell exactly which requirement blocks the action before they try random changes?

Anti-pattern: Disabled controls without recovery
Detect: The interface gates an action behind form completion, permission, quota, account status, dependency setup, offline state, session expiry, review approval, or safety policy.
Replace with: Inventory each disabled control and record the exact condition, owner, timeout, retry rule, and recovery path.
Review: What exact condition makes the control unavailable?

Anti-pattern: Drawer with no close or return path
Detect: A side drawer, inspector, side sheet, mobile full-screen drawer, or navigation drawer opens over or beside the current page.
Replace with: Inventory every drawer, side sheet, inspector, and mobile drawer that can open temporarily.
Review: What exact element receives focus after each close route?

Anti-pattern: Fake undo
Detect: A product shows Undo in a toast, snackbar, activity row, command bar, keyboard shortcut, history stack, or recovery panel after a completed action.
Replace with: Define what exact prior state must be restored for each action: ID, parent, order, labels, ownership, permissions, relationships, counts, draft values, and focus target.
Review: What exact state is captured before the action, and what proof shows it can be restored?

Anti-pattern: Filter reset that clears unrelated search
Detect: The result set combines keyword search, filter criteria, sort, scope, saved search, saved filter, pagination, view density, or layout state.
Replace with: Model query, filters, sort, scope, saved identity, pagination, and view mode as separate state owners.
Review: What state does this reset control actually own?

Anti-pattern: Hidden destructive account deletion
Detect: The product lets users create or authenticate an account that owns personal data, app data, profile data, messages, files, subscriptions, linked apps, child-account data, enterprise memberships, or authentication tokens.
Replace with: Inventory account creation routes, account settings, app settings, uninstall support paths, public web resources, support queues, data export pages, deactivation controls, and privacy settings.
Review: Can users find account deletion from account settings without searching help?

Anti-pattern: Icon-only ambiguous action
Detect: A toolbar, table row, card, or compact navigation surface contains icon-only controls.
Replace with: Audit every icon-only button for visible action text, accessible name, affected object, and consequence.
Review: Can a first-time user name the action and consequence before pressing the control?

Anti-pattern: Inaccessible custom select
Detect: A team replaces native select styling with divs, popovers, portals, or JavaScript-only menus.
Replace with: Start with native select and document why custom behavior is necessary before replacing it.
Review: Can a keyboard-only user open it, inspect options, choose one, dismiss without change, and continue from the trigger?

Anti-pattern: Infinite scroll with no footer access
Detect: The page uses infinite scroll, auto-load-on-near-bottom, virtualized lists, dynamic feeds, product grids, search results, activity streams, or media streams.
Replace with: Identify all footer-only links and decide whether each must also appear near the stream boundary, header, account menu, or help menu.
Review: Can a mouse, touch, keyboard, and screen reader user reliably reach the footer?

Anti-pattern: Infinite spinner
Detect: A request can hang, fail silently, be queued for a long time, or lose its completion event.
Replace with: Define timeout thresholds per operation type, such as short inline saves, medium data loads, long imports, and background jobs.
Review: What exact UI state appears after the first wait threshold is crossed?

Anti-pattern: Modal for nonblocking content
Detect: The layer contains read-only help, status, preview, metadata, release notes, success feedback, onboarding tips, marketing, or supplemental explanation.
Replace with: Inventory every modal that contains only information, status, help, preview, release notes, promotion, or success feedback.
Review: What action or risk requires background interaction to be blocked?

Anti-pattern: Pagination without current page
Detect: The interface splits a table, result list, collection, audit log, inbox, resource list, catalog, or search result into multiple pages.
Replace with: Render pagination inside a labelled nav or equivalent region near the controlled results.
Review: Which page or result range is current right now?

Anti-pattern: Permission prompt with no context
Detect: The prompt requests an operating-system, browser, or app-level permission for a device resource or powerful feature such as location, camera, microphone, photos, contacts, notifications, Bluetooth, clipboard, motion sensors, or storage access.
Replace with: Inventory every system permission and map it to the exact feature action that first needs the resource.
Review: What exact user action made this permission necessary now?

Anti-pattern: Required field hidden by conditional logic
Detect: A form has radio, checkbox, select, eligibility, account type, permission, or saved-draft answers that control which later answers are required.
Replace with: Create a requirement map that ties every conditional required field to its owning trigger, active condition, visibility state, payload key, and error target.
Review: Which trigger makes this field required, and is that trigger visible when the error appears?

Anti-pattern: Toast-only critical error
Detect: A payment, save, permission, destructive action, security, or data-integrity operation fails.
Replace with: Classify errors by consequence before choosing the feedback surface: low-risk status can be transient, but blocking, financial, destructive, permission, and data-loss failures need persistence.
Review: If the user looks away for five seconds, can they still tell what failed and what to do next?

Anti-pattern: Toast-only success for completed transaction
Detect: The user has completed or appears to have completed an application, booking, order, payment, account change, survey response, publication, approval, or service request.
Replace with: Identify which actions are completed transactions rather than disposable status events.
Review: If the toast disappears, can users still prove the transaction completed?

Anti-pattern: Tooltip-only required information
Detect: The hidden content is needed to complete a field, understand eligibility, choose an option, avoid a fee, meet a deadline, satisfy a document rule, or recover from a blocked control.
Replace with: Inventory every tooltip, title attribute, help icon, and aria-describedby bubble in the flow.
Review: Could users complete the task correctly if every tooltip disappeared?

Anti-pattern: Validation that clears user input
Detect: A form, editor, checkout, upload, import, authentication, or configuration screen validates user-entered values on blur, submit, save, retry, or server response.
Replace with: Keep form state separate from validation state so adding an error cannot reset field values.
Review: Which values survive client validation, server validation, retry, reload, and session return?

Open full Markdown

Machine-readable JSON

Use for retrieval, custom agents, or automated catalog checks.

patterns[].selectionRules: Candidate choice rules.
patterns[].requiredStates: States the generated UI must include.
patterns[].commonMisuses: What not to generate.

Open JSON