agent-ui-skills

Accessible alert - a live region that announces text appearing after page load. Use when adding an error banner, validation summary, success message, toast, notification or snackbar, or when a screen reader user must hear that something failed or finished. Not a blocking dialog.

Accessible box - a padded container with a border and a paired foreground and background colour, built in place of a bare div. Applies when wrapping content in a card, panel, callout, well, tile or padded region, when a container must stay readable under an inverted colour scheme or a forced-colours mode, and when a layout needs a neutral enclosure to build on. Not for arranging or spacing sibling elements.

Accessible button - a clickable control that runs an action in the current page. Use when adding, styling or fixing a button, a submit or action control, or when making one unavailable while keeping it reachable by keyboard. Not a link to another page.

Accessible modal dialog - an overlay that blocks the page until dismissed. Use when adding a modal, a confirmation step, a blocking popup, or an overlay the keyboard must not escape, including focus trapping, Escape handling, and returning focus to the opener. Not a non-blocking alert.

Accessible non-modal popover on the native HTML popover attribute - a panel that opens above the page without blocking it. Use when adding a filter panel, a disclosure card, a settings flyout, an inline notice, a dropdown surface, or any layer that closes on Escape or an outside click while the page behind stays clickable and tabbable. Covers auto and manual modes, trigger-adjacent and viewport placements, top-layer placement that no overflow or z-index can clip, and trigger state. Not a modal.

Accessible tabs - a row of controls showing one panel at a time. Use when adding tabs, a tabbed interface, or switchable sections driven by the arrow keys, including roving tabindex so a single Tab press clears the whole row. Not navigation between pages.

Theme workflow - binds a project's existing colours, corner radius and type to the auk custom properties, so every component built from the ui- skills takes on the project's brand instead of the shipped defaults. Use when components look off next to the rest of the page, when a design system, token file or palette should drive them, when a dark scheme must apply to them, or when a request asks to match, re-skin or restyle auk components. Not for restyling elements that are not auk components, and not for building a component.