@goldencomm/create-baseline 0.0.1

package/templates/next/.claude/skills/ai-elements/references/agent.md

@@ -0,0 +1,134 @@
+# Agent
+
+A composable component for displaying AI agent configuration with model, instructions, tools, and output schema.
+
+The `Agent` component displays an interface for showing AI agent configuration details. It's designed to represent a configured agent from the AI SDK, showing the agent's model, system instructions, available tools (with expandable input schemas), and output schema.
+
+See `scripts/agent.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add agent
+```
+
+## Usage with AI SDK
+
+Display an agent's configuration alongside your chat interface. Tools are displayed in an accordion where clicking the description expands to show the input schema.
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { tool } from "ai";
+import { z } from "zod";
+import {
+  Agent,
+  AgentContent,
+  AgentHeader,
+  AgentInstructions,
+  AgentOutput,
+  AgentTool,
+  AgentTools,
+} from "@/components/ai-elements/agent";
+
+const webSearch = tool({
+  description: "Search the web for information",
+  inputSchema: z.object({
+    query: z.string().describe("The search query"),
+  }),
+});
+
+const readUrl = tool({
+  description: "Read and parse content from a URL",
+  inputSchema: z.object({
+    url: z.string().url().describe("The URL to read"),
+  }),
+});
+
+const outputSchema = `z.object({
+  sentiment: z.enum(['positive', 'negative', 'neutral']),
+  score: z.number(),
+  summary: z.string(),
+})`;
+
+export default function Page() {
+  return (
+    <Agent>
+      <AgentHeader
+        name="Sentiment Analyzer"
+        model="anthropic/claude-sonnet-4-5"
+      />
+      <AgentContent>
+        <AgentInstructions>
+          Analyze the sentiment of the provided text and return a structured
+          analysis with sentiment classification, confidence score, and summary.
+        </AgentInstructions>
+        <AgentTools>
+          <AgentTool tool={webSearch} value="web_search" />
+          <AgentTool tool={readUrl} value="read_url" />
+        </AgentTools>
+        <AgentOutput schema={outputSchema} />
+      </AgentContent>
+    </Agent>
+  );
+}
+```
+
+## Features
+
+- Model badge in header
+- Instructions rendered as markdown
+- Tools displayed as accordion items with expandable input schemas
+- Output schema display with syntax highlighting
+- Composable structure for flexible layouts
+- Works with AI SDK `Tool` type
+
+## Props
+
+### `<Agent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<` | - | Any props are spread to the root div. |
+
+### `<AgentHeader />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | Required | The name of the agent. |
+| `model` | `string` | - | The model identifier (e.g.  |
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. |
+
+### `<AgentContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. |
+
+### `<AgentInstructions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `string` | Required | The instruction text. |
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. |
+
+### `<AgentTools />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof Accordion>` | - | Any other props are spread to the Accordion component. |
+
+### `<AgentTool />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tool` | `Tool` | Required | The tool object from the AI SDK containing description and inputSchema. |
+| `value` | `string` | Required | Unique identifier for the accordion item. |
+| `...props` | `React.ComponentProps<typeof AccordionItem>` | - | Any other props are spread to the AccordionItem component. |
+
+### `<AgentOutput />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `schema` | `string` | Required | The output schema as a string (displayed with syntax highlighting). |
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div. |

package/templates/next/.claude/skills/ai-elements/references/artifact.md

@@ -0,0 +1,84 @@
+# Artifact
+
+A container component for displaying generated content like code, documents, or other outputs with built-in actions.
+
+The `Artifact` component provides a structured container for displaying generated content like code, documents, or other outputs with built-in header actions.
+
+See `scripts/artifact.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add artifact
+```
+
+## Features
+
+- Structured container with header and content areas
+- Built-in header with title and description support
+- Flexible action buttons with tooltips
+- Customizable styling for all subcomponents
+- Support for close buttons and action groups
+- Clean, modern design with border and shadow
+- Responsive layout that adapts to content
+- TypeScript support with proper type definitions
+- Composable architecture for maximum flexibility
+
+## Examples
+
+### With Code Display
+
+See `scripts/artifact.tsx` for this example.
+
+## Props
+
+### `<Artifact />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the underlying div element. |
+
+### `<ArtifactHeader />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the underlying div element. |
+
+### `<ArtifactTitle />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLParagraphElement>` | - | Any other props are spread to the underlying paragraph element. |
+
+### `<ArtifactDescription />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLParagraphElement>` | - | Any other props are spread to the underlying paragraph element. |
+
+### `<ArtifactActions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the underlying div element. |
+
+### `<ArtifactAction />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tooltip` | `string` | - | Tooltip text to display on hover. |
+| `label` | `string` | - | Screen reader label for the action button. |
+| `icon` | `LucideIcon` | - | Lucide icon component to display in the button. |
+| `...props` | `React.ComponentProps<typeof Button>` | - | Any other props are spread to the underlying shadcn/ui Button component. |
+
+### `<ArtifactClose />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof Button>` | - | Any other props are spread to the underlying shadcn/ui Button component. |
+
+### `<ArtifactContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the underlying div element. |

package/templates/next/.claude/skills/ai-elements/references/attachments.md

@@ -0,0 +1,190 @@
+# Attachments
+
+A flexible, composable attachment component for displaying files, images, videos, audio, and source documents.
+
+The `Attachment` component provides a unified way to display file attachments and source documents with multiple layout variants.
+
+See `scripts/attachments.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add attachments
+```
+
+## Usage with AI SDK
+
+Display user-uploaded files in chat messages or input areas.
+
+```tsx title="app/page.tsx"
+"use client";
+
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentInfo,
+  AttachmentRemove,
+} from "@/components/ai-elements/attachments";
+import type { FileUIPart } from "ai";
+
+interface MessageProps {
+  attachments: (FileUIPart & { id: string })[];
+  onRemove?: (id: string) => void;
+}
+
+const MessageAttachments = ({ attachments, onRemove }: MessageProps) => (
+  <Attachments variant="grid">
+    {attachments.map((file) => (
+      <Attachment
+        key={file.id}
+        data={file}
+        onRemove={onRemove ? () => onRemove(file.id) : undefined}
+      >
+        <AttachmentPreview />
+        <AttachmentRemove />
+      </Attachment>
+    ))}
+  </Attachments>
+);
+
+export default MessageAttachments;
+```
+
+## Features
+
+- Three display variants: grid (thumbnails), inline (badges), and list (rows)
+- Supports both FileUIPart and SourceDocumentUIPart from the AI SDK
+- Automatic media type detection (image, video, audio, document, source)
+- Hover card support for inline previews
+- Remove button with customizable callback
+- Composable architecture for maximum flexibility
+- Accessible with proper ARIA labels
+- TypeScript support with exported utility functions
+
+## Examples
+
+### Grid Variant
+
+Best for displaying attachments in messages with visual thumbnails.
+
+See `scripts/attachments.tsx` for this example.
+
+### Inline Variant
+
+Best for compact badge-style display in input areas with hover previews.
+
+See `scripts/attachments-inline.tsx` for this example.
+
+### List Variant
+
+Best for file lists with full metadata display.
+
+See `scripts/attachments-list.tsx` for this example.
+
+## Props
+
+### `<Attachments />`
+
+Container component that sets the layout variant.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `unknown` | - | The display layout variant. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the underlying div element. |
+
+### `<Attachment />`
+
+Individual attachment item wrapper.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `unknown` | - | The attachment data (FileUIPart or SourceDocumentUIPart with id). |
+| `onRemove` | `() => void` | - | Callback fired when the remove button is clicked. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the underlying div element. |
+
+### `<AttachmentPreview />`
+
+Displays the media preview (image, video, or icon).
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fallbackIcon` | `React.ReactNode` | - | Custom icon to display when no preview is available. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the underlying div element. |
+
+### `<AttachmentInfo />`
+
+Displays the filename and optional media type.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `showMediaType` | `boolean` | `false` | Whether to show the media type below the filename. |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the underlying div element. |
+
+### `<AttachmentRemove />`
+
+Remove button that appears on hover.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Screen reader label for the button. |
+| `...props` | `React.ComponentProps<typeof Button>` | - | Spread to the underlying Button component. |
+
+### `<AttachmentHoverCard />`
+
+Wrapper for hover preview functionality.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `openDelay` | `number` | `0` | Delay in ms before opening the hover card. |
+| `closeDelay` | `number` | `0` | Delay in ms before closing the hover card. |
+| `...props` | `React.ComponentProps<typeof HoverCard>` | - | Spread to the underlying HoverCard component. |
+
+### `<AttachmentHoverCardTrigger />`
+
+Trigger element for the hover card.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof HoverCardTrigger>` | - | Spread to the underlying HoverCardTrigger component. |
+
+### `<AttachmentHoverCardContent />`
+
+Content displayed in the hover card.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `align` | `unknown` | - | Alignment of the hover card content. |
+| `...props` | `React.ComponentProps<typeof HoverCardContent>` | - | Spread to the underlying HoverCardContent component. |
+
+### `<AttachmentEmpty />`
+
+Empty state component when no attachments are present.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Spread to the underlying div element. |
+
+## Utility Functions
+
+### `getMediaCategory(data)`
+
+Returns the media category for an attachment.
+
+```tsx
+import { getMediaCategory } from "@/components/ai-elements/attachments";
+
+const category = getMediaCategory(attachment);
+// Returns: "image" | "video" | "audio" | "document" | "source" | "unknown"
+```
+
+### `getAttachmentLabel(data)`
+
+Returns the display label for an attachment.
+
+```tsx
+import { getAttachmentLabel } from "@/components/ai-elements/attachments";
+
+const label = getAttachmentLabel(attachment);
+// Returns filename or fallback like "Image" or "Attachment"
+```

package/templates/next/.claude/skills/ai-elements/references/audio-player.md

@@ -0,0 +1,134 @@
+# Audio Player
+
+A composable audio player component built on media-chrome, with shadcn styling and flexible controls.
+
+The `AudioPlayer` component provides a flexible and customizable audio playback interface built on top of media-chrome. It features a composable architecture that allows you to build audio experiences with custom controls, metadata display, and seamless integration with AI-generated audio content.
+
+See `scripts/audio-player.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add audio-player
+```
+
+## Features
+
+- Built on media-chrome for reliable audio playback
+- Fully composable architecture with granular control components
+- ButtonGroup integration for cohesive control layout
+- Individual control components (play, seek, volume, etc.)
+- Flexible layout with customizable control bars
+- CSS custom properties for deep theming
+- Shadcn/ui Button component styling
+- Responsive design that works across devices
+- Full TypeScript support with proper types for all components
+
+## Variants
+
+### AI SDK Speech Result
+
+The `AudioPlayer` component can be used to play audio from an AI SDK Speech Result.
+
+See `scripts/audio-player.tsx` for this example.
+
+### Remote Audio
+
+The `AudioPlayer` component can be used to play remote audio files.
+
+See `scripts/audio-player-remote.tsx` for this example.
+
+## Props
+
+### `<AudioPlayer />`
+
+Root MediaController component. Accepts all MediaController props except `audio` (which is set to `true` by default).
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `style` | `CSSProperties` | - | Custom CSS properties can be passed to override media-chrome theming variables. |
+| `...props` | `Omit<React.ComponentProps<typeof MediaController>, ` | - | Any other props are spread to the MediaController component. |
+
+### `<AudioPlayerElement />`
+
+The audio element that contains the media source. Accepts either a remote URL or AI SDK Speech Result data.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string` | - | The URL of the audio file to play (for remote audio). |
+| `data` | `SpeechResult[` | - | AI SDK Speech Result audio data with base64 encoding (for AI-generated audio). |
+| `...props` | `Omit<React.ComponentProps<` | - | Any other props are spread to the audio element (excluding src when using data). |
+
+### `<AudioPlayerControlBar />`
+
+Container for control buttons, wraps children in a ButtonGroup.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof MediaControlBar>` | - | Any other props are spread to the MediaControlBar component. |
+
+### `<AudioPlayerPlayButton />`
+
+Play/pause button wrapped in a shadcn Button component.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof MediaPlayButton>` | - | Any other props are spread to the MediaPlayButton component. |
+
+### `<AudioPlayerSeekBackwardButton />`
+
+Seek backward button wrapped in a shadcn Button component.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `seekOffset` | `number` | `10` | The number of seconds to seek backward. |
+| `...props` | `React.ComponentProps<typeof MediaSeekBackwardButton>` | - | Any other props are spread to the MediaSeekBackwardButton component. |
+
+### `<AudioPlayerSeekForwardButton />`
+
+Seek forward button wrapped in a shadcn Button component.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `seekOffset` | `number` | `10` | The number of seconds to seek forward. |
+| `...props` | `React.ComponentProps<typeof MediaSeekForwardButton>` | - | Any other props are spread to the MediaSeekForwardButton component. |
+
+### `<AudioPlayerTimeDisplay />`
+
+Displays the current playback time, wrapped in ButtonGroupText.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof MediaTimeDisplay>` | - | Any other props are spread to the MediaTimeDisplay component. |
+
+### `<AudioPlayerTimeRange />`
+
+Seek slider for controlling playback position, wrapped in ButtonGroupText.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof MediaTimeRange>` | - | Any other props are spread to the MediaTimeRange component. |
+
+### `<AudioPlayerDurationDisplay />`
+
+Displays the total duration of the audio, wrapped in ButtonGroupText.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof MediaDurationDisplay>` | - | Any other props are spread to the MediaDurationDisplay component. |
+
+### `<AudioPlayerMuteButton />`
+
+Mute/unmute button, wrapped in ButtonGroupText.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof MediaMuteButton>` | - | Any other props are spread to the MediaMuteButton component. |
+
+### `<AudioPlayerVolumeRange />`
+
+Volume slider control, wrapped in ButtonGroupText.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof MediaVolumeRange>` | - | Any other props are spread to the MediaVolumeRange component. |

package/templates/next/.claude/skills/ai-elements/references/canvas.md

@@ -0,0 +1,34 @@
+# Canvas
+
+A React Flow-based canvas component for building interactive node-based interfaces.
+
+The `Canvas` component provides a React Flow-based canvas for building interactive node-based interfaces. It comes pre-configured with sensible defaults for AI applications, including panning, zooming, and selection behaviors.
+
+
+
+## Installation
+
+```bash
+npx ai-elements@latest add canvas
+```
+
+## Features
+
+- Pre-configured React Flow canvas with AI-optimized defaults
+- Pan on scroll enabled for intuitive navigation
+- Selection on drag for multi-node operations
+- Customizable background color using CSS variables
+- Delete key support (Backspace and Delete keys)
+- Auto-fit view to show all nodes
+- Disabled double-click zoom for better UX
+- Disabled pan on drag to prevent accidental canvas movement
+- Fully compatible with React Flow props and API
+
+## Props
+
+### `<Canvas />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | - | Child components like Background, Controls, or MiniMap. |
+| `...props` | `ReactFlowProps` | - | Any other React Flow props like nodes, edges, nodeTypes, edgeTypes, onNodesChange, etc. |

package/templates/next/.claude/skills/ai-elements/references/chain-of-thought.md

@@ -0,0 +1,81 @@
+# Chain of Thought
+
+A collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step progress indicators.
+
+The `ChainOfThought` component provides a visual representation of an AI's reasoning process, showing step-by-step thinking with support for search results, images, and progress indicators. It helps users understand how AI arrives at conclusions.
+
+See `scripts/chain-of-thought.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add chain-of-thought
+```
+
+## Features
+
+- Collapsible interface with smooth animations powered by Radix UI
+- Step-by-step visualization of AI reasoning process
+- Support for different step statuses (complete, active, pending)
+- Built-in search results display with badge styling
+- Image support with captions for visual content
+- Custom icons for different step types
+- Context-aware components using React Context API
+- Fully typed with TypeScript
+- Accessible with keyboard navigation support
+- Responsive design that adapts to different screen sizes
+- Smooth fade and slide animations for content transitions
+- Composable architecture for flexible customization
+
+## Props
+
+### `<ChainOfThought />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | - | Controlled open state of the collapsible. |
+| `defaultOpen` | `boolean` | `false` | Default open state when uncontrolled. |
+| `onOpenChange` | `(open: boolean) => void` | - | Callback when the open state changes. |
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root div element. |
+
+### `<ChainOfThoughtHeader />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Custom header text. |
+| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | - | Any other props are spread to the CollapsibleTrigger component. |
+
+### `<ChainOfThoughtStep />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `LucideIcon` | `DotIcon` | Icon to display for the step. |
+| `label` | `string` | - | The main text label for the step. |
+| `description` | `string` | - | Optional description text shown below the label. |
+| `status` | `unknown` | - | Visual status of the step. |
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the root div element. |
+
+### `<ChainOfThoughtSearchResults />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<` | - | Any props are spread to the container div element. |
+
+### `<ChainOfThoughtSearchResult />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof Badge>` | - | Any props are spread to the Badge component. |
+
+### `<ChainOfThoughtContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | - | Any props are spread to the CollapsibleContent component. |
+
+### `<ChainOfThoughtImage />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `caption` | `string` | - | Optional caption text displayed below the image. |
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the container div element. |