Prompt Templates

Why use templates?

AI agents hallucinate component props when they don't have explicit context. These templates embed the exact valid values for every useVyre component — so the AI generates correct code without you having to debug wrong variants, missing props, or non-existent sizes.

Claude templates

Use in claude.ai, Claude Desktop, or Claude Code.

Build a dashboard

I'm building a React dashboard using the useVyre design system (@usevyre/react).

Rules:
- Only use components that exist in useVyre: Accordion, Alert, Avatar, Badge, Breadcrumb,
  Button, Calendar, Card, Checkbox, Command, DropdownMenu, Input, Label, Modal, Pagination,
  Popover, Progress, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Switch, Table,
  Tabs, Toast, Tooltip, Typography
- Always use semantic tokens for colors (--vyre-color-semantic-*), never hardcode
- Use variant prop for Button, never color prop
- Add aria-label to any Button with size="icon"

Build me a dashboard with:
- Sidebar with navigation links
- Header with search (use Command component) and user avatar
- Main area with stats cards and a data table

Build a form

I'm using the useVyre design system (@usevyre/react).

Form rules:
- Wrap each Input in a <Field> component for label + validation state
- Field state prop: "idle" | "error" | "success" | "warning"
- Use <Select options={[{ value, label }]}> for dropdowns, never native <select>
- Submit button: <Button variant="accent" type="submit" loading={isSubmitting}>

Build me a user registration form with name, email, password, and role select.

Cursor templates

Use in Cursor chat (Cmd+L) or paste into .cursor/rules for persistent context.

Build a page (Cmd+L chat)

I'm working with the useVyre design system. @usevyre/react is installed.

Available components: Accordion, Alert, Avatar, Badge, Breadcrumb, Button, Calendar, Card,
Checkbox, Command, DropdownMenu, Input, Label, Modal, Pagination, Popover, Progress, Select,
Separator, Sheet, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Toast, Tooltip, Typography

Critical rules:
- Button: variant = primary | secondary | ghost | accent | teal | danger
- Badge: variant = default | accent | teal | success | warning | danger
- Alert: variant = info | success | warning | danger (NOT "error")
- Toast: use useToast() hook, never render <Toast> directly
- Search UI → use Command component, NOT Input type="search"

Build: [describe what you need]

Copilot templates

Use inline in your .tsx file as a comment trigger, or in Copilot Chat.

Inline comment trigger

// useVyre Button: variant=primary|secondary|ghost|accent|teal|danger, size=sm|md|lg|icon
// No color prop. Add aria-label for size="icon".
<Button

Fix AI-generated code (any tool)

Got hallucinated props from your AI? Paste this to fix them:

Fix useVyre prop errors in this code:
[paste code]

Common fixes:
- color="blue" → variant="accent"
- size="xl" → size="lg"
- variant="error" → variant="danger"
- variant="info" (on Badge) → variant="teal"
- icon={...} on Button → leftIcon={...}
- <Toast> rendered directly → const { toast } = useToast()

Minimal template (any tool)

Shortest possible context — good for quick inline prompts:

React component using @usevyre/react.
Button: variant=primary|secondary|ghost|accent|teal|danger, no color prop.
Badge: variant=default|accent|teal|success|warning|danger.
Alert: variant=info|success|warning|danger.
Toast: useToast() hook only.
Build: [describe what you need]

Download all templates

Install the package to access all templates programmatically:

npm install @usevyre/prompt-templates
# or
pnpm add @usevyre/prompt-templates

import { getTemplate, templates } from "@usevyre/prompt-templates";

// Get a specific template as markdown string
const claudeTemplates = getTemplate("claude");

// Or access all at once
console.log(templates.cursor);
console.log(templates.copilot);