@vibes.diy/prompts 14.1.50 → 14.1.52

package/llms/access.md

@@ -560,6 +560,7 @@ App.jsx — `useVibe().can` gates every write surface (posts AND owner-only mana
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { useViewer, useVibe } from "use-vibes";
+import { Button, Textarea } from "@vibes.diy/look";
 
 export default function App() {
   const { viewer, isViewerPending, ViewerTag } = useViewer();
@@ -604,8 +605,8 @@ export default function App() {
             submitPost();
           }}
         >
-          <textarea value={draft} onChange={(e) => setDraft(e.target.value)} />
-          <button type="submit">Post</button>
+          <Textarea value={draft} onChange={(e) => setDraft(e.target.value)} className="w-full" />
+          <Button type="submit">Post</Button>
         </form>
       ) : (
         viewer && <p className="text-muted-foreground">{canPost.reason}</p>
@@ -613,16 +614,20 @@ export default function App() {
 
       {/* owner-only management — gated on can.* */}
       {canGrant.ok && (
-        <button onClick={() => database.put({ type: "roleGrant", role: "poster", userHandle: "newUser" })}>
+        <Button variant="secondary" onClick={() => database.put({ type: "roleGrant", role: "poster", userHandle: "newUser" })}>
           Grant poster role
-        </button>
+        </Button>
       )}
 
       {posts.map((p) => (
         <div key={p._id}>
           <ViewerTag userHandle={p.authorHandle} />
           <p>{p.body}</p>
-          {can.delete(p).ok && <button onClick={() => database.del(p._id)}>Delete</button>}
+          {can.delete(p).ok && (
+            <Button variant="destructive" size="sm" onClick={() => database.del(p._id)}>
+              Delete
+            </Button>
+          )}
         </div>
       ))}
     </div>
@@ -641,10 +646,10 @@ const canRevoke = can.delete(grantDoc);
 {(canAppoint.ok || canRevoke.ok) && (
   <ModeratorPanel>
     {canAppoint.ok && (
-      <button onClick={() => database.put({ type: "modGrant", role: "moderator", userHandle })}>Appoint</button>
+      <Button onClick={() => database.put({ type: "modGrant", role: "moderator", userHandle })}>Appoint</Button>
     )}
     {canRevoke.ok ? (
-      <button onClick={() => database.del(grantDoc._id)}>Revoke</button>
+      <Button variant="destructive" onClick={() => database.del(grantDoc._id)}>Revoke</Button>
     ) : (
       <p>{canRevoke.reason}</p>
     )}

package/llms/backend.md

@@ -544,6 +544,7 @@ App.jsx
 ```jsx file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
+import { Badge, Card, CardContent } from "@vibes.diy/look";
 
 export default function App() {
   const { useLiveQuery } = useFireproof("nodeReleases");
@@ -556,17 +557,21 @@ export default function App() {
     <main className="min-h-screen bg-background text-foreground font-sans mx-auto max-w-2xl p-6">
       <h1 className="text-3xl font-bold">Node.js releases</h1>
       {status?.state === "egress-denied" && (
-        <p role="status" className="my-4 rounded-md bg-secondary text-secondary-foreground p-3 shadow-sm">
+        <Badge variant="secondary" role="status" className="my-4">
           showing saved data — live refresh unavailable
-        </p>
+        </Badge>
       )}
       <ul className="mt-6 space-y-3">
         {releases.map((release) => (
-          <li key={release._id} className="rounded-md bg-card text-card-foreground p-3 shadow-sm">
-            <a className="font-bold underline" href={release.url} target="_blank" rel="noreferrer">
-              {release.title}
-            </a>
-            <time className="ml-3 text-muted-foreground">{release.publishedAt.slice(0, 10)}</time>
+          <li key={release._id}>
+            <Card>
+              <CardContent>
+                <a className="font-bold underline" href={release.url} target="_blank" rel="noreferrer">
+                  {release.title}
+                </a>
+                <time className="ml-3 text-muted-foreground">{release.publishedAt.slice(0, 10)}</time>
+              </CardContent>
+            </Card>
           </li>
         ))}
       </ul>

package/llms/create-vibe.md

@@ -27,18 +27,18 @@ when they're ready.
 ```jsx file=App.jsx
 import React from "react";
 import { createVibe } from "use-vibes";
+import { Button } from "@vibes.diy/look";
 
 export default function App() {
-  const c = { btn: "min-h-11 px-5 rounded-md bg-primary text-primary-foreground shadow-sm active:translate-y-px active:shadow-sm" };
   // `ready` + `spec` come from the interview (see the full example below).
   return (
-    <button
-      className={c.btn}
+    <Button
+      size="lg"
       disabled={!ready}
       onClick={() => createVibe(spec)}   // ← user gesture: the new tab is allowed
     >
       Create my pitch deck
-    </button>
+    </Button>
   );
 }
 ```
@@ -67,6 +67,7 @@ Let the user edit each slide inline and present full-screen.`;
 import React from "react";
 import { callAI } from "call-ai";
 import { createVibe } from "use-vibes";
+import { Button } from "@vibes.diy/look";
 
 export default function App() {
   const [answers, setAnswers] = React.useState({});
@@ -88,19 +89,18 @@ export default function App() {
     }
   }
 
-  const c = { btn: "min-h-11 px-5 rounded-md bg-primary text-primary-foreground shadow-sm active:translate-y-px active:shadow-sm" };
   return (
     <main id="app">
       {/* ...interview... */}
       {!spec ? (
-        <button className={c.btn} disabled={building} onClick={finish}>
+        <Button size="lg" disabled={building} onClick={finish}>
           {building ? "Preparing…" : "I'm ready"}
-        </button>
+        </Button>
       ) : (
         // Prompt is prepared; THIS click opens the builder (user gesture).
-        <button className={c.btn} onClick={() => createVibe(spec)}>
+        <Button size="lg" onClick={() => createVibe(spec)}>
           Create my pitch deck
-        </button>
+        </Button>
       )}
     </main>
   );

package/llms/fireproof.initial.md

@@ -471,6 +471,7 @@ App.jsx
 ```jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
+import { Button, Card, CardContent, Input, Label } from "@vibes.diy/look";
 
 export default function App() {
   const { useDocument, useLiveQuery } = useFireproof("imageUploads");
@@ -497,9 +498,6 @@ export default function App() {
 
   const c = {
     page: "bg-background text-foreground font-sans",
-    card: "bg-card text-card-foreground",
-    field: "border border-input rounded-md focus:ring-2 focus:ring-ring",
-    action: "bg-primary text-primary-foreground active:translate-y-px active:shadow-sm",
     meta: "text-muted-foreground",
   };
 
@@ -507,26 +505,29 @@ export default function App() {
     <div className={`min-h-screen p-6 max-w-lg mx-auto ${c.page}`}>
       <h2 className="text-2xl font-bold mb-4">Image Uploader</h2>
       <form onSubmit={onSubmit} className="space-y-3">
-        <input type="file" accept="image/*" onChange={onPickFile} className={`w-full ${c.field} p-2`} />
-        <input
+        <Label htmlFor="photo">Photo</Label>
+        <Input id="photo" type="file" accept="image/*" onChange={onPickFile} className="w-full" />
+        <Input
           type="text"
           placeholder="Caption"
           value={doc.caption}
           onChange={(e) => merge({ caption: e.target.value })}
-          className={`w-full ${c.field} p-2`}
+          className="w-full"
         />
-        <button type="submit" className={`px-4 py-2 rounded-md shadow-sm ${c.action}`}>
+        <Button type="submit" size="lg">
           Upload
-        </button>
+        </Button>
       </form>
 
       <h3 className="text-lg font-bold mt-8">Recent Uploads</h3>
       <div className="grid grid-cols-2 gap-4 mt-2">
         {docs.map((d) => (
-          <div key={d._id} className={`p-3 rounded-md shadow-sm ${c.card}`}>
-            {d._files?.photo?.url && <img src={d._files.photo.url} alt={d.caption || "upload"} className="w-full h-auto rounded-md" />}
-            <p className={`${c.meta} mt-2`}>{d.caption || "No caption"}</p>
-          </div>
+          <Card key={d._id}>
+            <CardContent>
+              {d._files?.photo?.url && <img src={d._files.photo.url} alt={d.caption || "upload"} className="w-full h-auto rounded-md" />}
+              <p className={`${c.meta} mt-2`}>{d.caption || "No caption"}</p>
+            </CardContent>
+          </Card>
         ))}
       </div>
     </div>
@@ -606,6 +607,7 @@ Code listing for todo tracker App.jsx. Note the code ordering: hooks, then handl
 import React from "react";
 import { useFireproof } from "use-fireproof";
 import { useVibe } from "use-vibes";
+import { Button, Card, CardContent, Input, Label } from "@vibes.diy/look";
 
 export default function App() {
   // 1. Hooks and document shapes
@@ -643,12 +645,10 @@ export default function App() {
     submitNewTodo();
   };
 
-  // 3. ClassNames — right before JSX so colors stay consistent
+  // 3. ClassNames — right before JSX, for the plain elements only; the look's
+  // components carry their own surface, ink and shape.
   const c = {
     page: "bg-background text-foreground font-sans",
-    card: "bg-card text-card-foreground",
-    field: "border border-input rounded-md focus:ring-2 focus:ring-ring",
-    danger: "bg-destructive text-foreground active:translate-y-px active:shadow-sm",
     meta: "text-muted-foreground",
   };
 
@@ -657,35 +657,33 @@ export default function App() {
     <div className={`min-h-screen max-w-md mx-auto p-6 ${c.page}`}>
       <h2 className="text-2xl font-bold mb-4">Todo List</h2>
       <form onSubmit={handleSubmit} className="mb-4">
-        <label htmlFor="todo" className="block mb-2 font-bold">
+        <Label htmlFor="todo" className="mb-2 block">
           Todo
-        </label>
-        <input
-          className={`w-full ${c.field} px-3 py-2`}
-          id="todo"
-          type="text"
-          onChange={handleInputChange}
-          value={newTodo.todo}
-        />
+        </Label>
+        <Input className="w-full" id="todo" type="text" onChange={handleInputChange} value={newTodo.todo} />
       </form>
       <ul className="space-y-3">
         {todos.map((doc) => (
-          <li className={`flex flex-col items-start p-3 rounded-md shadow-sm ${c.card}`} key={doc._id}>
-            <div className="flex items-center justify-between w-full">
-              <div className="flex items-center">
-                <input
-                  className="mr-2"
-                  type="checkbox"
-                  checked={doc.completed}
-                  onChange={() => database.put({ ...doc, completed: !doc.completed })}
-                />
-                <span className="font-medium">{doc.todo}</span>
-              </div>
-              <button className={`text-sm px-3 py-2 rounded-md shadow-sm ${c.danger}`} onClick={() => database.del(doc._id)}>
-                Delete
-              </button>
-            </div>
-            <div className={`${c.meta} mt-1`}>{new Date(doc.createdAt).toISOString()}</div>
+          <li key={doc._id}>
+            <Card>
+              <CardContent className="flex flex-col items-start">
+                <div className="flex items-center justify-between w-full">
+                  <div className="flex items-center">
+                    <input
+                      className="mr-2"
+                      type="checkbox"
+                      checked={doc.completed}
+                      onChange={() => database.put({ ...doc, completed: !doc.completed })}
+                    />
+                    <span className="font-medium">{doc.todo}</span>
+                  </div>
+                  <Button variant="destructive" size="sm" onClick={() => database.del(doc._id)}>
+                    Delete
+                  </Button>
+                </div>
+                <div className={`${c.meta} mt-1`}>{new Date(doc.createdAt).toISOString()}</div>
+              </CardContent>
+            </Card>
           </li>
         ))}
       </ul>

package/llms/fireproof.md

@@ -445,6 +445,7 @@ App.jsx
 ```jsx file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
+import { Button, Card, CardContent, Input, Label } from "@vibes.diy/look";
 
 export default function App() {
   const { useDocument, useLiveQuery } = useFireproof("imageUploads");
@@ -471,9 +472,6 @@ export default function App() {
 
   const c = {
     page: "bg-background text-foreground font-sans",
-    card: "bg-card text-card-foreground",
-    field: "border border-input rounded-md focus:ring-2 focus:ring-ring",
-    action: "bg-primary text-primary-foreground active:translate-y-px active:shadow-sm",
     meta: "text-muted-foreground",
   };
 
@@ -481,26 +479,29 @@ export default function App() {
     <div className={`min-h-screen p-6 max-w-lg mx-auto ${c.page}`}>
       <h2 className="text-2xl font-bold mb-4">Image Uploader</h2>
       <form onSubmit={onSubmit} className="space-y-3">
-        <input type="file" accept="image/*" onChange={onPickFile} className={`w-full ${c.field} p-2`} />
-        <input
+        <Label htmlFor="photo">Photo</Label>
+        <Input id="photo" type="file" accept="image/*" onChange={onPickFile} className="w-full" />
+        <Input
           type="text"
           placeholder="Caption"
           value={doc.caption}
           onChange={(e) => merge({ caption: e.target.value })}
-          className={`w-full ${c.field} p-2`}
+          className="w-full"
         />
-        <button type="submit" className={`px-4 py-2 rounded-md shadow-sm ${c.action}`}>
+        <Button type="submit" size="lg">
           Upload
-        </button>
+        </Button>
       </form>
 
       <h3 className="text-lg font-bold mt-8">Recent Uploads</h3>
       <div className="grid grid-cols-2 gap-4 mt-2">
         {docs.map((d) => (
-          <div key={d._id} className={`p-3 rounded-md shadow-sm ${c.card}`}>
-            {d._files?.photo?.url && <img src={d._files.photo.url} alt={d.caption || "upload"} className="w-full h-auto rounded-md" />}
-            <p className={`${c.meta} mt-2`}>{d.caption || "No caption"}</p>
-          </div>
+          <Card key={d._id}>
+            <CardContent>
+              {d._files?.photo?.url && <img src={d._files.photo.url} alt={d.caption || "upload"} className="w-full h-auto rounded-md" />}
+              <p className={`${c.meta} mt-2`}>{d.caption || "No caption"}</p>
+            </CardContent>
+          </Card>
         ))}
       </div>
     </div>
@@ -579,6 +580,7 @@ Code listing for todo tracker App.jsx. Note the code ordering: hooks, then handl
 ```js file=App.jsx
 import React from "react";
 import { useFireproof } from "use-fireproof";
+import { Button, Card, CardContent, Input, Label } from "@vibes.diy/look";
 
 export default function App() {
   // 1. Hooks and document shapes
@@ -610,12 +612,10 @@ export default function App() {
     submitNewTodo();
   };
 
-  // 3. ClassNames — right before JSX so colors stay consistent
+  // 3. ClassNames — right before JSX, for the plain elements only; the look's
+  // components carry their own surface, ink and shape.
   const c = {
     page: "bg-background text-foreground font-sans",
-    card: "bg-card text-card-foreground",
-    field: "border border-input rounded-md focus:ring-2 focus:ring-ring",
-    danger: "bg-destructive text-foreground active:translate-y-px active:shadow-sm",
     meta: "text-muted-foreground",
   };
 
@@ -624,35 +624,33 @@ export default function App() {
     <div className={`min-h-screen max-w-md mx-auto p-6 ${c.page}`}>
       <h2 className="text-2xl font-bold mb-4">Todo List</h2>
       <form onSubmit={handleSubmit} className="mb-4">
-        <label htmlFor="todo" className="block mb-2 font-bold">
+        <Label htmlFor="todo" className="mb-2 block">
           Todo
-        </label>
-        <input
-          className={`w-full ${c.field} px-3 py-2`}
-          id="todo"
-          type="text"
-          onChange={handleInputChange}
-          value={newTodo.todo}
-        />
+        </Label>
+        <Input className="w-full" id="todo" type="text" onChange={handleInputChange} value={newTodo.todo} />
       </form>
       <ul className="space-y-3">
         {todos.map((doc) => (
-          <li className={`flex flex-col items-start p-3 rounded-md shadow-sm ${c.card}`} key={doc._id}>
-            <div className="flex items-center justify-between w-full">
-              <div className="flex items-center">
-                <input
-                  className="mr-2"
-                  type="checkbox"
-                  checked={doc.completed}
-                  onChange={() => database.put({ ...doc, completed: !doc.completed })}
-                />
-                <span className="font-medium">{doc.todo}</span>
-              </div>
-              <button className={`text-sm px-3 py-2 rounded-md shadow-sm ${c.danger}`} onClick={() => database.del(doc._id)}>
-                Delete
-              </button>
-            </div>
-            <div className={`${c.meta} mt-1`}>{new Date(doc.createdAt).toISOString()}</div>
+          <li key={doc._id}>
+            <Card>
+              <CardContent className="flex flex-col items-start">
+                <div className="flex items-center justify-between w-full">
+                  <div className="flex items-center">
+                    <input
+                      className="mr-2"
+                      type="checkbox"
+                      checked={doc.completed}
+                      onChange={() => database.put({ ...doc, completed: !doc.completed })}
+                    />
+                    <span className="font-medium">{doc.todo}</span>
+                  </div>
+                  <Button variant="destructive" size="sm" onClick={() => database.del(doc._id)}>
+                    Delete
+                  </Button>
+                </div>
+                <div className={`${c.meta} mt-1`}>{new Date(doc.createdAt).toISOString()}</div>
+              </CardContent>
+            </Card>
           </li>
         ))}
       </ul>

package/llms/p5.md

@@ -25,6 +25,7 @@ App.jsx
 ```jsx file=App.jsx
 import React from "react";
 import p5 from "https://esm.sh/p5@1.11.13";
+import { Button } from "@vibes.diy/look";
 
 const TAU = Math.PI * 2;
 
@@ -195,12 +196,12 @@ export default function App() {
         ref={hostRef}
         className="w-full h-[70vh] overflow-hidden rounded-lg border border-border shadow-md touch-none"
       />
-      <button
-        className="mt-3 rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm shadow-sm active:translate-y-px active:shadow-sm"
+      <Button
+        className="mt-3"
         onClick={() => setParams((prev) => ({ ...prev, seed: Math.floor(Math.random() * 100000) }))}
       >
         Reseed
-      </button>
+      </Button>
     </div>
   );
 }