Patterns: UI/UX guidance in one place

Choosing an interface pattern often starts with a small question. Should this task open in a modal, a drawer or a separate page? Should a form show errors while someone types, or wait until they submit?

The useful guidance already exists, but it is spread across accessibility documentation and design systems. Patterns brings that guidance together in one place, organised around the decisions a developer needs to make.

Start with the situation

The guides focus on when a pattern fits, when to avoid it and what implementing it involves. Each includes an example, tradeoffs, a verification question and links to the relevant sources, including W3C accessibility guidance and established design systems.

For example, a drawer is not automatically a less disruptive alternative to a modal. A modal drawer still blocks the rest of the page. A non-modal drawer keeps the workspace available, but needs enough room and a sensible keyboard route between both areas. The useful decision is how the task should work, before deciding where the panel appears.

That is the structure behind Patterns: begin with the situation, understand the alternatives, then check the interaction details. Search and topic filters provide a route to the relevant guide without reading the entire collection.

Give an agent the same reference

The site also provides an AI agent skill. Its SKILL.md contains a short workflow and links to Markdown versions of the guides.

For an agent that can read URLs, the instruction is:

Use the Patterns UI/UX skill at https://patterns.alexanderclaes.be/SKILL.md for this task. Read the relevant linked guides before recommending or implementing a pattern.

This can go in a project’s AGENTS.md or in the task itself. Agents that support local skills can use a saved copy in their supported skills directory. Reading the URL alone does not install anything, and the agent still needs web access for the linked guides.

The skill and website are generated from the same content, so there is no separate set of recommendations to maintain.

Guidance still needs context

Patterns is a work in progress. Its examples demonstrate individual interactions, not proof that a finished application is accessible or easy to use.

The developer still needs to understand the task, check the sources and test the result with keyboard, screen reader, zoom and real users where appropriate. Bringing the references together makes those decisions easier to inspect; it does not make them automatic.