@goldencomm/create-baseline 0.0.1

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

@@ -0,0 +1,110 @@
+"use client";
+
+import {
+  SchemaDisplay,
+  SchemaDisplayContent,
+  SchemaDisplayDescription,
+  SchemaDisplayHeader,
+  SchemaDisplayMethod,
+  SchemaDisplayParameters,
+  SchemaDisplayPath,
+  SchemaDisplayRequest,
+  SchemaDisplayResponse,
+} from "@/components/ai-elements/schema-display";
+
+const Example = () => (
+  <SchemaDisplay
+    description="Create a new post for a specific user. Requires authentication."
+    method="POST"
+    parameters={[
+      {
+        description: "The unique identifier of the user",
+        location: "path",
+        name: "userId",
+        required: true,
+        type: "string",
+      },
+      {
+        description: "Save as draft instead of publishing",
+        location: "query",
+        name: "draft",
+        required: false,
+        type: "boolean",
+      },
+    ]}
+    path="/api/users/{userId}/posts"
+    requestBody={[
+      {
+        description: "The post title",
+        name: "title",
+        required: true,
+        type: "string",
+      },
+      {
+        description: "The post content in markdown format",
+        name: "content",
+        required: true,
+        type: "string",
+      },
+      {
+        description: "Tags for categorization",
+        items: { name: "tag", type: "string" },
+        name: "tags",
+        type: "array",
+      },
+      {
+        description: "Additional metadata",
+        name: "metadata",
+        properties: [
+          {
+            description: "SEO optimized title",
+            name: "seoTitle",
+            type: "string",
+          },
+          {
+            description: "Meta description",
+            name: "seoDescription",
+            type: "string",
+          },
+        ],
+        type: "object",
+      },
+    ]}
+    responseBody={[
+      { description: "Post ID", name: "id", required: true, type: "string" },
+      { name: "title", required: true, type: "string" },
+      { name: "content", required: true, type: "string" },
+      {
+        description: "ISO 8601 timestamp",
+        name: "createdAt",
+        required: true,
+        type: "string",
+      },
+      {
+        name: "author",
+        properties: [
+          { name: "id", required: true, type: "string" },
+          { name: "name", required: true, type: "string" },
+          { name: "avatar", type: "string" },
+        ],
+        required: true,
+        type: "object",
+      },
+    ]}
+  >
+    <SchemaDisplayHeader>
+      <div className="flex items-center gap-3">
+        <SchemaDisplayMethod />
+        <SchemaDisplayPath />
+      </div>
+    </SchemaDisplayHeader>
+    <SchemaDisplayDescription />
+    <SchemaDisplayContent>
+      <SchemaDisplayParameters />
+      <SchemaDisplayRequest />
+      <SchemaDisplayResponse />
+    </SchemaDisplayContent>
+  </SchemaDisplay>
+);
+
+export default Example;

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { Shimmer } from "@/components/ai-elements/shimmer";
+
+const Example = () => (
+  <div className="flex flex-col gap-6 p-8">
+    <div className="text-center">
+      <p className="mb-3 text-muted-foreground text-sm">Fast (1 second)</p>
+      <Shimmer duration={1}>Loading quickly...</Shimmer>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-muted-foreground text-sm">Default (2 seconds)</p>
+      <Shimmer duration={2}>Loading at normal speed...</Shimmer>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-muted-foreground text-sm">Slow (4 seconds)</p>
+      <Shimmer duration={4}>Loading slowly...</Shimmer>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-muted-foreground text-sm">
+        Very Slow (6 seconds)
+      </p>
+      <Shimmer duration={6}>Loading very slowly...</Shimmer>
+    </div>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,43 @@
+"use client";
+
+import { Shimmer } from "@/components/ai-elements/shimmer";
+
+const Example = () => (
+  <div className="flex flex-col gap-6 p-8">
+    <div className="text-center">
+      <p className="mb-3 text-muted-foreground text-sm">
+        As paragraph (default)
+      </p>
+      <Shimmer as="p">This is rendered as a paragraph</Shimmer>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-muted-foreground text-sm">As heading</p>
+      <Shimmer as="h2" className="font-bold text-2xl">
+        Large Heading with Shimmer
+      </Shimmer>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-muted-foreground text-sm">As span (inline)</p>
+      <div>
+        Processing your request{" "}
+        <Shimmer as="span" className="inline">
+          with AI magic
+        </Shimmer>
+        ...
+      </div>
+    </div>
+
+    <div className="text-center">
+      <p className="mb-3 text-muted-foreground text-sm">
+        As div with custom styling
+      </p>
+      <Shimmer as="div" className="font-semibold text-lg">
+        Custom styled shimmer text
+      </Shimmer>
+    </div>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,17 @@
+"use client";
+
+import { Shimmer } from "@/components/ai-elements/shimmer";
+
+const Example = () => (
+  <div className="flex flex-col items-center justify-center gap-4 p-8">
+    <Shimmer>This text has a shimmer effect</Shimmer>
+    <Shimmer as="h1" className="font-bold text-4xl">
+      Large Heading
+    </Shimmer>
+    <Shimmer duration={3} spread={3}>
+      Slower shimmer with wider spread
+    </Shimmer>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,19 @@
+"use client";
+
+import {
+  Snippet,
+  SnippetAddon,
+  SnippetCopyButton,
+  SnippetInput,
+} from "@/components/ai-elements/snippet";
+
+const Example = () => (
+  <Snippet code="git clone https://github.com/user/repo">
+    <SnippetInput />
+    <SnippetAddon align="inline-end">
+      <SnippetCopyButton />
+    </SnippetAddon>
+  </Snippet>
+);
+
+export default Example;

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

@@ -0,0 +1,25 @@
+"use client";
+
+import {
+  Snippet,
+  SnippetAddon,
+  SnippetCopyButton,
+  SnippetInput,
+  SnippetText,
+} from "@/components/ai-elements/snippet";
+
+const Example = () => (
+  <div className="flex size-full items-center justify-center p-4">
+    <Snippet className="max-w-sm" code="npx ai-elements add snippet">
+      <SnippetAddon className="pl-1">
+        <SnippetText>$</SnippetText>
+      </SnippetAddon>
+      <SnippetInput />
+      <SnippetAddon align="inline-end" className="pr-2">
+        <SnippetCopyButton />
+      </SnippetAddon>
+    </Snippet>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,39 @@
+"use client";
+
+import {
+  Source,
+  Sources,
+  SourcesContent,
+  SourcesTrigger,
+} from "@/components/ai-elements/sources";
+import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react";
+
+const sources = [
+  { href: "https://stripe.com/docs/api", title: "Stripe API Documentation" },
+  { href: "https://docs.github.com/en/rest", title: "GitHub REST API" },
+  {
+    href: "https://docs.aws.amazon.com/sdk-for-javascript/",
+    title: "AWS SDK for JavaScript",
+  },
+];
+
+const Example = () => (
+  <div style={{ height: "110px" }}>
+    <Sources>
+      <SourcesTrigger count={sources.length}>
+        <p className="font-medium">Using {sources.length} citations</p>
+        <ChevronDownIcon className="size-4" />
+      </SourcesTrigger>
+      <SourcesContent>
+        {sources.map((source) => (
+          <Source href={source.href} key={source.href}>
+            {source.title}
+            <ExternalLinkIcon className="size-4" />
+          </Source>
+        ))}
+      </SourcesContent>
+    </Sources>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,32 @@
+"use client";
+
+import {
+  Source,
+  Sources,
+  SourcesContent,
+  SourcesTrigger,
+} from "@/components/ai-elements/sources";
+
+const sources = [
+  { href: "https://stripe.com/docs/api", title: "Stripe API Documentation" },
+  { href: "https://docs.github.com/en/rest", title: "GitHub REST API" },
+  {
+    href: "https://docs.aws.amazon.com/sdk-for-javascript/",
+    title: "AWS SDK for JavaScript",
+  },
+];
+
+const Example = () => (
+  <div style={{ height: "110px" }}>
+    <Sources>
+      <SourcesTrigger count={sources.length} />
+      <SourcesContent>
+        {sources.map((source) => (
+          <Source href={source.href} key={source.href} title={source.title} />
+        ))}
+      </SourcesContent>
+    </Sources>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,84 @@
+"use client";
+
+import { SpeechInput } from "@/components/ai-elements/speech-input";
+import { useCallback, useState } from "react";
+
+/**
+ * Fallback handler for browsers that don't support Web Speech API (Firefox, Safari).
+ * This function receives recorded audio and should send it to a transcription service.
+ * Example uses OpenAI Whisper API - replace with your preferred service.
+ */
+const handleAudioRecorded = async (audioBlob: Blob): Promise<string> => {
+  const formData = new FormData();
+  formData.append("file", audioBlob, "audio.webm");
+  formData.append("model", "whisper-1");
+
+  const response = await fetch(
+    "https://api.openai.com/v1/audio/transcriptions",
+    {
+      body: formData,
+      headers: {
+        Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_API_KEY}`,
+      },
+      method: "POST",
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error("Transcription failed");
+  }
+
+  const data = await response.json();
+  return data.text;
+};
+
+const Example = () => {
+  const [transcript, setTranscript] = useState("");
+
+  const handleTranscriptionChange = useCallback((text: string) => {
+    setTranscript((prev) => {
+      const newText = prev ? `${prev} ${text}` : text;
+      return newText;
+    });
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setTranscript("");
+  }, []);
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-4">
+      <div className="flex gap-2">
+        <SpeechInput
+          onAudioRecorded={handleAudioRecorded}
+          onTranscriptionChange={handleTranscriptionChange}
+          size="icon"
+          variant="outline"
+        />
+        {transcript && (
+          <button
+            className="text-muted-foreground text-sm underline hover:text-foreground"
+            onClick={handleClear}
+            type="button"
+          >
+            Clear
+          </button>
+        )}
+      </div>
+      {transcript ? (
+        <div className="max-w-md rounded-lg border bg-card p-4 text-sm">
+          <p className="text-muted-foreground">
+            <strong>Transcript:</strong>
+          </p>
+          <p className="mt-2">{transcript}</p>
+        </div>
+      ) : (
+        <p className="text-muted-foreground text-sm">
+          Click the microphone to start speaking
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/stack-trace-collapsed.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import {
+  StackTrace,
+  StackTraceActions,
+  StackTraceContent,
+  StackTraceCopyButton,
+  StackTraceError,
+  StackTraceErrorMessage,
+  StackTraceErrorType,
+  StackTraceExpandButton,
+  StackTraceFrames,
+  StackTraceHeader,
+} from "@/components/ai-elements/stack-trace";
+
+const errorString = `TypeError: Cannot read properties of undefined (reading 'map')
+    at UserList (/app/src/components/UserList.tsx:15:23)
+    at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
+    at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)`;
+
+const Example = () => (
+  <StackTrace defaultOpen={false} trace={errorString}>
+    <StackTraceHeader>
+      <StackTraceError>
+        <StackTraceErrorType />
+        <StackTraceErrorMessage />
+      </StackTraceError>
+      <StackTraceActions>
+        <StackTraceCopyButton />
+        <StackTraceExpandButton />
+      </StackTraceActions>
+    </StackTraceHeader>
+    <StackTraceContent>
+      <StackTraceFrames />
+    </StackTraceContent>
+  </StackTrace>
+);
+
+export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/stack-trace-no-internal.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import {
+  StackTrace,
+  StackTraceActions,
+  StackTraceContent,
+  StackTraceCopyButton,
+  StackTraceError,
+  StackTraceErrorMessage,
+  StackTraceErrorType,
+  StackTraceExpandButton,
+  StackTraceFrames,
+  StackTraceHeader,
+} from "@/components/ai-elements/stack-trace";
+
+const errorString = `TypeError: Cannot read properties of undefined (reading 'map')
+    at UserList (/app/src/components/UserList.tsx:15:23)
+    at App (/app/src/App.tsx:42:5)
+    at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
+    at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
+    at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)`;
+
+const Example = () => (
+  <StackTrace defaultOpen trace={errorString}>
+    <StackTraceHeader>
+      <StackTraceError>
+        <StackTraceErrorType />
+        <StackTraceErrorMessage />
+      </StackTraceError>
+      <StackTraceActions>
+        <StackTraceCopyButton />
+        <StackTraceExpandButton />
+      </StackTraceActions>
+    </StackTraceHeader>
+    <StackTraceContent>
+      <StackTraceFrames showInternalFrames={false} />
+    </StackTraceContent>
+  </StackTrace>
+);
+
+export default Example;

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

@@ -0,0 +1,58 @@
+"use client";
+
+import {
+  StackTrace,
+  StackTraceActions,
+  StackTraceContent,
+  StackTraceCopyButton,
+  StackTraceError,
+  StackTraceErrorMessage,
+  StackTraceErrorType,
+  StackTraceExpandButton,
+  StackTraceFrames,
+  StackTraceHeader,
+} from "@/components/ai-elements/stack-trace";
+
+const handleFilePathClick = (path: string, line: number, col: number) => {
+  console.log(`Open file: ${path}:${line}:${col}`);
+};
+
+const handleCopy = () => {
+  console.log("Stack trace copied");
+};
+
+const sampleStackTrace = `TypeError: Cannot read properties of undefined (reading 'map')
+    at UserList (/app/components/UserList.tsx:15:23)
+    at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
+    at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
+    at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
+    at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
+    at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
+    at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
+    at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
+    at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22776:12)
+    at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)`;
+
+const Example = () => (
+  <StackTrace
+    defaultOpen
+    onFilePathClick={handleFilePathClick}
+    trace={sampleStackTrace}
+  >
+    <StackTraceHeader>
+      <StackTraceError>
+        <StackTraceErrorType />
+        <StackTraceErrorMessage />
+      </StackTraceError>
+      <StackTraceActions>
+        <StackTraceCopyButton onCopy={handleCopy} />
+        <StackTraceExpandButton />
+      </StackTraceActions>
+    </StackTraceHeader>
+    <StackTraceContent>
+      <StackTraceFrames />
+    </StackTraceContent>
+  </StackTrace>
+);
+
+export default Example;

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

@@ -0,0 +1,144 @@
+"use client";
+
+import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
+import {
+  PromptInput,
+  PromptInputButton,
+  PromptInputFooter,
+  PromptInputSelect,
+  PromptInputSelectContent,
+  PromptInputSelectItem,
+  PromptInputSelectTrigger,
+  PromptInputSelectValue,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputTools,
+} from "@/components/ai-elements/prompt-input";
+import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
+import { GlobeIcon, MicIcon, PlusIcon, SendIcon } from "lucide-react";
+import { nanoid } from "nanoid";
+import { memo, useCallback, useState } from "react";
+
+const suggestions: { key: string; value: string }[] = [
+  { key: nanoid(), value: "What are the latest trends in AI?" },
+  { key: nanoid(), value: "How does machine learning work?" },
+  { key: nanoid(), value: "Explain quantum computing" },
+  { key: nanoid(), value: "Best practices for React development" },
+  { key: nanoid(), value: "Tell me about TypeScript benefits" },
+  { key: nanoid(), value: "How to optimize database queries?" },
+  { key: nanoid(), value: "What is the difference between SQL and NoSQL?" },
+  { key: nanoid(), value: "Explain cloud computing basics" },
+];
+
+const models = [
+  { id: "gpt-4", name: "GPT-4" },
+  { id: "gpt-3.5-turbo", name: "GPT-3.5 Turbo" },
+  { id: "claude-2", name: "Claude 2" },
+  { id: "claude-instant", name: "Claude Instant" },
+  { id: "palm-2", name: "PaLM 2" },
+  { id: "llama-2-70b", name: "Llama 2 70B" },
+  { id: "llama-2-13b", name: "Llama 2 13B" },
+  { id: "cohere-command", name: "Command" },
+  { id: "mistral-7b", name: "Mistral 7B" },
+];
+
+const handleSubmit = (message: PromptInputMessage) => {
+  const hasText = Boolean(message.text);
+  const hasAttachments = Boolean(message.files?.length);
+
+  if (!(hasText || hasAttachments)) {
+    return;
+  }
+
+  console.log("Submitted message:", message.text || "Sent with attachments");
+  console.log("Attached files:", message.files);
+};
+
+interface SuggestionItemProps {
+  suggestion: { key: string; value: string };
+  onSuggestionClick: (value: string) => void;
+}
+
+const SuggestionItem = memo(
+  ({ suggestion, onSuggestionClick }: SuggestionItemProps) => {
+    const handleClick = useCallback(
+      () => onSuggestionClick(suggestion.value),
+      [onSuggestionClick, suggestion.value]
+    );
+    return (
+      <Suggestion
+        key={suggestion.key}
+        onClick={handleClick}
+        suggestion={suggestion.value}
+      />
+    );
+  }
+);
+
+SuggestionItem.displayName = "SuggestionItem";
+
+const Example = () => {
+  const [model, setModel] = useState<string>(models[0].id);
+  const [text, setText] = useState<string>("");
+
+  const handleSuggestionClick = useCallback((suggestion: string) => {
+    setText(suggestion);
+  }, []);
+
+  const handleTextChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => setText(e.target.value),
+    []
+  );
+
+  return (
+    <div className="grid gap-4">
+      <Suggestions>
+        {suggestions.map((suggestion) => (
+          <SuggestionItem
+            key={suggestion.key}
+            onSuggestionClick={handleSuggestionClick}
+            suggestion={suggestion}
+          />
+        ))}
+      </Suggestions>
+      <PromptInput onSubmit={handleSubmit}>
+        <PromptInputTextarea
+          onChange={handleTextChange}
+          placeholder="Ask me about anything..."
+          value={text}
+        />
+        <PromptInputFooter>
+          <PromptInputTools>
+            <PromptInputButton>
+              <PlusIcon size={16} />
+            </PromptInputButton>
+            <PromptInputButton>
+              <MicIcon size={16} />
+            </PromptInputButton>
+            <PromptInputButton>
+              <GlobeIcon size={16} />
+              <span>Search</span>
+            </PromptInputButton>
+            <PromptInputSelect onValueChange={setModel} value={model}>
+              <PromptInputSelectTrigger>
+                <PromptInputSelectValue />
+              </PromptInputSelectTrigger>
+              <PromptInputSelectContent>
+                {models.map((m) => (
+                  <PromptInputSelectItem key={m.id} value={m.id}>
+                    {m.name}
+                  </PromptInputSelectItem>
+                ))}
+              </PromptInputSelectContent>
+            </PromptInputSelect>
+          </PromptInputTools>
+          <PromptInputSubmit>
+            <SendIcon size={16} />
+          </PromptInputSubmit>
+        </PromptInputFooter>
+      </PromptInput>
+    </div>
+  );
+};
+
+export default Example;