vibe-ship-it 1.0.0

package/template/skills/show-data/SKILL.md

@@ -0,0 +1,209 @@
+---
+name: show-data
+description: "Displays saved data as lists, tables, cards, or dashboards. Triggers: 'show me all the', 'list all', 'dashboard', 'display', 'table of', 'view submissions', 'view entries', 'see the data', 'admin page', 'show bookings', 'show messages', 'show orders', 'data page', 'overview'."
+---
+
+# Show Data
+
+Displays saved data in a styled, readable format. Turns raw database rows into cards, tables, or dashboard views.
+
+## Process
+
+### Step 1: Identify What to Show
+
+From context, determine:
+- Which table/data source (what did `save-data` create?)
+- Who sees it (public visitors or admin only?)
+- How many items expected (handful or hundreds?)
+
+### Step 2: Choose Display Format
+
+| Best for | Format | Use when |
+|---|---|---|
+| Few items with details | Cards | Portfolio items, testimonials, team members |
+| Many items to scan | Table | Admin view of submissions, orders, bookings |
+| Stats overview | Dashboard | Counts, recent activity, key numbers |
+| Timeline | List | Activity log, blog posts, updates |
+
+Don't ask the designer which format — pick the best one for their data. They'll say "actually, can it be cards instead?" if they want something different.
+
+### Step 3: Build the View
+
+**Server component that fetches data** (Next.js App Router):
+
+```tsx
+import { createClient } from '@/utils/supabase/server'
+
+export default async function DashboardPage() {
+  const supabase = await createClient()
+  const { data: items } = await supabase
+    .from('table_name')
+    .select('*')
+    .order('created_at', { ascending: false })
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-12">
+      <h1 className="text-3xl font-bold mb-8">Your [Items]</h1>
+
+      {items?.length === 0 ? (
+        <EmptyState />
+      ) : (
+        <div className="space-y-4">
+          {items?.map((item) => (
+            <ItemCard key={item.id} item={item} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+```
+
+### Step 4: Empty State
+
+Never show a blank page. Always show an empty state:
+
+```tsx
+function EmptyState() {
+  return (
+    <div className="text-center py-16">
+      <p className="text-gray-400 text-lg">No entries yet.</p>
+      <p className="text-gray-400 text-sm mt-2">
+        When someone submits the form, their entry will appear here.
+      </p>
+    </div>
+  )
+}
+```
+
+### Step 5: Test
+
+> "Check your dashboard page. If you submitted test data through your form earlier, you'll see it here. If not, go submit the form, then refresh the dashboard."
+
+## Display Templates
+
+### Card Layout (for rich content)
+```tsx
+function ItemCard({ item }: { item: any }) {
+  return (
+    <div className="bg-white border rounded-xl p-6 shadow-sm">
+      <div className="flex justify-between items-start">
+        <div>
+          <h3 className="font-semibold text-lg">{item.name}</h3>
+          <p className="text-gray-500 text-sm">{item.email}</p>
+        </div>
+        <span className="text-gray-400 text-sm">
+          {new Date(item.created_at).toLocaleDateString()}
+        </span>
+      </div>
+      <p className="text-gray-700 mt-3">{item.message}</p>
+    </div>
+  )
+}
+```
+
+### Table Layout (for scanning)
+```tsx
+<div className="overflow-x-auto">
+  <table className="w-full text-left">
+    <thead>
+      <tr className="border-b text-sm text-gray-500">
+        <th className="py-3 px-4 font-medium">Name</th>
+        <th className="py-3 px-4 font-medium">Email</th>
+        <th className="py-3 px-4 font-medium">Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      {items?.map((item) => (
+        <tr key={item.id} className="border-b hover:bg-gray-50">
+          <td className="py-3 px-4">{item.name}</td>
+          <td className="py-3 px-4 text-gray-500">{item.email}</td>
+          <td className="py-3 px-4 text-gray-400 text-sm">
+            {new Date(item.created_at).toLocaleDateString()}
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</div>
+```
+
+### Dashboard Stats (for overview)
+```tsx
+async function DashboardStats() {
+  const supabase = await createClient()
+  const { count: total } = await supabase
+    .from('table_name')
+    .select('*', { count: 'exact', head: true })
+
+  const { count: today } = await supabase
+    .from('table_name')
+    .select('*', { count: 'exact', head: true })
+    .gte('created_at', new Date().toISOString().split('T')[0])
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
+      <StatCard label="Total" value={total ?? 0} />
+      <StatCard label="Today" value={today ?? 0} />
+    </div>
+  )
+}
+
+function StatCard({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="bg-white border rounded-xl p-6">
+      <p className="text-sm text-gray-500">{label}</p>
+      <p className="text-3xl font-bold mt-1">{value}</p>
+    </div>
+  )
+}
+```
+
+## Access Control
+
+If this is an admin-only view:
+- Ensure the route is protected by middleware (from `add-login` skill)
+- Add sign-out button on the page
+- Show the user's email: "Signed in as you@email.com"
+
+If this is public (like a portfolio or directory):
+- No auth needed
+- Make sure the Supabase RLS policy allows public reads
+
+## Real-Time Updates (Optional)
+
+If the designer wants to see new entries appear without refreshing:
+```tsx
+'use client'
+
+import { createClient } from '@/utils/supabase/client'
+import { useEffect, useState } from 'react'
+
+// Subscribe to new entries
+useEffect(() => {
+  const supabase = createClient()
+  const channel = supabase.channel('entries')
+    .on('postgres_changes', {
+      event: 'INSERT',
+      schema: 'public',
+      table: 'table_name',
+    }, (payload) => {
+      setItems(prev => [payload.new, ...prev])
+    })
+    .subscribe()
+
+  return () => { supabase.removeChannel(channel) }
+}, [])
+```
+
+Only add if they ask for it. Don't over-engineer.
+
+## Common Issues
+
+| Problem | Fix |
+|---|---|
+| Page shows empty even though data exists | Check RLS policy allows reads for this user |
+| Data shows but unstyled | Make sure Tailwind classes are applied |
+| Dates look ugly | Format with `toLocaleDateString()` |
+| Too much data, page is slow | Add `.limit(50)` to query, add pagination later if needed |
+| Data appears on refresh but not immediately | Page is server-side cached — add `export const revalidate = 0` for always-fresh data |

package/template/skills/unstuck/SKILL.md

@@ -0,0 +1,105 @@
+---
+name: unstuck
+description: "Detects frustration and fixes problems fast. Triggers: 'stuck', 'this doesn't work', 'broken', 'help', 'ugh', 'what the hell', 'why', 'not working', 'it broke', 'error', 'can't figure out', 'I give up', 'frustrated', 'wtf', 'nothing happens', 'blank page', 'won't load', 'keeps crashing'."
+---
+
+# Unstuck
+
+The momentum-preservation skill. When a designer hits a wall, get them back to a working state as fast as possible. Explain after.
+
+## Detection Signals
+
+Activate when you see:
+- Short frustrated messages: "ugh", "help", "stuck", "wtf"
+- Error descriptions: "this doesn't work", "it broke", "nothing happens"
+- Repeated attempts at the same thing
+- Same error appearing multiple times
+- Designer pasting error messages
+- Questions like "why doesn't this work?"
+
+## Response Protocol
+
+### Step 1: Acknowledge (1 sentence)
+> "Got it, let me take a look."
+
+Do NOT say: "What seems to be the problem?" or "Can you describe the error?" or "What were you trying to do?"
+
+They already told you. Or the context tells you. Diagnose from what you can see.
+
+### Step 2: Diagnose Silently
+
+Check in this order:
+1. **Terminal output** — any errors visible?
+2. **Browser console** — any errors in the page?
+3. **Recent file changes** — what did they (or you) change last?
+4. **Dev server** — is it running? Did it crash?
+5. **Dependencies** — any missing packages?
+6. **Environment** — any missing env vars?
+
+### Step 3: Fix
+
+Fix the problem. Don't describe what you're about to do. Just do it.
+
+### Step 4: Show Working Result
+> "That's working now. Check your browser."
+
+### Step 5: Brief Explanation (1-2 sentences, only if helpful)
+> "The issue was [X]. This happens when [Y]. No worries."
+
+Do NOT:
+- Launch into a teaching moment
+- Explain the underlying architecture
+- Suggest they should have done it differently
+- Recommend preventive measures
+
+### Step 6: Momentum Restore
+> "Want to keep going?"
+
+## Common Problems & Fast Fixes
+
+| Symptom | Likely cause | Fix |
+|---|---|---|
+| Blank page | Server component trying to use client hooks | Add `'use client'` directive |
+| "Module not found" | Missing package | `npm install [package]` |
+| Form submits but nothing happens | Server action not connected or missing `'use server'` | Check action binding |
+| "hydration mismatch" | Server/client HTML differs | Move dynamic content to client component |
+| Page shows raw code/JSON | Missing page component or wrong export | Check default export |
+| Styles not applying | Tailwind class not compiling or wrong class name | Check tailwind config, restart dev server |
+| "ECONNREFUSED" on database | Supabase not configured or env vars missing | Check `.env.local` |
+| Login redirect loop | Middleware misconfigured | Check middleware matcher |
+| Image not showing | Wrong path or missing from public folder | Fix path or move image |
+| Dev server won't start | Port in use or syntax error | Kill port, check last edit |
+| "Cannot read properties of undefined" | Accessing data before it loads | Add loading/null check |
+| Build fails | TypeScript error or missing import | Check the specific error line |
+
+## Escalation
+
+If you can't fix it in 2 attempts:
+
+> "This one's tricky. I've tried two approaches and it's still not playing nice. 
+> 
+> Here's what I can do:
+> 1. **Roll back** — go back to how it was 5 minutes ago before this broke
+> 2. **Try a different approach** — do the same thing but built differently
+> 
+> Which do you prefer?"
+
+If they choose rollback, use git:
+```bash
+git stash  # saves their changes
+git checkout -- .  # restores last good state
+```
+
+Then re-apply their intended change with a different approach.
+
+## Anti-Patterns
+
+NEVER do these when a designer is frustrated:
+
+- ❌ "What error are you seeing?" (you can see it)
+- ❌ "Can you try clearing your cache?" (you fix it)
+- ❌ "This is because of how React hydration works..." (they don't care right now)
+- ❌ "You should have used X instead of Y" (not the time)
+- ❌ "Let me explain what went wrong in detail" (later, if they ask)
+- ❌ Ask multiple clarifying questions before acting
+- ❌ Suggest they read documentation

package/template/skills/upload-file/SKILL.md

@@ -0,0 +1,188 @@
+---
+name: upload-file
+description: "Handles file and image uploads. Triggers: 'upload', 'add a photo', 'add an image', 'file upload', 'image upload', 'let them upload', 'upload pictures', 'attach file', 'profile picture', 'photo gallery', 'add photos', 'drag and drop'."
+---
+
+# Upload File
+
+Lets users upload images or files. Stores them in the cloud, displays them on the site.
+
+## Default: Supabase Storage
+
+Already using Supabase for data, so storage is built in.
+
+### Step 1: Create Storage Bucket
+
+Via Supabase dashboard:
+> "Go to Supabase dashboard → Storage → New Bucket.
+> Name it something like 'images' or 'uploads'.
+> Set it to Public if these images should be visible on your site."
+
+Or via SQL:
+```sql
+insert into storage.buckets (id, name, public)
+values ('images', 'images', true);
+
+-- Allow anyone to upload (for public forms)
+create policy "Anyone can upload" on storage.objects
+  for insert with check (bucket_id = 'images');
+
+-- Allow anyone to view (for public images)
+create policy "Anyone can view" on storage.objects
+  for select using (bucket_id = 'images');
+```
+
+### Step 2: Create Upload Component
+
+```tsx
+'use client'
+
+import { createClient } from '@/utils/supabase/client'
+import { useState } from 'react'
+
+export function ImageUpload({ onUpload }: { onUpload: (url: string) => void }) {
+  const [uploading, setUploading] = useState(false)
+
+  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    setUploading(true)
+    const supabase = createClient()
+
+    // Generate unique filename
+    const fileExt = file.name.split('.').pop()
+    const fileName = `${Date.now()}-${Math.random().toString(36).slice(2)}.${fileExt}`
+
+    const { error } = await supabase.storage
+      .from('images')
+      .upload(fileName, file)
+
+    if (error) {
+      alert('Upload failed. Try again.')
+      setUploading(false)
+      return
+    }
+
+    // Get the public URL
+    const { data: { publicUrl } } = supabase.storage
+      .from('images')
+      .getPublicUrl(fileName)
+
+    onUpload(publicUrl)
+    setUploading(false)
+  }
+
+  return (
+    <label className="block cursor-pointer">
+      <div className="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-gray-400 transition-colors">
+        {uploading ? (
+          <p className="text-gray-500">Uploading...</p>
+        ) : (
+          <>
+            <p className="text-gray-500">Click to upload an image</p>
+            <p className="text-sm text-gray-400 mt-1">PNG, JPG, WebP up to 5MB</p>
+          </>
+        )}
+      </div>
+      <input
+        type="file"
+        accept="image/*"
+        onChange={handleUpload}
+        className="hidden"
+        disabled={uploading}
+      />
+    </label>
+  )
+}
+```
+
+### Step 3: Use It
+
+In any page or form:
+```tsx
+import { ImageUpload } from '@/components/ImageUpload'
+
+// In your component:
+<ImageUpload onUpload={(url) => {
+  // Save the URL to your database, or display it
+  console.log('Uploaded:', url)
+}} />
+```
+
+### Step 4: Display Uploaded Images
+
+```tsx
+// Single image
+<img src={imageUrl} alt="Uploaded image" className="rounded-lg w-full max-w-md" />
+
+// Gallery grid
+<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+  {images.map((url) => (
+    <img key={url} src={url} alt="" className="rounded-lg aspect-square object-cover" />
+  ))}
+</div>
+```
+
+### Step 5: Test It
+
+> "Try uploading an image. It should appear on the page immediately. You can also check your Supabase dashboard → Storage → images to see the file."
+
+## Variations
+
+### Profile Picture
+Upload + save URL to user record:
+```typescript
+// After upload, save to user profile
+await supabase.from('profiles').update({
+  avatar_url: publicUrl
+}).eq('id', userId)
+```
+
+### Multiple Images
+Allow selecting multiple files:
+```tsx
+<input type="file" accept="image/*" multiple onChange={handleMultiUpload} />
+```
+
+### Drag and Drop
+Add drag-and-drop to the upload zone:
+```tsx
+<div
+  onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
+  onDragLeave={() => setDragging(false)}
+  onDrop={(e) => {
+    e.preventDefault()
+    setDragging(false)
+    const file = e.dataTransfer.files[0]
+    if (file) handleUploadFile(file)
+  }}
+  className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${
+    dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300'
+  }`}
+>
+```
+
+## File Size & Type Limits
+
+Set reasonable defaults:
+- Max file size: 5MB for images, 10MB for documents
+- Accepted types: `image/*` for images, or specific extensions
+- Validate before upload, show friendly error if too large
+
+```typescript
+if (file.size > 5 * 1024 * 1024) {
+  alert('This image is too large. Please use one under 5MB.')
+  return
+}
+```
+
+## Common Issues
+
+| Problem | Fix |
+|---|---|
+| "Bucket not found" | Create the bucket in Supabase dashboard |
+| Upload succeeds but image doesn't display | Check bucket is set to Public |
+| "Permission denied" on upload | Check storage policies — insert policy needed |
+| Image loads slowly | Supabase serves from CDN, but very large images will be slow. Consider resizing before upload |
+| Wrong file type uploaded | Add `accept` attribute to input and validate in JS |

package/template/skills/what-am-i-building/SKILL.md

@@ -0,0 +1,129 @@
+---
+name: what-am-i-building
+description: "Figures out what you're building and sets up the project. Triggers: 'I want to build', 'I want to make', 'new project', 'start something', 'I have an idea', 'help me build', 'create a', 'build me a', 'I need a website', 'I need an app', 'make me a'."
+---
+
+# What Am I Building
+
+The entry point for every new project. Translates the designer's idea into a working scaffold as fast as possible.
+
+## Fast Mode (Default)
+
+Ask ONE question, then scaffold. Do not front-load planning.
+
+### The Question
+
+> "What are you making? Give me the quick version — what does someone DO when they visit?"
+
+### From Their Answer, Extract
+
+1. **Platform** — web, mobile, desktop, or other (see routing table below)
+2. **Core action** — the ONE thing a visitor does (book, buy, read, contact, upload)
+3. **First visible thing** — the landing page / first screen
+
+### Then Immediately
+
+1. Show a simple flow map:
+   ```
+   📍 Here's how it'll work:
+   [Visitor arrives] → [Sees X] → [Does Y] → [Result Z]
+   ```
+2. Scaffold the project
+3. Start the dev server
+4. Show the first page in the browser
+
+Total time from idea to first page in browser: **under 5 minutes.**
+
+## Platform Routing
+
+| They say | Platform | Stack |
+|---|---|---|
+| "website", "landing page", "portfolio", "blog" | Web | Next.js + Tailwind + Supabase + Vercel |
+| "web app", "dashboard", "tool", "SaaS" | Web | Next.js + Tailwind + Supabase + Vercel |
+| "app", "iPhone", "Android", "mobile" | Mobile | React Native + Expo + Supabase + EAS |
+| "store", "sell", "shop", "products", "e-commerce" | Shopify | Liquid + Shopify CLI |
+| "blog", "CMS", "content site", "magazine" | WordPress | Block themes + WP REST API |
+| "Figma plugin", "extend Figma" | Figma Plugin | TypeScript + Figma Plugin API |
+| "email template", "newsletter" | Email | MJML + Resend |
+| "desktop app", "Mac app", "Windows app" | Desktop | Electron + Vite |
+| "art", "generative", "creative", "animation" | Creative | p5.js or Three.js |
+
+If ambiguous: "Is this something people use on their phone, in a browser, or on their desktop?"
+
+Only ask if truly unclear — most of the time, the context makes it obvious.
+
+## Scaffolding (Web — Default)
+
+```bash
+npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm
+```
+
+After scaffold, immediately:
+1. Clean up starter boilerplate (remove default Next.js hero content)
+2. Add a minimal but attractive landing page with good typography
+3. `npm run dev` and tell the designer to check their browser
+
+## System Design (Invisible)
+
+When the designer describes their idea, internally decompose into building blocks. NEVER show this as a technical diagram. Show it as the flow map above.
+
+Internal mapping (you think this, they never see it):
+```
+Story element              → Building block        → Skill to invoke later
+"people can book"          → Form + database        → save-data
+"only I can see bookings"  → Auth + protected page  → add-login
+"get notified"             → Email integration      → send-email
+"upload photos"            → File storage            → upload-file
+"show all bookings"        → Data display            → show-data
+```
+
+## Scope Control
+
+If they describe many features, prioritize without blocking:
+
+```
+📍 You've described a few features. Here's what I'd suggest:
+
+🟢 BUILD FIRST (gets you live fastest):
+  1. [Core visible page]
+  2. [Primary action / form]
+
+🟡 ADD NEXT (once the core works):
+  3. [Secondary feature]
+  4. [Another feature]
+
+🔵 LATER (nice to have):
+  5. [Extra feature]
+
+The first 2 could be working in 15 minutes. Start there?
+```
+
+Never enforce this order. If they say "actually start with #4," start with #4.
+
+## Re-Activation
+
+This skill re-activates when the designer says:
+- "I also want to add..."
+- "Can we add a new feature?"
+- "What about adding..."
+
+Re-evaluate the flow map, identify new building blocks, integrate without restructuring what exists.
+
+## Project Context File
+
+After the first scaffold, auto-generate `.github/project-context.md` so the assistant remembers across sessions:
+
+```markdown
+# Project Context
+- **What:** [Description from designer]
+- **Platform:** web
+- **Stack:** Next.js + Tailwind + Supabase + Vercel
+- **Core flow:** [Visitor arrives] → [Does X] → [Result Y]
+- **Features present:** landing page
+- **Features planned:** [from scope control]
+- **Database tables:** (none yet)
+- **Auth:** not set up
+- **Deploy:** not deployed yet
+```
+
+Update this file whenever a major feature is added.

package/template/skills/what-am-i-building/references/platform-routing.md

@@ -0,0 +1,66 @@
+# Platform Routing Reference
+
+## Decision Table
+
+| Signal words | Platform | Default stack |
+|---|---|---|
+| website, landing page, portfolio, personal site | Web | Next.js + Tailwind + Supabase + Vercel |
+| web app, tool, SaaS, dashboard, admin | Web | Next.js + Tailwind + Supabase + Vercel |
+| booking, scheduling, appointments | Web | Next.js + Tailwind + Supabase + Vercel |
+| app, iPhone, Android, mobile, phone | Mobile | Expo (React Native) + Supabase + EAS |
+| store, shop, sell, products, e-commerce, marketplace | Shopify | Shopify CLI + Liquid |
+| blog, CMS, content, magazine, news, articles | WordPress | Block themes + WP REST API |
+| Figma plugin, extend Figma, Figma tool | Figma Plugin | TypeScript + Figma Plugin API |
+| email, newsletter, email template | Email | MJML + Resend |
+| desktop app, Mac app, Windows app | Desktop | Electron + Vite + React |
+| art, generative, creative, animation, 3D | Creative | p5.js / Three.js / Canvas |
+| game, interactive, playful | Creative | p5.js / Pixi.js |
+| physical, hardware, Arduino, sensor | Hardware | Python / Arduino C++ |
+| AI tool, automation, script | Utility | Python + API calls |
+
+## Disambiguation
+
+If multiple signals conflict, ask ONE question:
+
+> "Sounds cool! Quick question — will people use this on their phone, in a browser, or on their desktop?"
+
+Do NOT ask about technology choices (React vs Vue, PostgreSQL vs MongoDB). The platform decision determines the stack automatically.
+
+## Per-Platform Scaffold Commands
+
+### Web (Next.js)
+```bash
+npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm
+```
+
+### Mobile (Expo)
+```bash
+npx create-expo-app@latest . --template tabs
+```
+
+### Shopify
+```bash
+npm init @shopify/theme@latest
+```
+
+### WordPress
+```bash
+npx @wordpress/create-block@latest theme-starter
+```
+
+### Email (MJML)
+```bash
+npm init -y && npm install mjml
+```
+
+### Desktop (Electron)
+```bash
+npm create electron-vite@latest . -- --template react-ts
+```
+
+### Creative (p5.js)
+```bash
+npm init -y && npm install p5
+```
+
+For v1, only **Web (Next.js)** has full skill support. Other platforms can be scaffolded but won't have outcome skills (save-data, add-login, etc.) customized for them yet.