@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -1,124 +0,0 @@
-# Suggestion
-
-A suggestion component that displays a horizontal row of clickable suggestions for user interaction.
-
-The `Suggestion` component displays a horizontal row of clickable suggestions for user interaction.
-
-See `scripts/suggestion.tsx` for this example.
-
-## Installation
-
-```bash
-npx ai-elements@latest add suggestion
-```
-
-## Usage with AI SDK
-
-Build a simple input with suggestions users can click to send a message to the LLM.
-
-Add the following component to your frontend:
-
-```tsx title="app/page.tsx"
-"use client";
-
-import {
-  PromptInput,
-  type PromptInputMessage,
-  PromptInputTextarea,
-  PromptInputSubmit,
-} from "@/components/ai-elements/prompt-input";
-import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
-import { useState } from "react";
-import { useChat } from "@ai-sdk/react";
-
-const suggestions = [
-  "Can you explain how to play tennis?",
-  "What is the weather in Tokyo?",
-  "How do I make a really good fish taco?",
-];
-
-const SuggestionDemo = () => {
-  const [input, setInput] = useState("");
-  const { sendMessage, status } = useChat();
-
-  const handleSubmit = (message: PromptInputMessage) => {
-    if (message.text.trim()) {
-      sendMessage({ text: message.text });
-      setInput("");
-    }
-  };
-
-  const handleSuggestionClick = (suggestion: string) => {
-    sendMessage({ text: suggestion });
-  };
-
-  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 flex-col gap-4">
-          <Suggestions>
-            {suggestions.map((suggestion) => (
-              <Suggestion
-                key={suggestion}
-                onClick={handleSuggestionClick}
-                suggestion={suggestion}
-              />
-            ))}
-          </Suggestions>
-          <PromptInput
-            onSubmit={handleSubmit}
-            className="mt-4 w-full max-w-2xl mx-auto relative"
-          >
-            <PromptInputTextarea
-              value={input}
-              placeholder="Say something..."
-              onChange={(e) => setInput(e.currentTarget.value)}
-              className="pr-12"
-            />
-            <PromptInputSubmit
-              status={status === "streaming" ? "streaming" : "ready"}
-              disabled={!input.trim()}
-              className="absolute bottom-1 right-1"
-            />
-          </PromptInput>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SuggestionDemo;
-```
-
-## Features
-
-- Horizontal row of clickable suggestion buttons
-- Customizable styling with variant and size options
-- Flexible layout that wraps suggestions on smaller screens
-- onClick callback that emits the selected suggestion string
-- Support for both individual suggestions and suggestion lists
-- Clean, modern styling with hover effects
-- Responsive design with mobile-friendly touch targets
-- TypeScript support with proper type definitions
-
-## Examples
-
-### Usage with AI Input
-
-See `scripts/suggestion-input.tsx` for this example.
-
-## Props
-
-### `<Suggestions />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof ScrollArea>` | - | Any other props are spread to the underlying ScrollArea component. |
-
-### `<Suggestion />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `suggestion` | `string` | Required | The suggestion string to display and emit on click. |
-| `onClick` | `(suggestion: string) => void` | - | Callback fired when the suggestion is clicked. |
-| `...props` | `Omit<React.ComponentProps<typeof Button>, ` | - | Any other props are spread to the underlying shadcn/ui Button component. |

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

@@ -1,222 +0,0 @@
-# Task
-
-A collapsible task list component for displaying AI workflow progress, with status indicators and optional descriptions.
-
-The `Task` component provides a structured way to display task lists or workflow progress with collapsible details, status indicators, and progress tracking. It consists of a main `Task` container with `TaskTrigger` for the clickable header and `TaskContent` for the collapsible content area.
-
-See `scripts/task.tsx` for this example.
-
-## Installation
-
-```bash
-npx ai-elements@latest add task
-```
-
-## Usage with AI SDK
-
-Build a mock async programming agent using [`experimental_generateObject`](/docs/reference/ai-sdk-ui/use-object).
-
-Add the following component to your frontend:
-
-```tsx title="app/page.tsx"
-"use client";
-
-import { experimental_useObject as useObject } from "@ai-sdk/react";
-import {
-  Task,
-  TaskItem,
-  TaskItemFile,
-  TaskTrigger,
-  TaskContent,
-} from "@/components/ai-elements/task";
-import { Button } from "@/components/ui/button";
-import { tasksSchema } from "@/app/api/task/route";
-import {
-  SiReact,
-  SiTypescript,
-  SiJavascript,
-  SiCss,
-  SiHtml5,
-  SiJson,
-  SiMarkdown,
-} from "@icons-pack/react-simple-icons";
-
-const iconMap = {
-  react: { component: SiReact, color: "#149ECA" },
-  typescript: { component: SiTypescript, color: "#3178C6" },
-  javascript: { component: SiJavascript, color: "#F7DF1E" },
-  css: { component: SiCss, color: "#1572B6" },
-  html: { component: SiHtml5, color: "#E34F26" },
-  json: { component: SiJson, color: "#000000" },
-  markdown: { component: SiMarkdown, color: "#000000" },
-};
-
-const TaskDemo = () => {
-  const { object, submit, isLoading } = useObject({
-    api: "/api/agent",
-    schema: tasksSchema,
-  });
-
-  const handleSubmit = (taskType: string) => {
-    submit({ prompt: taskType });
-  };
-
-  const renderTaskItem = (item: any, index: number) => {
-    if (item?.type === "file" && item.file) {
-      const iconInfo = iconMap[item.file.icon as keyof typeof iconMap];
-      if (iconInfo) {
-        const IconComponent = iconInfo.component;
-        return (
-          <span className="inline-flex items-center gap-1" key={index}>
-            {item.text}
-            <TaskItemFile>
-              <IconComponent
-                color={item.file.color || iconInfo.color}
-                className="size-4"
-              />
-              <span>{item.file.name}</span>
-            </TaskItemFile>
-          </span>
-        );
-      }
-    }
-    return item?.text || "";
-  };
-
-  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 gap-2 mb-6 flex-wrap">
-          <Button
-            onClick={() => handleSubmit("React component development")}
-            disabled={isLoading}
-            variant="outline"
-          >
-            React Development
-          </Button>
-        </div>
-
-        <div className="flex-1 overflow-auto space-y-4">
-          {isLoading && !object && (
-            <div className="text-muted-foreground">Generating tasks...</div>
-          )}
-
-          {object?.tasks?.map((task: any, taskIndex: number) => (
-            <Task key={taskIndex} defaultOpen={taskIndex === 0}>
-              <TaskTrigger title={task.title || "Loading..."} />
-              <TaskContent>
-                {task.items?.map((item: any, itemIndex: number) => (
-                  <TaskItem key={itemIndex}>
-                    {renderTaskItem(item, itemIndex)}
-                  </TaskItem>
-                ))}
-              </TaskContent>
-            </Task>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TaskDemo;
-```
-
-Add the following route to your backend:
-
-```ts title="app/api/agent.ts"
-import { streamObject } from "ai";
-import { z } from "zod";
-
-export const taskItemSchema = z.object({
-  type: z.enum(["text", "file"]),
-  text: z.string(),
-  file: z
-    .object({
-      name: z.string(),
-      icon: z.string(),
-      color: z.string().optional(),
-    })
-    .optional(),
-});
-
-export const taskSchema = z.object({
-  title: z.string(),
-  items: z.array(taskItemSchema),
-  status: z.enum(["pending", "in_progress", "completed"]),
-});
-
-export const tasksSchema = z.object({
-  tasks: z.array(taskSchema),
-});
-
-// Allow streaming responses up to 30 seconds
-export const maxDuration = 30;
-
-export async function POST(req: Request) {
-  const { prompt } = await req.json();
-
-  const result = streamObject({
-    model: "openai/gpt-4o",
-    schema: tasksSchema,
-    prompt: `You are an AI assistant that generates realistic development task workflows. Generate a set of tasks that would occur during ${prompt}.
-
-    Each task should have:
-    - A descriptive title
-    - Multiple task items showing the progression
-    - Some items should be plain text, others should reference files
-    - Use realistic file names and appropriate file types
-    - Status should progress from pending to in_progress to completed
-
-    For file items, use these icon types: 'react', 'typescript', 'javascript', 'css', 'html', 'json', 'markdown'
-
-    Generate 3-4 tasks total, with 4-6 items each.`,
-  });
-
-  return result.toTextStreamResponse();
-}
-```
-
-## Features
-
-- Visual icons for pending, in-progress, completed, and error states
-- Expandable content for task descriptions and additional information
-- Built-in progress counter showing completed vs total tasks
-- Optional progressive reveal of tasks with customizable timing
-- Support for custom content within task items
-- Full type safety with proper TypeScript definitions
-- Keyboard navigation and screen reader support
-
-## Props
-
-### `<Task />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `defaultOpen` | `boolean` | `true` | Whether the task is open by default. |
-| `...props` | `React.ComponentProps<typeof Collapsible>` | - | Any other props are spread to the root Collapsible component. |
-
-### `<TaskTrigger />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | Required | The title of the task that will be displayed in the trigger. |
-| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | - | Any other props are spread to the CollapsibleTrigger component. |
-
-### `<TaskContent />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | - | Any other props are spread to the CollapsibleContent component. |
-
-### `<TaskItem />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |
-
-### `<TaskItemFile />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<` | - | Any other props are spread to the underlying div. |

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

@@ -1,103 +0,0 @@
-# Terminal
-
-Display streaming console output with full ANSI color support.
-
-The `Terminal` component displays console output with ANSI color support, streaming indicators, and auto-scroll functionality.
-
-See `scripts/terminal.tsx` for this example.
-
-## Installation
-
-```bash
-npx ai-elements@latest add terminal
-```
-
-## Features
-
-- Full ANSI color support (256 colors, bold, italic, underline)
-- Streaming mode with cursor animation
-- Auto-scroll to latest output
-- Copy output to clipboard
-- Clear button support
-- Dark terminal theme
-
-## ANSI Support
-
-The Terminal uses `ansi-to-react` to parse ANSI escape codes:
-
-```bash
-\x1b[32m✓\x1b[0m Success    # Green checkmark
-\x1b[31m✗\x1b[0m Error      # Red X
-\x1b[33mwarn\x1b[0m Warning   # Yellow text
-\x1b[1mBold\x1b[0m           # Bold text
-```
-
-## Examples
-
-### Basic Usage
-
-See `scripts/terminal-basic.tsx` for this example.
-
-### Streaming Mode
-
-See `scripts/terminal-streaming.tsx` for this example.
-
-### With Clear Button
-
-See `scripts/terminal-clear.tsx` for this example.
-
-## Props
-
-### `<Terminal />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `output` | `string` | - | Terminal output text (supports ANSI codes). |
-| `isStreaming` | `boolean` | `false` | Show streaming indicator. |
-| `autoScroll` | `boolean` | `true` | Auto-scroll to bottom on new output. |
-| `onClear` | `() => void` | - | Callback to clear output (enables clear button). |
-| `className` | `string` | - | Additional CSS classes. |
-
-### `<TerminalCopyButton />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `onCopy` | `() => void` | - | Callback after successful copy. |
-| `onError` | `(error: Error) => void` | - | Callback if copying fails. |
-| `timeout` | `number` | `2000` | Duration to show copied state (ms). |
-
-### `<TerminalHeader />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
-
-### `<TerminalTitle />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
-
-### `<TerminalStatus />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
-
-### `<TerminalActions />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
-
-### `<TerminalClearButton />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof Button>` | - | Any other props are spread to the Button component. |
-
-### `<TerminalContent />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |

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

@@ -1,157 +0,0 @@
-# Test Results
-
-Display test suite results with pass/fail/skip status and error details.
-
-The `TestResults` component displays test suite results including summary statistics, progress, individual tests, and error details.
-
-See `scripts/test-results.tsx` for this example.
-
-## Installation
-
-```bash
-npx ai-elements@latest add test-results
-```
-
-## Features
-
-- Summary statistics (passed/failed/skipped)
-- Progress bar visualization
-- Collapsible test suites
-- Individual test status and duration
-- Error messages with stack traces
-- Color-coded status indicators
-
-## Status Colors
-
-| Status    | Color           | Use Case         |
-| --------- | --------------- | ---------------- |
-| `passed`  | Green           | Test succeeded   |
-| `failed`  | Red             | Test failed      |
-| `skipped` | Yellow          | Test skipped     |
-| `running` | Blue (animated) | Test in progress |
-
-## Examples
-
-### Basic Usage
-
-See `scripts/test-results-basic.tsx` for this example.
-
-### With Test Suites
-
-See `scripts/test-results-suites.tsx` for this example.
-
-### With Error Details
-
-See `scripts/test-results-errors.tsx` for this example.
-
-## Props
-
-### `<TestResults />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `summary` | `unknown` | - | Test results summary. |
-| `className` | `string` | - | Additional CSS classes. |
-
-### `<TestSuite />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | - | Suite name. |
-| `status` | `unknown` | - | Overall suite status. |
-| `defaultOpen` | `boolean` | - | Initially expanded. |
-
-### `<Test />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `name` | `string` | - | Test name. |
-| `status` | `unknown` | - | Test status. |
-| `duration` | `number` | - | Test duration in ms. |
-
-### `<TestResultsHeader />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
-
-### `<TestResultsSummary />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
-
-### `<TestResultsDuration />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Any other props are spread to the span element. |
-
-### `<TestResultsProgress />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
-
-### `<TestResultsContent />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
-
-### `<TestSuiteName />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | - | Any other props are spread to the CollapsibleTrigger component. |
-
-### `<TestSuiteStats />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `passed` | `number` | `0` | Number of passed tests. |
-| `failed` | `number` | `0` | Number of failed tests. |
-| `skipped` | `number` | `0` | Number of skipped tests. |
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
-
-### `<TestSuiteContent />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | - | Any other props are spread to the CollapsibleContent component. |
-
-### `<TestStatus />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Any other props are spread to the span element. |
-
-### `<TestName />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Any other props are spread to the span element. |
-
-### `<TestDuration />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLSpanElement>` | - | Any other props are spread to the span element. |
-
-### `<TestError />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLDivElement>` | - | Any other props are spread to the div element. |
-
-### `<TestErrorMessage />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLParagraphElement>` | - | Any other props are spread to the p element. |
-
-### `<TestErrorStack />`
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `...props` | `React.HTMLAttributes<HTMLPreElement>` | - | Any other props are spread to the pre element. |