@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -1,200 +0,0 @@
-# Web Preview
-
-A composable component for previewing the result of a generated UI, with support for live examples and code display.
-
-The `WebPreview` component provides a flexible way to showcase the result of a generated UI component, along with its source code. It is designed for documentation and demo purposes, allowing users to interact with live examples and view the underlying implementation.
-
-See `scripts/web-preview.tsx` for this example.
-
-## Installation
-
-```bash
-npx ai-elements@latest add web-preview
-```
-
-## Usage with AI SDK
-
-Build a simple v0 clone using the [v0 Platform API](https://v0.dev/docs/api/platform).
-
-Install the `v0-sdk` package:
-
-```package-install
-npm i v0-sdk
-```
-
-Add the following component to your frontend:
-
-```tsx title="app/page.tsx"
-"use client";
-
-import {
-  WebPreview,
-  WebPreviewBody,
-  WebPreviewNavigation,
-  WebPreviewUrl,
-} from "@/components/ai-elements/web-preview";
-import { useState } from "react";
-import {
-  PromptInput,
-  type PromptInputMessage,
-  PromptInputTextarea,
-  PromptInputSubmit,
-} from "@/components/ai-elements/prompt-input";
-import { Spinner } from "@/components/ui/spinner";
-
-const WebPreviewDemo = () => {
-  const [previewUrl, setPreviewUrl] = useState("");
-  const [prompt, setPrompt] = useState("");
-  const [isGenerating, setIsGenerating] = useState(false);
-
-  const handleSubmit = async (message: PromptInputMessage) => {
-    if (!message.text.trim()) return;
-    setPrompt("");
-
-    setIsGenerating(true);
-    try {
-      const response = await fetch("/api/v0", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ prompt: message.text }),
-      });
-
-      const data = await response.json();
-      setPreviewUrl(data.demo || "/");
-      console.log("Generation finished:", data);
-    } catch (error) {
-      console.error("Generation failed:", error);
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  return (
-    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
-      <div className="flex flex-col h-full">
-        <div className="flex-1 mb-4">
-          {isGenerating ? (
-            <div className="flex flex-col items-center justify-center h-full">
-              <Spinner />
-              <p className="mt-4 text-muted-foreground">
-                Generating app, this may take a few seconds...
-              </p>
-            </div>
-          ) : previewUrl ? (
-            <WebPreview defaultUrl={previewUrl}>
-              <WebPreviewNavigation>
-                <WebPreviewUrl />
-              </WebPreviewNavigation>
-              <WebPreviewBody src={previewUrl} />
-            </WebPreview>
-          ) : (
-            <div className="flex items-center justify-center h-full text-muted-foreground">
-              Your generated app will appear here
-            </div>
-          )}
-        </div>
-
-        <PromptInput
-          onSubmit={handleSubmit}
-          className="w-full max-w-2xl mx-auto relative"
-        >
-          <PromptInputTextarea
-            value={prompt}
-            placeholder="Describe the app you want to build..."
-            onChange={(e) => setPrompt(e.currentTarget.value)}
-            className="pr-12 min-h-[60px]"
-          />
-          <PromptInputSubmit
-            status={isGenerating ? "streaming" : "ready"}
-            disabled={!prompt.trim()}
-            className="absolute bottom-1 right-1"
-          />
-        </PromptInput>
-      </div>
-    </div>
-  );
-};
-
-export default WebPreviewDemo;
-```
-
-Add the following route to your backend:
-
-```ts title="app/api/v0/route.ts"
-import { v0 } from "v0-sdk";
-
-export async function POST(req: Request) {
-  const { prompt }: { prompt: string } = await req.json();
-
-  const result = await v0.chats.create({
-    system: "You are an expert coder",
-    message: prompt,
-    modelConfiguration: {
-      modelId: "v0-1.5-sm",
-      imageGenerations: false,
-      thinking: false,
-    },
-  });
-
-  return Response.json({
-    demo: result.demo,
-    webUrl: result.webUrl,
-  });
-}
-```
-
-## Features
-
-- Live preview of UI components
-- Composable architecture with dedicated sub-components
-- Responsive design modes (Desktop, Tablet, Mobile)
-- Navigation controls with back/forward functionality
-- URL input and example selector
-- Full screen mode support
-- Console logging with timestamps
-- Context-based state management
-- Consistent styling with the design system
-- Easy integration into documentation pages
-
-## Props
-
-### `<WebPreview />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `defaultUrl` | `string` | - | The initial URL to load in the preview. |
-| `onUrlChange` | `(url: string) => void` | - | Callback fired when the URL changes. |
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the root div. |
-
-### `<WebPreviewNavigation />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the navigation container. |
-
-### `<WebPreviewNavigationButton />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `tooltip` | `string` | - | Tooltip text to display on hover. |
-| `...props` | `React.ComponentProps<typeof Button>` | - | Any other props are spread to the underlying shadcn/ui Button component. |
-
-### `<WebPreviewUrl />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof Input>` | - | Any other props are spread to the underlying shadcn/ui Input component. |
-
-### `<WebPreviewBody />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `loading` | `React.ReactNode` | - | Optional loading indicator to display over the preview. |
-| `...props` | `React.IframeHTMLAttributes<HTMLIFrameElement>` | - | Any other props are spread to the underlying iframe. |
-
-### `<WebPreviewConsole />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `logs` | `Array<{ level: ` | - | Console log entries to display in the console panel. |
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the root div. |

package/templates/next/.claude/skills/ai-elements/scripts/agent.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import {
-  Agent,
-  AgentContent,
-  AgentHeader,
-  AgentInstructions,
-  AgentOutput,
-  AgentTool,
-  AgentTools,
-} from "@/components/ai-elements/agent";
-import { z } from "zod";
-
-const webSearchTool = {
-  description: "Search the web for information",
-  inputSchema: z.object({
-    query: z.string().describe("The search query"),
-  }),
-};
-
-const readUrlTool = {
-  description: "Read and parse a URL",
-  inputSchema: z.object({
-    url: z.string().url().describe("The URL to read"),
-  }),
-};
-
-const summarizeTool = {
-  description: "Summarize text into key points",
-  inputSchema: z.object({
-    maxPoints: z.number().optional().describe("Maximum number of key points"),
-    text: z.string().describe("The text to summarize"),
-  }),
-};
-
-const outputSchema = `z.object({
-  sentiment: z.enum(['positive', 'negative', 'neutral']),
-  score: z.number(),
-  summary: z.string(),
-})`;
-
-const Example = () => (
-  <Agent>
-    <AgentHeader model="openai/gpt-5.2-pro" name="Research Assistant" />
-    <AgentContent>
-      <AgentInstructions>
-        You are a helpful research assistant. Your job is to search the web for
-        information and summarize findings for the user. Always cite your
-        sources and provide accurate, up-to-date information.
-      </AgentInstructions>
-      <AgentTools type="multiple">
-        <AgentTool tool={webSearchTool} value="web_search" />
-        <AgentTool tool={readUrlTool} value="read_url" />
-        <AgentTool tool={summarizeTool} value="summarize" />
-      </AgentTools>
-      <AgentOutput schema={outputSchema} />
-    </AgentContent>
-  </Agent>
-);
-
-export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/artifact.tsx

@@ -1,127 +0,0 @@
-"use client";
-
-import {
-  Artifact,
-  ArtifactAction,
-  ArtifactActions,
-  ArtifactContent,
-  ArtifactDescription,
-  ArtifactHeader,
-  ArtifactTitle,
-} from "@/components/ai-elements/artifact";
-import { CodeBlock } from "@/components/ai-elements/code-block";
-import {
-  CopyIcon,
-  DownloadIcon,
-  PlayIcon,
-  RefreshCwIcon,
-  ShareIcon,
-} from "lucide-react";
-
-const handleRun = () => {
-  console.log("Run");
-};
-
-const handleCopy = () => {
-  console.log("Copy");
-};
-
-const handleRegenerate = () => {
-  console.log("Regenerate");
-};
-
-const handleDownload = () => {
-  console.log("Download");
-};
-
-const handleShare = () => {
-  console.log("Share");
-};
-
-const code = `# Dijkstra's Algorithm implementation
-import heapq
-
-def dijkstra(graph, start):
-    distances = {node: float('inf') for node in graph}
-    distances[start] = 0
-    heap = [(0, start)]
-    visited = set()
-    
-    while heap:
-        current_distance, current_node = heapq.heappop(heap)
-        if current_node in visited:
-            continue
-        visited.add(current_node)
-        
-        for neighbor, weight in graph[current_node].items():
-            distance = current_distance + weight
-            if distance < distances[neighbor]:
-                distances[neighbor] = distance
-                heapq.heappush(heap, (distance, neighbor))
-    
-    return distances
-
-# Example graph
- graph = {
-    'A': {'B': 1, 'C': 4},
-    'B': {'A': 1, 'C': 2, 'D': 5},
-    'C': {'A': 4, 'B': 2, 'D': 1},
-    'D': {'B': 5, 'C': 1}
-}
-
-print(dijkstra(graph, 'A'))`;
-
-const Example = () => (
-  <Artifact>
-    <ArtifactHeader>
-      <div>
-        <ArtifactTitle>Dijkstra&apos;s Algorithm Implementation</ArtifactTitle>
-        <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>
-      </div>
-      <div className="flex items-center gap-2">
-        <ArtifactActions>
-          <ArtifactAction
-            icon={PlayIcon}
-            label="Run"
-            onClick={handleRun}
-            tooltip="Run code"
-          />
-          <ArtifactAction
-            icon={CopyIcon}
-            label="Copy"
-            onClick={handleCopy}
-            tooltip="Copy to clipboard"
-          />
-          <ArtifactAction
-            icon={RefreshCwIcon}
-            label="Regenerate"
-            onClick={handleRegenerate}
-            tooltip="Regenerate content"
-          />
-          <ArtifactAction
-            icon={DownloadIcon}
-            label="Download"
-            onClick={handleDownload}
-            tooltip="Download file"
-          />
-          <ArtifactAction
-            icon={ShareIcon}
-            label="Share"
-            onClick={handleShare}
-            tooltip="Share artifact"
-          />
-        </ArtifactActions>
-      </div>
-    </ArtifactHeader>
-    <ArtifactContent className="p-0">
-      <CodeBlock
-        className="border-none"
-        code={code}
-        language="python"
-        showLineNumbers
-      />
-    </ArtifactContent>
-  </Artifact>
-);
-
-export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/attachments-inline.tsx

@@ -1,128 +0,0 @@
-"use client";
-
-import {
-  Attachment,
-  AttachmentHoverCard,
-  AttachmentHoverCardContent,
-  AttachmentHoverCardTrigger,
-  AttachmentInfo,
-  AttachmentPreview,
-  AttachmentRemove,
-  Attachments,
-  getAttachmentLabel,
-  getMediaCategory,
-} from "@/components/ai-elements/attachments";
-import { nanoid } from "nanoid";
-import { memo, useCallback, useState } from "react";
-
-const initialAttachments = [
-  {
-    filename: "mountain-landscape.jpg",
-    id: nanoid(),
-    mediaType: "image/jpeg",
-    type: "file" as const,
-    url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",
-  },
-  {
-    filename: "quarterly-report.pdf",
-    id: nanoid(),
-    mediaType: "application/pdf",
-    type: "file" as const,
-    url: "",
-  },
-  {
-    id: nanoid(),
-    mediaType: "text/html",
-    title: "React Documentation",
-    type: "source-document" as const,
-    url: "https://react.dev",
-  },
-  {
-    filename: "podcast-episode.mp3",
-    id: nanoid(),
-    mediaType: "audio/mp3",
-    type: "file" as const,
-    url: "",
-  },
-];
-
-interface AttachmentItemProps {
-  attachment: (typeof initialAttachments)[0];
-  onRemove: (id: string) => void;
-}
-
-const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {
-  const handleRemove = useCallback(
-    () => onRemove(attachment.id),
-    [onRemove, attachment.id]
-  );
-  const mediaCategory = getMediaCategory(attachment);
-  const label = getAttachmentLabel(attachment);
-
-  return (
-    <AttachmentHoverCard key={attachment.id}>
-      <AttachmentHoverCardTrigger asChild>
-        <Attachment data={attachment} onRemove={handleRemove}>
-          <div className="relative size-5 shrink-0">
-            <div className="absolute inset-0 transition-opacity group-hover:opacity-0">
-              <AttachmentPreview />
-            </div>
-            <AttachmentRemove className="absolute inset-0" />
-          </div>
-          <AttachmentInfo />
-        </Attachment>
-      </AttachmentHoverCardTrigger>
-      <AttachmentHoverCardContent>
-        <div className="space-y-3">
-          {mediaCategory === "image" &&
-            attachment.type === "file" &&
-            attachment.url && (
-              <div className="flex max-h-96 w-80 items-center justify-center overflow-hidden rounded-md border">
-                <img
-                  alt={label}
-                  className="max-h-full max-w-full object-contain"
-                  height={384}
-                  src={attachment.url}
-                  width={320}
-                />
-              </div>
-            )}
-          <div className="space-y-1 px-0.5">
-            <h4 className="font-semibold text-sm leading-none">{label}</h4>
-            {attachment.mediaType && (
-              <p className="font-mono text-muted-foreground text-xs">
-                {attachment.mediaType}
-              </p>
-            )}
-          </div>
-        </div>
-      </AttachmentHoverCardContent>
-    </AttachmentHoverCard>
-  );
-});
-
-AttachmentItem.displayName = "AttachmentItem";
-
-const Example = () => {
-  const [attachments, setAttachments] = useState(initialAttachments);
-
-  const handleRemove = useCallback((id: string) => {
-    setAttachments((prev) => prev.filter((a) => a.id !== id));
-  }, []);
-
-  return (
-    <div className="flex items-center justify-center p-8">
-      <Attachments variant="inline">
-        {attachments.map((attachment) => (
-          <AttachmentItem
-            attachment={attachment}
-            key={attachment.id}
-            onRemove={handleRemove}
-          />
-        ))}
-      </Attachments>
-    </div>
-  );
-};
-
-export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/attachments-list.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import {
-  Attachment,
-  AttachmentInfo,
-  AttachmentPreview,
-  AttachmentRemove,
-  Attachments,
-} from "@/components/ai-elements/attachments";
-import { nanoid } from "nanoid";
-import { memo, useCallback, useState } from "react";
-
-const initialAttachments = [
-  {
-    filename: "mountain-landscape.jpg",
-    id: nanoid(),
-    mediaType: "image/jpeg",
-    type: "file" as const,
-    url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",
-  },
-  {
-    filename: "quarterly-report-2024.pdf",
-    id: nanoid(),
-    mediaType: "application/pdf",
-    type: "file" as const,
-    url: "",
-  },
-  {
-    filename: "product-demo.mp4",
-    id: nanoid(),
-    mediaType: "video/mp4",
-    type: "file" as const,
-    url: "",
-  },
-  {
-    filename: "api-reference",
-    id: nanoid(),
-    mediaType: "text/html",
-    title: "API Documentation",
-    type: "source-document" as const,
-    url: "https://docs.example.com/api",
-  },
-  {
-    filename: "meeting-recording.mp3",
-    id: nanoid(),
-    mediaType: "audio/mpeg",
-    type: "file" as const,
-    url: "",
-  },
-];
-
-interface AttachmentItemProps {
-  attachment: (typeof initialAttachments)[0];
-  onRemove: (id: string) => void;
-}
-
-const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {
-  const handleRemove = useCallback(
-    () => onRemove(attachment.id),
-    [onRemove, attachment.id]
-  );
-  return (
-    <Attachment data={attachment} key={attachment.id} onRemove={handleRemove}>
-      <AttachmentPreview />
-      <AttachmentInfo showMediaType />
-      <AttachmentRemove />
-    </Attachment>
-  );
-});
-
-AttachmentItem.displayName = "AttachmentItem";
-
-const Example = () => {
-  const [attachments, setAttachments] = useState(initialAttachments);
-
-  const handleRemove = useCallback((id: string) => {
-    setAttachments((prev) => prev.filter((a) => a.id !== id));
-  }, []);
-
-  return (
-    <div className="flex items-center justify-center p-8">
-      <Attachments className="w-full max-w-md" variant="list">
-        {attachments.map((attachment) => (
-          <AttachmentItem
-            attachment={attachment}
-            key={attachment.id}
-            onRemove={handleRemove}
-          />
-        ))}
-      </Attachments>
-    </div>
-  );
-};
-
-export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/attachments.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import {
-  Attachment,
-  AttachmentPreview,
-  AttachmentRemove,
-  Attachments,
-} from "@/components/ai-elements/attachments";
-import { nanoid } from "nanoid";
-import { memo, useCallback, useState } from "react";
-
-const initialAttachments = [
-  {
-    filename: "mountain-landscape.jpg",
-    id: nanoid(),
-    mediaType: "image/jpeg",
-    type: "file" as const,
-    url: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop",
-  },
-  {
-    filename: "ocean-sunset.jpg",
-    id: nanoid(),
-    mediaType: "image/jpeg",
-    type: "file" as const,
-    url: "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?w=400&h=400&fit=crop",
-  },
-  {
-    filename: "document.pdf",
-    id: nanoid(),
-    mediaType: "application/pdf",
-    type: "file" as const,
-    url: "",
-  },
-  {
-    filename: "video.mp4",
-    id: nanoid(),
-    mediaType: "video/mp4",
-    type: "file" as const,
-    url: "",
-  },
-];
-
-interface AttachmentItemProps {
-  attachment: (typeof initialAttachments)[0];
-  onRemove: (id: string) => void;
-}
-
-const AttachmentItem = memo(({ attachment, onRemove }: AttachmentItemProps) => {
-  const handleRemove = useCallback(
-    () => onRemove(attachment.id),
-    [onRemove, attachment.id]
-  );
-  return (
-    <Attachment data={attachment} onRemove={handleRemove}>
-      <AttachmentPreview />
-      <AttachmentRemove />
-    </Attachment>
-  );
-});
-
-AttachmentItem.displayName = "AttachmentItem";
-
-const Example = () => {
-  const [attachments, setAttachments] = useState(initialAttachments);
-
-  const handleRemove = useCallback((id: string) => {
-    setAttachments((prev) => prev.filter((a) => a.id !== id));
-  }, []);
-
-  return (
-    <div className="flex items-center justify-center p-8">
-      <Attachments variant="grid">
-        {attachments.map((attachment) => (
-          <AttachmentItem
-            attachment={attachment}
-            key={attachment.id}
-            onRemove={handleRemove}
-          />
-        ))}
-      </Attachments>
-    </div>
-  );
-};
-
-export default Example;