@goldencomm/create-baseline 0.0.1

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

@@ -0,0 +1,110 @@
+"use client";
+
+import type { PersonaState } from "@/components/ai-elements/persona";
+import { Persona } from "@/components/ai-elements/persona";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { LucideIcon } from "lucide-react";
+import {
+  BrainIcon,
+  CircleIcon,
+  EyeClosedIcon,
+  MegaphoneIcon,
+  MicIcon,
+} from "lucide-react";
+import { memo, useCallback, useState } from "react";
+
+const states: {
+  state: PersonaState;
+  icon: LucideIcon;
+  label: string;
+}[] = [
+  {
+    icon: CircleIcon,
+    label: "Idle",
+    state: "idle",
+  },
+  {
+    icon: MicIcon,
+    label: "Listening",
+    state: "listening",
+  },
+  {
+    icon: BrainIcon,
+    label: "Thinking",
+    state: "thinking",
+  },
+  {
+    icon: MegaphoneIcon,
+    label: "Speaking",
+    state: "speaking",
+  },
+  {
+    icon: EyeClosedIcon,
+    label: "Asleep",
+    state: "asleep",
+  },
+];
+
+interface StateButtonProps {
+  state: (typeof states)[0];
+  currentState: PersonaState;
+  onStateChange: (state: PersonaState) => void;
+}
+
+const StateButton = memo(
+  ({ state, currentState, onStateChange }: StateButtonProps) => {
+    const handleClick = useCallback(
+      () => onStateChange(state.state),
+      [onStateChange, state.state]
+    );
+    return (
+      <Tooltip key={state.state}>
+        <TooltipTrigger asChild>
+          <Button
+            onClick={handleClick}
+            size="icon-sm"
+            variant={currentState === state.state ? "default" : "outline"}
+          >
+            <state.icon className="size-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{state.label}</TooltipContent>
+      </Tooltip>
+    );
+  }
+);
+
+StateButton.displayName = "StateButton";
+
+const Example = () => {
+  const [currentState, setCurrentState] = useState<PersonaState>("idle");
+
+  const handleStateChange = useCallback((state: PersonaState) => {
+    setCurrentState(state);
+  }, []);
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-4">
+      <Persona className="size-32" state={currentState} variant="halo" />
+
+      <ButtonGroup orientation="horizontal">
+        {states.map((state) => (
+          <StateButton
+            currentState={currentState}
+            key={state.state}
+            onStateChange={handleStateChange}
+            state={state}
+          />
+        ))}
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,110 @@
+"use client";
+
+import type { PersonaState } from "@/components/ai-elements/persona";
+import { Persona } from "@/components/ai-elements/persona";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { LucideIcon } from "lucide-react";
+import {
+  BrainIcon,
+  CircleIcon,
+  EyeClosedIcon,
+  MegaphoneIcon,
+  MicIcon,
+} from "lucide-react";
+import { memo, useCallback, useState } from "react";
+
+const states: {
+  state: PersonaState;
+  icon: LucideIcon;
+  label: string;
+}[] = [
+  {
+    icon: CircleIcon,
+    label: "Idle",
+    state: "idle",
+  },
+  {
+    icon: MicIcon,
+    label: "Listening",
+    state: "listening",
+  },
+  {
+    icon: BrainIcon,
+    label: "Thinking",
+    state: "thinking",
+  },
+  {
+    icon: MegaphoneIcon,
+    label: "Speaking",
+    state: "speaking",
+  },
+  {
+    icon: EyeClosedIcon,
+    label: "Asleep",
+    state: "asleep",
+  },
+];
+
+interface StateButtonProps {
+  state: (typeof states)[0];
+  currentState: PersonaState;
+  onStateChange: (state: PersonaState) => void;
+}
+
+const StateButton = memo(
+  ({ state, currentState, onStateChange }: StateButtonProps) => {
+    const handleClick = useCallback(
+      () => onStateChange(state.state),
+      [onStateChange, state.state]
+    );
+    return (
+      <Tooltip key={state.state}>
+        <TooltipTrigger asChild>
+          <Button
+            onClick={handleClick}
+            size="icon-sm"
+            variant={currentState === state.state ? "default" : "outline"}
+          >
+            <state.icon className="size-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{state.label}</TooltipContent>
+      </Tooltip>
+    );
+  }
+);
+
+StateButton.displayName = "StateButton";
+
+const Example = () => {
+  const [currentState, setCurrentState] = useState<PersonaState>("idle");
+
+  const handleStateChange = useCallback((state: PersonaState) => {
+    setCurrentState(state);
+  }, []);
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-4">
+      <Persona className="size-32" state={currentState} variant="mana" />
+
+      <ButtonGroup orientation="horizontal">
+        {states.map((state) => (
+          <StateButton
+            currentState={currentState}
+            key={state.state}
+            onStateChange={handleStateChange}
+            state={state}
+          />
+        ))}
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,110 @@
+"use client";
+
+import type { PersonaState } from "@/components/ai-elements/persona";
+import { Persona } from "@/components/ai-elements/persona";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { LucideIcon } from "lucide-react";
+import {
+  BrainIcon,
+  CircleIcon,
+  EyeClosedIcon,
+  MegaphoneIcon,
+  MicIcon,
+} from "lucide-react";
+import { memo, useCallback, useState } from "react";
+
+const states: {
+  state: PersonaState;
+  icon: LucideIcon;
+  label: string;
+}[] = [
+  {
+    icon: CircleIcon,
+    label: "Idle",
+    state: "idle",
+  },
+  {
+    icon: MicIcon,
+    label: "Listening",
+    state: "listening",
+  },
+  {
+    icon: BrainIcon,
+    label: "Thinking",
+    state: "thinking",
+  },
+  {
+    icon: MegaphoneIcon,
+    label: "Speaking",
+    state: "speaking",
+  },
+  {
+    icon: EyeClosedIcon,
+    label: "Asleep",
+    state: "asleep",
+  },
+];
+
+interface StateButtonProps {
+  state: (typeof states)[0];
+  currentState: PersonaState;
+  onStateChange: (state: PersonaState) => void;
+}
+
+const StateButton = memo(
+  ({ state, currentState, onStateChange }: StateButtonProps) => {
+    const handleClick = useCallback(
+      () => onStateChange(state.state),
+      [onStateChange, state.state]
+    );
+    return (
+      <Tooltip key={state.state}>
+        <TooltipTrigger asChild>
+          <Button
+            onClick={handleClick}
+            size="icon-sm"
+            variant={currentState === state.state ? "default" : "outline"}
+          >
+            <state.icon className="size-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{state.label}</TooltipContent>
+      </Tooltip>
+    );
+  }
+);
+
+StateButton.displayName = "StateButton";
+
+const Example = () => {
+  const [currentState, setCurrentState] = useState<PersonaState>("idle");
+
+  const handleStateChange = useCallback((state: PersonaState) => {
+    setCurrentState(state);
+  }, []);
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-4">
+      <Persona className="size-32" state={currentState} variant="obsidian" />
+
+      <ButtonGroup orientation="horizontal">
+        {states.map((state) => (
+          <StateButton
+            currentState={currentState}
+            key={state.state}
+            onStateChange={handleStateChange}
+            state={state}
+          />
+        ))}
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,110 @@
+"use client";
+
+import type { PersonaState } from "@/components/ai-elements/persona";
+import { Persona } from "@/components/ai-elements/persona";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { LucideIcon } from "lucide-react";
+import {
+  BrainIcon,
+  CircleIcon,
+  EyeClosedIcon,
+  MegaphoneIcon,
+  MicIcon,
+} from "lucide-react";
+import { memo, useCallback, useState } from "react";
+
+interface StateButtonProps {
+  state: { state: PersonaState; icon: LucideIcon; label: string };
+  currentState: PersonaState;
+  onStateChange: (state: PersonaState) => void;
+}
+
+const StateButton = memo(
+  ({ state, currentState, onStateChange }: StateButtonProps) => {
+    const handleClick = useCallback(
+      () => onStateChange(state.state),
+      [onStateChange, state.state]
+    );
+    return (
+      <Tooltip key={state.state}>
+        <TooltipTrigger asChild>
+          <Button
+            onClick={handleClick}
+            size="icon-sm"
+            variant={currentState === state.state ? "default" : "outline"}
+          >
+            <state.icon className="size-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{state.label}</TooltipContent>
+      </Tooltip>
+    );
+  }
+);
+
+StateButton.displayName = "StateButton";
+
+const states: {
+  state: PersonaState;
+  icon: LucideIcon;
+  label: string;
+}[] = [
+  {
+    icon: CircleIcon,
+    label: "Idle",
+    state: "idle",
+  },
+  {
+    icon: MicIcon,
+    label: "Listening",
+    state: "listening",
+  },
+  {
+    icon: BrainIcon,
+    label: "Thinking",
+    state: "thinking",
+  },
+  {
+    icon: MegaphoneIcon,
+    label: "Speaking",
+    state: "speaking",
+  },
+  {
+    icon: EyeClosedIcon,
+    label: "Asleep",
+    state: "asleep",
+  },
+];
+
+const Example = () => {
+  const [currentState, setCurrentState] = useState<PersonaState>("idle");
+
+  const handleStateChange = useCallback((state: PersonaState) => {
+    setCurrentState(state);
+  }, []);
+
+  return (
+    <div className="flex size-full flex-col items-center justify-center gap-4">
+      <Persona className="size-32" state={currentState} variant="opal" />
+
+      <ButtonGroup orientation="horizontal">
+        {states.map((state) => (
+          <StateButton
+            currentState={currentState}
+            key={state.state}
+            onStateChange={handleStateChange}
+            state={state}
+          />
+        ))}
+      </ButtonGroup>
+    </div>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,65 @@
+"use client";
+
+import {
+  Plan,
+  PlanAction,
+  PlanContent,
+  PlanDescription,
+  PlanFooter,
+  PlanHeader,
+  PlanTitle,
+  PlanTrigger,
+} from "@/components/ai-elements/plan";
+import { Button } from "@/components/ui/button";
+import { FileText } from "lucide-react";
+
+const Example = () => (
+  <Plan defaultOpen={false}>
+    <PlanHeader>
+      <div>
+        <div className="mb-4 flex items-center gap-2">
+          <FileText className="size-4" />
+          <PlanTitle>Rewrite AI Elements to SolidJS</PlanTitle>
+        </div>
+        <PlanDescription>
+          Rewrite the AI Elements component library from React to SolidJS while
+          maintaining compatibility with existing React-based shadcn/ui
+          components using solid-js/compat, updating all 29 components and their
+          test suite.
+        </PlanDescription>
+      </div>
+      <PlanTrigger />
+    </PlanHeader>
+    <PlanContent>
+      <div className="space-y-4 text-sm">
+        <div>
+          <h3 className="mb-2 font-semibold">Overview</h3>
+          <p>
+            This plan outlines the migration strategy for converting the AI
+            Elements library from React to SolidJS, ensuring compatibility and
+            maintaining existing functionality.
+          </p>
+        </div>
+        <div>
+          <h3 className="mb-2 font-semibold">Key Steps</h3>
+          <ul className="list-inside list-disc space-y-1">
+            <li>Set up SolidJS project structure</li>
+            <li>Install solid-js/compat for React compatibility</li>
+            <li>Migrate components one by one</li>
+            <li>Update test suite for each component</li>
+            <li>Verify compatibility with shadcn/ui</li>
+          </ul>
+        </div>
+      </div>
+    </PlanContent>
+    <PlanFooter className="justify-end">
+      <PlanAction>
+        <Button size="sm">
+          Build <kbd className="font-mono">⌘↩</kbd>
+        </Button>
+      </PlanAction>
+    </PlanFooter>
+  </Plan>
+);
+
+export default Example;