@rudderhq/agent-runtime-opencode-local 0.7.2-canary.0 → 0.7.3

package/skills/app-builder/assets/scaffold/components/contacts-workspace.tsx

@@ -1,10 +1,15 @@
 "use client";
 
+import { Alert } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Download, Plus, Search, Trash2, Upload } from "lucide-react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Download, Plus, Search, Trash2, Upload, UsersRound } from "lucide-react";
 import { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 type Contact = {
@@ -25,6 +30,13 @@ type Draft = {
 
 const emptyDraft: Draft = { name: "", email: "", company: "" };
 
+const statusVariant: Record<Contact["status"], "secondary" | "outline" | "success"> = {
+  new: "secondary",
+  contacted: "outline",
+  replied: "success",
+  paused: "outline",
+};
+
 export function ContactsWorkspace() {
   const [contacts, setContacts] = useState<Contact[]>([]);
   const [draft, setDraft] = useState<Draft>(emptyDraft);
@@ -118,175 +130,187 @@ export function ContactsWorkspace() {
   }
 
   return (
-    <div className="mx-auto grid max-w-7xl gap-6 px-4 py-6 lg:grid-cols-[minmax(0,1fr)_22rem] lg:px-8">
-      <section className="min-w-0">
-        <header className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-          <div>
-            <p className="mb-1 text-sm font-medium text-[var(--primary)]">Contacts</p>
-            <h1 className="m-0 text-2xl font-semibold tracking-tight">Customer workspace</h1>
-            <p className="mb-0 mt-2 text-sm text-[var(--muted-foreground)]">
-              Keep the next conversation visible and every record on this device.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <input
-              ref={importRef}
-              aria-label="Import app data"
-              className="sr-only"
-              type="file"
-              accept="application/json,.json"
-              onChange={(event) => {
-                const file = event.currentTarget.files?.[0];
-                if (file) void importData(file);
-              }}
-            />
-            <Button type="button" variant="outline" onClick={() => importRef.current?.click()}>
-              <Upload aria-hidden size={16} />
-              Import
-            </Button>
-            <Button asChild variant="outline">
-              <a href="/api/data/export" download>
-                <Download aria-hidden size={16} />
-                Export
-              </a>
-            </Button>
+    <div className="min-h-screen bg-background text-foreground">
+      <header className="border-b bg-card/80">
+        <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 lg:px-6">
+          <div className="flex min-w-0 items-center gap-3">
+            <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
+              <UsersRound aria-hidden className="size-4" />
+            </span>
+            <div className="min-w-0">
+              <p className="m-0 truncate text-sm font-semibold">Pipeline Desk</p>
+              <p className="m-0 text-xs text-muted-foreground">Local customer workspace</p>
+            </div>
           </div>
-        </header>
+          <Badge variant="outline">Development data</Badge>
+        </div>
+      </header>
 
-        <Card>
-          <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <main className="mx-auto grid max-w-7xl gap-4 px-4 py-5 lg:grid-cols-[minmax(0,1fr)_20rem] lg:px-6">
+        <section className="min-w-0">
+          <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
             <div>
-              <h2 className="m-0 text-base font-semibold">All contacts</h2>
-              <p className="mb-0 mt-1 text-sm text-[var(--muted-foreground)]">
-                {contacts.length} {contacts.length === 1 ? "record" : "records"}
+              <h1 className="m-0 text-2xl font-semibold">Contacts</h1>
+              <p className="mb-0 mt-1 text-sm text-muted-foreground">
+                Keep the next conversation visible and every record on this device.
               </p>
             </div>
-            <div className="relative w-full sm:w-72">
-              <Search
-                aria-hidden
-                className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)]"
-                size={16}
-              />
-              <Input
-                aria-label="Search contacts"
-                className="pl-9"
-                placeholder="Search name, email, company…"
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
+            <div className="flex flex-wrap gap-2">
+              <input
+                ref={importRef}
+                aria-label="Import app data"
+                className="sr-only"
+                type="file"
+                accept="application/json,.json"
+                onChange={(event) => {
+                  const file = event.currentTarget.files?.[0];
+                  if (file) void importData(file);
+                }}
               />
+              <Button type="button" variant="outline" onClick={() => importRef.current?.click()}>
+                <Upload aria-hidden data-icon="inline-start" />
+                Import
+              </Button>
+              <Button asChild variant="outline">
+                <a href="/api/data/export" download>
+                  <Download aria-hidden data-icon="inline-start" />
+                  Export
+                </a>
+              </Button>
             </div>
-          </CardHeader>
-          <div aria-live="polite">
-            {loading ? (
-              <p className="p-8 text-center text-sm text-[var(--muted-foreground)]">
-                Loading contacts…
-              </p>
-            ) : visibleContacts.length === 0 ? (
-              <div className="p-10 text-center">
-                <h3 className="m-0 text-base font-semibold">
-                  {contacts.length === 0 ? "No contacts yet" : "No matching contacts"}
-                </h3>
-                <p className="mb-0 mt-2 text-sm text-[var(--muted-foreground)]">
-                  {contacts.length === 0
-                    ? "Add the first contact with the form beside this list."
-                    : "Try a different name, email, company, or status."}
-                </p>
+          </div>
+
+          <Card>
+            <CardHeader className="sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <CardTitle>All contacts</CardTitle>
+                <CardDescription>{contacts.length} {contacts.length === 1 ? "record" : "records"}</CardDescription>
+              </div>
+              <div className="relative w-full sm:w-64">
+                <Search aria-hidden className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  aria-label="Search contacts"
+                  className="pl-9"
+                  placeholder="Search contacts"
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                />
               </div>
-            ) : (
-              <div className="overflow-x-auto">
-                <table className="w-full min-w-[42rem] border-collapse text-left text-sm">
-                  <thead className="bg-[var(--muted)] text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
-                    <tr>
-                      <th className="px-5 py-3 font-medium" scope="col">Contact</th>
-                      <th className="px-5 py-3 font-medium" scope="col">Company</th>
-                      <th className="px-5 py-3 font-medium" scope="col">Status</th>
-                      <th className="px-5 py-3 text-right font-medium" scope="col">Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody>
+            </CardHeader>
+            <div aria-live="polite">
+              {loading ? (
+                <div className="flex flex-col gap-3 p-4" aria-label="Loading contacts">
+                  {[0, 1, 2].map((item) => <Skeleton className="h-11 w-full" key={item} />)}
+                </div>
+              ) : visibleContacts.length === 0 ? (
+                <Empty>
+                  <EmptyHeader>
+                    <EmptyTitle>{contacts.length === 0 ? "No contacts yet" : "No matching contacts"}</EmptyTitle>
+                    <EmptyDescription>
+                      {contacts.length === 0
+                        ? "Add the first contact with the form beside this list."
+                        : "Try a different name, email, company, or status."}
+                    </EmptyDescription>
+                  </EmptyHeader>
+                </Empty>
+              ) : (
+                <Table className="table-fixed sm:min-w-[40rem] sm:table-auto">
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead scope="col">Contact</TableHead>
+                      <TableHead className="hidden sm:table-cell" scope="col">Company</TableHead>
+                      <TableHead className="w-20 sm:w-auto" scope="col">Status</TableHead>
+                      <TableHead aria-label="Actions" className="w-12 text-right sm:w-auto" scope="col">
+                        <span className="hidden sm:inline">Actions</span>
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
                     {visibleContacts.map((contact) => (
-                      <tr className="border-t" key={contact.id}>
-                        <td className="px-5 py-4">
+                      <TableRow key={contact.id}>
+                        <TableCell>
                           <strong className="block font-medium">{contact.name}</strong>
-                          <span className="text-[var(--muted-foreground)]">{contact.email}</span>
-                        </td>
-                        <td className="px-5 py-4">{contact.company || "—"}</td>
-                        <td className="px-5 py-4">
-                          <span className="rounded-full bg-[var(--muted)] px-2.5 py-1 text-xs font-medium capitalize">
-                            {contact.status}
+                          <span className="block break-all text-muted-foreground sm:inline">{contact.email}</span>
+                          <span className="mt-1 block text-xs text-muted-foreground sm:hidden">
+                            {contact.company || "Company not set"}
                           </span>
-                        </td>
-                        <td className="px-5 py-4 text-right">
+                        </TableCell>
+                        <TableCell className="hidden sm:table-cell">{contact.company || "Not set"}</TableCell>
+                        <TableCell>
+                          <Badge variant={statusVariant[contact.status]}>{contact.status}</Badge>
+                        </TableCell>
+                        <TableCell className="text-right">
                           <Button
                             aria-label={`Delete ${contact.name}`}
-                            size="sm"
+                            size="icon-sm"
                             type="button"
                             variant="ghost"
                             onClick={() => void deleteContact(contact)}
                           >
-                            <Trash2 aria-hidden size={16} />
+                            <Trash2 aria-hidden />
                           </Button>
-                        </td>
-                      </tr>
+                        </TableCell>
+                      </TableRow>
                     ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </div>
-        </Card>
-      </section>
+                  </TableBody>
+                </Table>
+              )}
+            </div>
+          </Card>
+        </section>
 
-      <aside>
-        <Card>
-          <CardHeader>
-            <h2 className="m-0 flex items-center gap-2 text-base font-semibold">
-              <Plus aria-hidden size={18} />
-              Add contact
-            </h2>
-          </CardHeader>
-          <CardContent>
-            <form className="grid gap-4" onSubmit={(event) => void createContact(event)}>
-              <div className="grid gap-1.5">
-                <Label htmlFor="contact-name">Name</Label>
-                <Input
-                  id="contact-name"
-                  required
-                  autoComplete="name"
-                  value={draft.name}
-                  onChange={(event) => setDraft({ ...draft, name: event.target.value })}
-                />
-              </div>
-              <div className="grid gap-1.5">
-                <Label htmlFor="contact-email">Email</Label>
-                <Input
-                  id="contact-email"
-                  required
-                  autoComplete="email"
-                  type="email"
-                  value={draft.email}
-                  onChange={(event) => setDraft({ ...draft, email: event.target.value })}
-                />
-              </div>
-              <div className="grid gap-1.5">
-                <Label htmlFor="contact-company">Company</Label>
-                <Input
-                  id="contact-company"
-                  autoComplete="organization"
-                  value={draft.company}
-                  onChange={(event) => setDraft({ ...draft, company: event.target.value })}
-                />
-              </div>
-              {error ? (
-                <p className="m-0 text-sm text-[var(--destructive)]" role="alert">{error}</p>
-              ) : null}
-              <Button disabled={saving} type="submit">
-                {saving ? "Adding…" : "Add contact"}
-              </Button>
-            </form>
-          </CardContent>
-        </Card>
-      </aside>
+        <aside>
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Plus aria-hidden className="size-4" />
+                Add contact
+              </CardTitle>
+              <CardDescription>Create a development record.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={(event) => void createContact(event)}>
+                <FieldGroup>
+                  <Field>
+                    <FieldLabel htmlFor="contact-name">Name</FieldLabel>
+                    <Input
+                      id="contact-name"
+                      required
+                      autoComplete="name"
+                      value={draft.name}
+                      onChange={(event) => setDraft({ ...draft, name: event.target.value })}
+                    />
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="contact-email">Email</FieldLabel>
+                    <Input
+                      id="contact-email"
+                      required
+                      autoComplete="email"
+                      type="email"
+                      value={draft.email}
+                      onChange={(event) => setDraft({ ...draft, email: event.target.value })}
+                    />
+                  </Field>
+                  <Field>
+                    <FieldLabel htmlFor="contact-company">Company</FieldLabel>
+                    <Input
+                      id="contact-company"
+                      autoComplete="organization"
+                      value={draft.company}
+                      onChange={(event) => setDraft({ ...draft, company: event.target.value })}
+                    />
+                  </Field>
+                  {error ? <Alert>{error}</Alert> : null}
+                  <Button disabled={saving} type="submit">
+                    {saving ? "Adding..." : "Add contact"}
+                  </Button>
+                </FieldGroup>
+              </form>
+            </CardContent>
+          </Card>
+        </aside>
+      </main>
     </div>
   );
 }

package/skills/app-builder/assets/scaffold/components/ui/alert.tsx

@@ -0,0 +1,12 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export function Alert({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="alert"
+      className={cn("rounded-md border border-destructive/25 bg-destructive/10 px-3 py-2 text-sm text-destructive", className)}
+      {...props}
+    />
+  );
+}

package/skills/app-builder/assets/scaffold/components/ui/badge.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-sm border px-1.5 py-0.5 text-xs font-medium",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "text-foreground",
+        success: "border-primary/20 bg-accent text-accent-foreground",
+        destructive: "border-destructive/20 bg-destructive/10 text-destructive",
+      },
+    },
+    defaultVariants: { variant: "secondary" },
+  },
+);
+
+export function Badge({
+  className,
+  variant,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

package/skills/app-builder/assets/scaffold/components/ui/button.tsx

@@ -4,18 +4,20 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 const buttonVariants = cva(
-  "inline-flex min-h-10 items-center justify-center gap-2 rounded-lg px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-foreground text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4",
   {
     variants: {
       variant: {
-        default: "bg-[var(--primary)] text-[var(--primary-foreground)] hover:brightness-95",
-        outline: "border bg-[var(--card)] hover:bg-[var(--muted)]",
-        ghost: "hover:bg-[var(--muted)]",
-        destructive: "bg-[var(--destructive)] text-white hover:brightness-95",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
       },
       size: {
-        default: "h-10",
-        sm: "h-9 px-3",
+        default: "h-9 px-3.5",
+        sm: "h-8 px-3 text-xs",
+        "icon-sm": "size-8",
       },
     },
     defaultVariants: {

package/skills/app-builder/assets/scaffold/components/ui/card.tsx

@@ -4,16 +4,28 @@ import * as React from "react";
 export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <section
-      className={cn("rounded-xl border bg-[var(--card)] text-[var(--card-foreground)] shadow-sm", className)}
+      className={cn("rounded-lg border bg-card text-card-foreground", className)}
       {...props}
     />
   );
 }
 
 export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("border-b px-5 py-4", className)} {...props} />;
+  return <div className={cn("flex flex-col gap-1 border-b px-4 py-3", className)} {...props} />;
 }
 
 export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn("p-5", className)} {...props} />;
+  return <div className={cn("p-4", className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cn("m-0 text-base font-semibold", className)} {...props} />;
+}
+
+export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("m-0 text-sm text-muted-foreground", className)} {...props} />;
+}
+
+export function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex items-center border-t px-4 py-3", className)} {...props} />;
 }

package/skills/app-builder/assets/scaffold/components/ui/empty.tsx

@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export function Empty({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex min-h-44 flex-col items-center justify-center gap-3 p-6 text-center", className)} {...props} />;
+}
+
+export function EmptyHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex max-w-sm flex-col gap-1", className)} {...props} />;
+}
+
+export function EmptyTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("m-0 text-sm font-semibold", className)} {...props} />;
+}
+
+export function EmptyDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("m-0 text-sm text-muted-foreground", className)} {...props} />;
+}

package/skills/app-builder/assets/scaffold/components/ui/field.tsx

@@ -0,0 +1,23 @@
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export function FieldGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-4", className)} {...props} />;
+}
+
+export function Field({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5", className)} {...props} />;
+}
+
+export function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+  return <Label className={className} {...props} />;
+}
+
+export function FieldDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("m-0 text-xs text-muted-foreground", className)} {...props} />;
+}
+
+export function FieldError({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("m-0 text-xs text-destructive", className)} {...props} />;
+}

package/skills/app-builder/assets/scaffold/components/ui/input.tsx

@@ -7,7 +7,7 @@ export const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"in
       ref={ref}
       type={type}
       className={cn(
-        "flex h-10 w-full rounded-lg border bg-white px-3 py-2 text-sm outline-none placeholder:text-[var(--muted-foreground)] focus:ring-2 focus:ring-[var(--ring)] disabled:opacity-50",
+        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/60 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

package/skills/app-builder/assets/scaffold/components/ui/label.tsx

@@ -2,5 +2,5 @@ import { cn } from "@/lib/utils";
 import * as React from "react";
 
 export function Label({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {
-  return <label className={cn("text-sm font-medium", className)} {...props} />;
+  return <label className={cn("text-sm font-medium leading-none", className)} {...props} />;
 }

package/skills/app-builder/assets/scaffold/components/ui/separator.tsx

@@ -0,0 +1,6 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export function Separator({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div role="separator" className={cn("h-px w-full bg-border", className)} {...props} />;
+}

package/skills/app-builder/assets/scaffold/components/ui/skeleton.tsx

@@ -0,0 +1,6 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-sm bg-muted", className)} {...props} />;
+}

package/skills/app-builder/assets/scaffold/components/ui/table.tsx

@@ -0,0 +1,30 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="w-full overflow-x-auto">
+      <table className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  );
+}
+
+export function TableHeader({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <thead className={cn("bg-muted/60 [&_tr]:border-b", className)} {...props} />;
+}
+
+export function TableBody({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {
+  return <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
+}
+
+export function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) {
+  return <tr className={cn("border-b transition-colors hover:bg-muted/40", className)} {...props} />;
+}
+
+export function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return <th className={cn("h-9 px-4 text-left align-middle text-xs font-medium text-muted-foreground", className)} {...props} />;
+}
+
+export function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {
+  return <td className={cn("px-4 py-3 align-middle", className)} {...props} />;
+}

package/skills/app-builder/assets/scaffold/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/skills/app-builder/assets/scaffold/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.