PixelPilot: Instructions file for GitHub Copilot

UI/UX Native Browser APIs (2026)

Modern browser APIs for common UI patterns. Use native when possible, with graceful fallbacks.

---

OVERVIEW

This skill covers emerging browser APIs:

1. Popover API - Native popovers without JavaScript
2. <dialog> - Native modals with ::backdrop
3. :user-valid/:user-invalid - User-interacted form validation
4. @starting-style - Entry animations for elements
5. CSS Anchor Positioning - Position relative to other elements

---

1. POPOVER API

Basic Usage

<!-- Trigger button -->
<button popovertarget="my-popover">Open Menu</button>

<!-- Popover content -->
<div id="my-popover" popover>
  <p>Popover content here!</p>
</div>

Popover Types

<!-- Auto (default): Closes when clicking outside or pressing Escape -->
<div popover="auto">Light dismiss popover</div>

<!-- Manual: Must be explicitly closed -->
<div popover="manual">Stays open until closed</div>

Token-Aware Styling

/* Base popover styles */
[popover] {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  max-width: 320px;
  
  /* Remove default border */
  border: none;
  
  /* Entry animation */
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: 
    opacity var(--dur-base),
    transform var(--dur-base),
    display var(--dur-base) allow-discrete;
}

[popover]:popover-open {
  opacity: 1;
  transform: translateY(0);
}

/* Starting style for entry animation */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: translateY(var(--space-2));
  }
}

/* Backdrop for modal-like popovers */
[popover]::backdrop {
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--dur-base);
}

[popover]:popover-open::backdrop {
  opacity: 1;
}

@starting-style {
  [popover]:popover-open::backdrop {
    opacity: 0;
  }
}

JavaScript Control