AI Patterns. The pattern language for AI agents. Agentic patterns with machine-readable specs.
The context
AI product UI has a pattern problem — not a shortage of components, but a shortage of contracts. Tool approval, agent handoff, confidence indicators, streaming answers: nobody agrees on what these should do, let alone when to show them or what to say.
Every team building agent UIs is solving the same ten problems from scratch. The implementations look different, the reasoning never gets written down, and the next team starts over.
AI Patterns is an attempt to establish that language.
What it is
A catalogue of production components for agentic workflows — each one paired with a UX spec the design system or harness can actually read. Not just markup. A contract: anatomy, behavior, accessibility rules, and content guidelines, kept separate from the implementation.
The contract survives transplanting into any design system. Only the markup re-expresses.
Patterns are organized by what they do in a typical AI product:
- Loaders — in-progress status while an agent is working
- Traces — the completed record of what an agent did
- Composer — the input surface for starting or continuing a conversation
- Permissions — tool approval and access-grant interactions
- Text — streamed answer content and its inline affordances
- Flowcharts — multi-step and conditional agent workflows
- Indicators — confidence, status, and progress signals
- Errors — generation failures and console-level states
Each pattern detail page has three tabs: a live Preview, the verbatim Code (component.tsx, ready to copy), and the full Pattern spec.
The skill
The catalogue ships as an installable Claude Code skill. Once loaded, the agent can recommend, validate, and scaffold patterns directly into your project — adapting to whatever stack you're already using.
/plugin marketplace add carlosmarch/ai-patterns /plugin install ai-patterns@ai-patterns
The skill reads two layers: a compact index for shortlisting, and a full spec per pattern for the actual design decision. The agent always opens the full spec before recommending anything — the "When not to use" and accessibility sections are the contract, not the Tailwind defaults.
When a project already has an established design system, the skill uses that instead: anatomy re-expressed with the project's components, motion with whatever animation the project already uses, tokens with the project's own. Accessibility and content rules stay put regardless.