@goldencomm/create-baseline 0.0.1

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

@@ -0,0 +1,32 @@
+"use client";
+
+import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
+
+const suggestions = [
+  "What are the latest trends in AI?",
+  "How does machine learning work?",
+  "Explain quantum computing",
+  "Best practices for React development",
+  "Tell me about TypeScript benefits",
+  "How to optimize database queries?",
+  "What is the difference between SQL and NoSQL?",
+  "Explain cloud computing basics",
+];
+
+const handleSuggestionClick = (suggestion: string) => {
+  console.log("Selected suggestion:", suggestion);
+};
+
+const Example = () => (
+  <Suggestions>
+    {suggestions.map((suggestion) => (
+      <Suggestion
+        key={suggestion}
+        onClick={handleSuggestionClick}
+        suggestion={suggestion}
+      />
+    ))}
+  </Suggestions>
+);
+
+export default Example;

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

@@ -0,0 +1,59 @@
+"use client";
+
+import { SiReact } from "@icons-pack/react-simple-icons";
+import {
+  Task,
+  TaskContent,
+  TaskItem,
+  TaskItemFile,
+  TaskTrigger,
+} from "@/components/ai-elements/task";
+import { nanoid } from "nanoid";
+import type { ReactNode } from "react";
+
+const Example = () => {
+  const tasks: { key: string; value: ReactNode }[] = [
+    { key: nanoid(), value: 'Searching "app/page.tsx, components structure"' },
+    {
+      key: nanoid(),
+      value: (
+        <span className="inline-flex items-center gap-1" key="read-page-tsx">
+          Read
+          <TaskItemFile>
+            <SiReact className="size-4" color="#149ECA" />
+            <span>page.tsx</span>
+          </TaskItemFile>
+        </span>
+      ),
+    },
+    { key: nanoid(), value: "Scanning 52 files" },
+    { key: nanoid(), value: "Scanning 2 files" },
+    {
+      key: nanoid(),
+      value: (
+        <span className="inline-flex items-center gap-1" key="read-layout-tsx">
+          Reading files
+          <TaskItemFile>
+            <SiReact className="size-4" color="#149ECA" />
+            <span>layout.tsx</span>
+          </TaskItemFile>
+        </span>
+      ),
+    },
+  ];
+
+  return (
+    <div style={{ height: "200px" }}>
+      <Task className="w-full">
+        <TaskTrigger title="Found project files" />
+        <TaskContent>
+          {tasks.map((task) => (
+            <TaskItem key={task.key}>{task.value}</TaskItem>
+          ))}
+        </TaskContent>
+      </Task>
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,7 @@
+"use client";
+
+import { Terminal } from "@/components/ai-elements/terminal";
+
+const Example = () => <Terminal output="npm install complete" />;
+
+export default Example;

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

@@ -0,0 +1,19 @@
+"use client";
+
+import { Terminal } from "@/components/ai-elements/terminal";
+import { useCallback, useState } from "react";
+
+const initialOutput = `\u001B[36m$\u001B[0m npm run build
+Building project...
+\u001B[32m✓\u001B[0m Compiled successfully
+\u001B[32m✓\u001B[0m Bundle size: 124kb`;
+
+const Example = () => {
+  const [output, setOutput] = useState(initialOutput);
+
+  const handleClear = useCallback(() => setOutput(""), []);
+
+  return <Terminal onClear={handleClear} output={output} />;
+};
+
+export default Example;

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

@@ -0,0 +1,38 @@
+"use client";
+
+import { Terminal } from "@/components/ai-elements/terminal";
+import { useEffect, useState } from "react";
+
+const lines = [
+  "\u001B[36m$\u001B[0m npm install",
+  "Installing dependencies...",
+  "\u001B[32m✓\u001B[0m react@19.0.0",
+  "\u001B[32m✓\u001B[0m typescript@5.0.0",
+  "\u001B[32m✓\u001B[0m vite@5.0.0",
+  "",
+  "\u001B[32mDone!\u001B[0m Installed 3 packages in 1.2s",
+];
+
+const Example = () => {
+  const [output, setOutput] = useState("");
+  const [isStreaming, setIsStreaming] = useState(true);
+
+  useEffect(() => {
+    let lineIndex = 0;
+    const interval = setInterval(() => {
+      if (lineIndex < lines.length) {
+        setOutput((prev) => prev + (prev ? "\n" : "") + lines[lineIndex]);
+        lineIndex += 1;
+      } else {
+        setIsStreaming(false);
+        clearInterval(interval);
+      }
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return <Terminal autoScroll isStreaming={isStreaming} output={output} />;
+};
+
+export default Example;

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

@@ -0,0 +1,82 @@
+"use client";
+
+import {
+  Terminal,
+  TerminalActions,
+  TerminalClearButton,
+  TerminalContent,
+  TerminalCopyButton,
+  TerminalHeader,
+  TerminalStatus,
+  TerminalTitle,
+} from "@/components/ai-elements/terminal";
+import { useCallback, useEffect, useState } from "react";
+
+const handleTerminalCopy = () => {
+  console.log("Copied!");
+};
+
+const ansiOutput = `\u001B[32m✓\u001B[0m Compiled successfully in 1.2s
+
+\u001B[1m\u001B[34minfo\u001B[0m  - Collecting page data...
+\u001B[1m\u001B[34minfo\u001B[0m  - Generating static pages (0/3)
+\u001B[32m✓\u001B[0m Generated static pages (3/3)
+
+\u001B[1m\u001B[33mwarn\u001B[0m  - Using \u001B[1mexperimental\u001B[0m server actions
+
+\u001B[36mRoute (app)\u001B[0m                              \u001B[36mSize\u001B[0m     \u001B[36mFirst Load JS\u001B[0m
+\u001B[37m┌ ○ /\u001B[0m                                    \u001B[32m5.2 kB\u001B[0m   \u001B[32m87.3 kB\u001B[0m
+\u001B[37m├ ○ /about\u001B[0m                               \u001B[32m2.1 kB\u001B[0m   \u001B[32m84.2 kB\u001B[0m
+\u001B[37m└ ○ /contact\u001B[0m                             \u001B[32m3.8 kB\u001B[0m   \u001B[32m85.9 kB\u001B[0m
+
+\u001B[32m✓\u001B[0m Build completed successfully!
+\u001B[90mTotal time: 3.45s\u001B[0m
+`;
+
+const Example = () => {
+  const [output, setOutput] = useState("");
+  const [isStreaming, setIsStreaming] = useState(true);
+
+  useEffect(() => {
+    let index = 0;
+    const interval = setInterval(() => {
+      if (index < ansiOutput.length) {
+        setOutput(ansiOutput.slice(0, index + 10));
+        index += 10;
+      } else {
+        setIsStreaming(false);
+        clearInterval(interval);
+      }
+    }, 20);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setOutput("");
+    setIsStreaming(false);
+  }, []);
+
+  return (
+    <Terminal
+      autoScroll={true}
+      isStreaming={isStreaming}
+      onClear={handleClear}
+      output={output}
+    >
+      <TerminalHeader>
+        <TerminalTitle>Build Output</TerminalTitle>
+        <div className="flex items-center gap-1">
+          <TerminalStatus />
+          <TerminalActions>
+            <TerminalCopyButton onCopy={handleTerminalCopy} />
+            <TerminalClearButton />
+          </TerminalActions>
+        </div>
+      </TerminalHeader>
+      <TerminalContent />
+    </Terminal>
+  );
+};
+
+export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/test-results-basic.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import {
+  TestResults,
+  TestResultsDuration,
+  TestResultsHeader,
+  TestResultsSummary,
+} from "@/components/ai-elements/test-results";
+
+const Example = () => (
+  <TestResults
+    summary={{
+      duration: 3500,
+      failed: 2,
+      passed: 10,
+      skipped: 1,
+      total: 13,
+    }}
+  >
+    <TestResultsHeader>
+      <TestResultsSummary />
+      <TestResultsDuration />
+    </TestResultsHeader>
+  </TestResults>
+);
+
+export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/test-results-errors.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import {
+  Test,
+  TestError,
+  TestErrorMessage,
+  TestErrorStack,
+  TestResults,
+  TestResultsContent,
+  TestResultsHeader,
+  TestResultsSummary,
+  TestSuite,
+  TestSuiteContent,
+  TestSuiteName,
+} from "@/components/ai-elements/test-results";
+
+const stackTrace = `    at Object.<anonymous> (/app/src/api.test.ts:45:12)
+    at Module._compile (node:internal/modules/cjs/loader:1369:14)
+    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)`;
+
+const Example = () => (
+  <TestResults
+    summary={{
+      duration: 130,
+      failed: 1,
+      passed: 1,
+      skipped: 0,
+      total: 2,
+    }}
+  >
+    <TestResultsHeader>
+      <TestResultsSummary />
+    </TestResultsHeader>
+    <TestResultsContent>
+      <TestSuite defaultOpen name="API" status="failed">
+        <TestSuiteName />
+        <TestSuiteContent>
+          <Test duration={45} name="should fetch data" status="passed" />
+          <Test duration={85} name="should update" status="failed">
+            <TestError>
+              <TestErrorMessage>Expected 200, got 500</TestErrorMessage>
+              <TestErrorStack>{stackTrace}</TestErrorStack>
+            </TestError>
+          </Test>
+        </TestSuiteContent>
+      </TestSuite>
+    </TestResultsContent>
+  </TestResults>
+);
+
+export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/test-results-suites.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  Test,
+  TestResults,
+  TestResultsContent,
+  TestResultsHeader,
+  TestResultsSummary,
+  TestSuite,
+  TestSuiteContent,
+  TestSuiteName,
+} from "@/components/ai-elements/test-results";
+
+const Example = () => (
+  <TestResults
+    summary={{
+      duration: 150,
+      failed: 0,
+      passed: 3,
+      skipped: 0,
+      total: 3,
+    }}
+  >
+    <TestResultsHeader>
+      <TestResultsSummary />
+    </TestResultsHeader>
+    <TestResultsContent>
+      <TestSuite name="Auth" status="passed">
+        <TestSuiteName />
+        <TestSuiteContent>
+          <Test duration={45} name="should login" status="passed" />
+          <Test duration={32} name="should logout" status="passed" />
+          <Test duration={73} name="should refresh token" status="passed" />
+        </TestSuiteContent>
+      </TestSuite>
+    </TestResultsContent>
+  </TestResults>
+);
+
+export default Example;

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

@@ -0,0 +1,102 @@
+"use client";
+
+import {
+  Test,
+  TestError,
+  TestErrorMessage,
+  TestErrorStack,
+  TestResults,
+  TestResultsContent,
+  TestResultsDuration,
+  TestResultsHeader,
+  TestResultsProgress,
+  TestResultsSummary,
+  TestSuite,
+  TestSuiteContent,
+  TestSuiteName,
+} from "@/components/ai-elements/test-results";
+
+const Example = () => (
+  <TestResults
+    summary={{
+      duration: 3245,
+      failed: 2,
+      passed: 12,
+      skipped: 1,
+      total: 15,
+    }}
+  >
+    <TestResultsHeader>
+      <TestResultsSummary />
+      <TestResultsDuration />
+    </TestResultsHeader>
+    <div className="border-b px-4 py-3">
+      <TestResultsProgress />
+    </div>
+    <TestResultsContent>
+      <TestSuite defaultOpen={true} name="Authentication" status="passed">
+        <TestSuiteName />
+        <TestSuiteContent>
+          <Test
+            duration={45}
+            name="should login with valid credentials"
+            status="passed"
+          />
+          <Test
+            duration={32}
+            name="should reject invalid password"
+            status="passed"
+          />
+          <Test
+            duration={28}
+            name="should handle expired tokens"
+            status="passed"
+          />
+        </TestSuiteContent>
+      </TestSuite>
+
+      <TestSuite defaultOpen={true} name="User API" status="failed">
+        <TestSuiteName />
+        <TestSuiteContent>
+          <Test duration={120} name="should create new user" status="passed" />
+          <Test duration={85} name="should update user profile" status="failed">
+            <TestError>
+              <TestErrorMessage>
+                Expected status 200 but received 500
+              </TestErrorMessage>
+              <TestErrorStack>
+                {`  at Object.<anonymous> (src/user.test.ts:45:12)
+  at Promise.then.completed (node_modules/jest-circus/build/utils.js:391:28)`}
+              </TestErrorStack>
+            </TestError>
+          </Test>
+          <Test name="should delete user" status="skipped" />
+        </TestSuiteContent>
+      </TestSuite>
+
+      <TestSuite name="Database" status="failed">
+        <TestSuiteName />
+        <TestSuiteContent>
+          <Test
+            duration={200}
+            name="should connect to database"
+            status="passed"
+          />
+          <Test
+            duration={5000}
+            name="should handle connection timeout"
+            status="failed"
+          >
+            <TestError>
+              <TestErrorMessage>
+                Connection timed out after 5000ms
+              </TestErrorMessage>
+            </TestError>
+          </Test>
+        </TestSuiteContent>
+      </TestSuite>
+    </TestResultsContent>
+  </TestResults>
+);
+
+export default Example;

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

@@ -0,0 +1,31 @@
+"use client";
+
+import { Tool, ToolContent, ToolHeader, ToolInput } from "@/components/ai-elements/tool";
+import { nanoid } from "nanoid";
+
+const toolCall = {
+  errorText: undefined,
+  input: {
+    prompt: "A futuristic cityscape at sunset with flying cars",
+    quality: "high",
+    resolution: "1024x1024",
+    style: "digital_art",
+  },
+  output: undefined,
+  state: "input-available" as const,
+  toolCallId: nanoid(),
+  type: "tool-image_generation" as const,
+};
+
+const Example = () => (
+  <div style={{ height: "500px" }}>
+    <Tool>
+      <ToolHeader state={toolCall.state} type={toolCall.type} />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+      </ToolContent>
+    </Tool>
+  </div>
+);
+
+export default Example;

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

@@ -0,0 +1,30 @@
+"use client";
+
+import { Tool, ToolContent, ToolHeader, ToolInput } from "@/components/ai-elements/tool";
+import { nanoid } from "nanoid";
+
+const toolCall = {
+  errorText: undefined,
+  input: {
+    include_snippets: true,
+    max_results: 10,
+    query: "latest AI market trends 2024",
+  },
+  output: undefined,
+  state: "input-streaming" as const,
+  toolCallId: nanoid(),
+  type: "tool-web_search" as const,
+};
+
+const Example = () => (
+  <div style={{ height: "500px" }}>
+    <Tool>
+      <ToolHeader state={toolCall.state} type={toolCall.type} />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+      </ToolContent>
+    </Tool>
+  </div>
+);
+
+export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/tool-output-available.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { CodeBlock } from "@/components/ai-elements/code-block";
+import {
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from "@/components/ai-elements/tool";
+import type { ToolUIPart } from "ai";
+import { nanoid } from "nanoid";
+
+const toolCall: ToolUIPart = {
+  errorText: undefined,
+  input: {
+    database: "analytics",
+    params: ["2024-01-01"],
+    query: "SELECT COUNT(*) FROM users WHERE created_at >= ?",
+  },
+  output: [
+    {
+      "Created At": "2024-01-15",
+      Email: "john@example.com",
+      Name: "John Doe",
+      "User ID": 1,
+    },
+    {
+      "Created At": "2024-01-20",
+      Email: "jane@example.com",
+      Name: "Jane Smith",
+      "User ID": 2,
+    },
+    {
+      "Created At": "2024-02-01",
+      Email: "bob@example.com",
+      Name: "Bob Wilson",
+      "User ID": 3,
+    },
+    {
+      "Created At": "2024-02-10",
+      Email: "alice@example.com",
+      Name: "Alice Brown",
+      "User ID": 4,
+    },
+    {
+      "Created At": "2024-02-15",
+      Email: "charlie@example.com",
+      Name: "Charlie Davis",
+      "User ID": 5,
+    },
+  ],
+  state: "output-available" as const,
+  toolCallId: nanoid(),
+  type: "tool-database_query" as const,
+};
+
+const Example = () => (
+  <div style={{ height: "500px" }}>
+    <Tool>
+      <ToolHeader state={toolCall.state} type={toolCall.type} />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+        {toolCall.state === "output-available" && (
+          <ToolOutput
+            errorText={toolCall.errorText}
+            output={
+              <CodeBlock
+                code={JSON.stringify(toolCall.output)}
+                language="json"
+              />
+            }
+          />
+        )}
+      </ToolContent>
+    </Tool>
+  </div>
+);
+
+export default Example;

package/templates/next/.claude/skills/ai-elements/scripts/tool-output-error.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import {
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from "@/components/ai-elements/tool";
+import type { ToolUIPart } from "ai";
+
+const toolCall: ToolUIPart = {
+  errorText:
+    "Connection timeout: The request took longer than 5000ms to complete. Please check your network connection and try again.",
+  input: {
+    headers: {
+      Authorization: "Bearer token123",
+      "Content-Type": "application/json",
+    },
+    method: "GET",
+    timeout: 5000,
+    url: "https://api.example.com/data",
+  },
+  output: undefined,
+  state: "output-error" as const,
+  toolCallId: "api_request_1",
+  type: "tool-api_request" as const,
+};
+
+const Example = () => (
+  <div style={{ height: "500px" }}>
+    <Tool>
+      <ToolHeader state={toolCall.state} type={toolCall.type} />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+        {toolCall.state === "output-error" && (
+          <ToolOutput errorText={toolCall.errorText} output={toolCall.output} />
+        )}
+      </ToolContent>
+    </Tool>
+  </div>
+);
+
+export default Example;