UI behavior guides for your coding agent

Each guide spells out how a piece of UI should behave, down to the details a short prompt misses. Your agent builds it into your project with your own components and styling.

Browse Potions How It Works
Behaviors the guides specify

Stopping a streamed AI response keeps the text that already arrived. AI Response Rendering

Available Potions

Each potion is a detailed specification that AI agents can adapt into layouts, components, features, patterns, or tooling for an existing project.

AI Action Review Pattern
patterns, ai, agent, approval, review, permissions, undo, audit-log, a11y
A framework-agnostic pattern for reviewing AI-proposed actions before execution: plan preview, risk labels, scoped permissions, approve/reject/edit controls, undo, progress, and audit trail.
Read more
AI Response Rendering Pattern - Streaming, Tool Calls, and Optional Reasoning
patterns, ai, streaming, markdown, tool-calls, reasoning, citations, artifacts, a11y
A framework-agnostic pattern for rendering an AI assistant reply: streaming tokens, incremental Markdown, code blocks, tool-call cards, citations, artifacts, and recovery from mid-stream errors. Optional reasoning-status surface when the provider explicitly exposes it. Companion to the AI Agent Chat Layout.
Read more
Ecommerce Product Page
layouts, ecommerce, merchandising, product-page, product-detail-page, pdp, conversion, reviews, responsive
A conversion-oriented ecommerce product detail page layout with media gallery, buy box, variant selectors, shipping and returns context, reviews, and mobile sticky purchase actions.
Read more
Sidebar Navigation
components, sidebar, navigation, collapsible, multi-level, responsive, overlay, a11y
A responsive sidebar navigation component with collapsible icon-only mode, multi-level nested groups, badge support, inline search, and mobile overlay. The primary navigation pattern for SaaS dashboards, admin panels, and application shells.
Read more
Documentation Website Layout
layouts, documentation, sidebar, table-of-contents, responsive, search, scroll-spy, a11y
A three-column documentation website layout with hierarchical sidebar navigation, prose content area, and scroll-spy table of contents. Inspired by Next.js docs, Nextra, Docusaurus, and Mintlify. Designed for developer documentation, knowledge bases, and technical reference pages.
Read more
Command Palette
components, command-palette, command-menu, omnibox, keyboard-shortcuts, fuzzy-search, productivity, a11y, aria
An accessible command palette component for keyboard-first navigation and action execution, with fuzzy search, grouped results, recent commands, and role-aware command visibility.
Read more
View All Potions

How to Use

Copy prompt

Build it into your project

Open a potion, copy its prompt, and paste it into your coding agent, such as Claude Code, Codex, or Cursor. The agent builds the behavior with your components and styling.

Check prompt

Check what you already have

Use a potion's check prompt to compare your existing UI with the guide. The agent lists the gaps by severity and changes nothing until you ask.

Or use Potion Kit: a CLI that lets you scaffold and chat-build Harold + UI Potion sites; the model uses only real potion specs from the catalog.