Prompts and workflows
Working examples and authoring interfaces for prompts and workflows.
Prompts are prose that readers copy into another tool. DocumentPrompt preserves the exact text, wraps long lines, and keeps the copy action visible without presenting an editable field or a simulated chat.
Review this component’s layout, keyboard behavior and reduced-motion state. Explain the observed issue before changing it.
Read the site instructions and inspect the existing components. Reuse the shared design tokens and verify both themes at a narrow width.
Review a proposed change
Inspect
Read the source and reproduce the issue.
Preview
Review the proposed change and its effect.
Verify
Check the affected behavior and output.
A focused source change
<button>Save</button><button type="button">Save</button>A styled button
<DocumentPrompt title="Review a component" text="Review this component's classes and keyboard behavior."/>Use a short title describing the task. Keep paragraphs and lists in the text itself so clipboard and portable exports preserve the full instructions. Short tasks and longer setup prompts use the same layout; both wrap within the reading column. The body uses the reading font while preserving every line break and the exact copied text. Its title, inset seam and body share a 24px start. The server renders the text and only the copy button needs client state.
Combine prompts with DocumentOptions for tool names, DocumentFlow for an ordered workflow, and DocumentCodeExample for verified before/after content. A workflow diagram does not execute a tool or imply that approval has been given. Keep prompts outside any measured demo geometry, and use ordinary code blocks when whitespace-sensitive source needs horizontal scrolling.
See AI coding for context, review, and project-rule recipes, and MCP server for the actual preview/apply process. The handbook’s button is a standalone styling specimen; product-specific agent examples remain in the product guide.