vibe-ship-it 1.2.1 → 1.3.0

package/README.md

@@ -18,7 +18,7 @@ Works with **VS Code Copilot**, **Claude Code**, and **OpenAI Codex**.
 | **shipper** | Deploys to GitHub Pages or Vercel | "Ship it" / "Put it online" |
 | **investigator** | Deep debugs when quick fixes don't work | "It was working before" / "Find the bug" |
 
-### 12 Skills
+### 13 Skills
 
 | Skill | What it does | Say this |
 |---|---|---|
@@ -27,6 +27,7 @@ Works with **VS Code Copilot**, **Claude Code**, and **OpenAI Codex**.
 | **unstuck** | Fixes problems fast when you're frustrated | "This doesn't work" / "Ugh" |
 | **build-page** | Builds UI from descriptions or screenshots | "Build a landing page with..." |
 | **make-it-wow** | Instant visual polish — animations, typography, hover effects | "Make it look better" |
+| **design-system** | Builds tokens, primitive components, and rules from your existing UI | "Set up a design system" |
 | **save-data** | Saves form submissions to a database | "Save the form" |
 | **add-login** | Adds user authentication | "Add login" / "Only I can see this" |
 | **send-email** | Sends confirmation or notification emails | "Send me an email when..." |
@@ -133,6 +134,7 @@ skills/
   unstuck/                              ← Fast frustration fix
   build-page/                           ← UI construction
   make-it-wow/                          ← Visual polish
+  design-system/                        ← Tokens + primitives + consistency rules
   save-data/                            ← Database persistence
   add-login/                            ← Authentication
   send-email/                           ← Email notifications

package/bin/init.js

@@ -67,7 +67,7 @@ if (command === 'init') {
     if (choice !== '2' && choice !== '3') {
       console.log('     4 agents  (assistant, checker, shipper, investigator)')
     }
-    console.log('    12 skills  (build-page, save-data, add-login, and more)')
+    console.log('    13 skills  (build-page, design-system, save-data, and more)')
     console.log('')
     console.log('  Just say what you want in plain English.')
     console.log('  Example: "I want to build a portfolio site"')
@@ -122,7 +122,7 @@ if (command === 'init') {
   console.log('  │  shipper       Puts your project online.                │')
   console.log('  │  investigator  Deep debugs when things break.           │')
   console.log('  │                                                         │')
-  console.log('  │  12 SKILLS                                              │')
+  console.log('  │  13 SKILLS                                              │')
   console.log('  │                                                         │')
   console.log('  │  "I want to build a..."    → what-am-i-building         │')
   console.log('  │  "Build a landing page"    → build-page                 │')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-ship-it",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "AI skill pack for designers who vibe-code. 4 agents, 12 skills — just say what you want in plain English.",
   "bin": {
     "vibe-ship-it": "./bin/init.js"

package/template/AGENTS.md

@@ -33,6 +33,7 @@ You help an excited designer build their idea. They are not a programmer. They t
 - Deploy = "put it online so anyone with the link can see it"
 - Component = "a reusable piece of your page"
 - Route = "a page at a specific URL"
+- Writing style = "Do not use emoji or em dash in user-facing copy unless explicitly requested"
 
 ## Default Stack (Web)
 
@@ -66,6 +67,7 @@ Run before-you-ship checklist first — this is non-negotiable even if the desig
 | "Upload" / "add a photo" | File storage | Supabase Storage |
 | "Show me all the..." / "dashboard" | Data display | Fetch + styled list/cards |
 | "Make it look better" / "it looks boring" | Visual polish | Add animations, typography, spacing |
+| "Set up a design system" / "make styles consistent" / "set up tokens" | Design system | Extract tokens + create primitives + define usage rules |
 | "Ship it" / "put it online" | Deploy | Run pre-flight check, then deploy to Vercel |
 | "Check it" / "is this ready?" | QA | Run quick-check or full checklist |
 | "This doesn't work" / "ugh" / "stuck" | Frustrated — needs help | Fix silently, explain after |

package/template/CLAUDE.md

@@ -33,6 +33,7 @@ You help an excited designer build their idea. They are not a programmer. They t
 - Deploy = "put it online so anyone with the link can see it"
 - Component = "a reusable piece of your page"
 - Route = "a page at a specific URL"
+- Writing style = "Do not use emoji or em dash in user-facing copy unless explicitly requested"
 
 ## Default Stack (Web)
 
@@ -66,6 +67,7 @@ Run before-you-ship checklist first — this is non-negotiable even if the desig
 | "Upload" / "add a photo" | File storage | Supabase Storage |
 | "Show me all the..." / "dashboard" | Data display | Fetch + styled list/cards |
 | "Make it look better" / "it looks boring" | Visual polish | Add animations, typography, spacing |
+| "Set up a design system" / "make styles consistent" / "set up tokens" | Design system | Extract tokens + create primitives + define usage rules |
 | "Ship it" / "put it online" | Deploy | Run pre-flight check, then deploy to Vercel |
 | "Check it" / "is this ready?" | QA | Run quick-check or full checklist |
 | "This doesn't work" / "ugh" / "stuck" | Frustrated — needs help | Fix silently, explain after |

package/template/_github/copilot-instructions.md

@@ -33,6 +33,7 @@ You help an excited designer build their idea. They are not a programmer. They t
 - Deploy = "put it online so anyone with the link can see it"
 - Component = "a reusable piece of your page"
 - Route = "a page at a specific URL"
+- Writing style = "Do not use emoji or em dash in user-facing copy unless explicitly requested"
 
 ## Default Stack (Web)
 
@@ -55,6 +56,7 @@ Don't mention these names unless the designer asks. Just use them.
 | "Upload" / "add a photo" | File storage | Supabase Storage |
 | "Show me all the..." / "dashboard" | Data display | Fetch + styled list/cards |
 | "Make it look better" / "it looks boring" | Visual polish | Add animations, typography, spacing |
+| "Set up a design system" / "make styles consistent" / "set up tokens" | Design system | Extract tokens + create primitives + define usage rules |
 | "Ship it" / "put it online" | Deploy | Run pre-flight check, then deploy to Vercel |
 | "Check it" / "is this ready?" | QA | Run quick-check or full checklist |
 | "This doesn't work" / "ugh" / "stuck" | Frustrated — needs help | Fix silently, explain after |

package/template/skills/design-system/SKILL.md

@@ -0,0 +1,113 @@
+---
+name: design-system
+description: "Makes your app's styles consistent. Extracts your current look into reusable tokens and components. Triggers: 'design system', 'set up tokens', 'make styles consistent', 'standardize styles', 'set up a design system', 'make it all match', 'create components from my styles'."
+---
+
+# Design System
+
+Makes your app look consistent everywhere. Pulls the visual style from what you already built and turns it into reusable pieces.
+
+## How It Works
+
+One pass. Not a multi-step project.
+
+1. Scan existing pages for repeated visual patterns
+2. Extract them into named tokens (colors, sizes, spacing, shapes, shadows)
+3. Generate primitive components wired to those tokens
+4. Apply them in place so nothing looks different yet, but everything is now reusable
+5. Show the result
+
+If no pages exist yet, start from smart defaults that look like a real product.
+
+## When To Use
+
+- "Set up a design system"
+- "Make styles consistent"
+- "Make it all match"
+- "Set up tokens"
+- "Create components from my styles"
+- "Standardize this"
+
+## Starting Point
+
+Use Material Design 3 as the internal reference for token categories, component patterns, and accessibility defaults. Never mention "Material" to the user. They just get a clean, modern system.
+
+### If pages already exist
+Extract tokens from the current UI. Preserve the existing look. The system should formalize what's already there, not redesign it.
+
+### If no pages exist yet
+Generate a neutral, modern token set with good defaults:
+- Clean type scale, comfortable spacing, subtle shadows, accessible contrast
+- Feels like a real product out of the box
+
+## Token Names
+
+Use simple names designers already know. Not spec jargon.
+
+| Category | Tokens |
+|---|---|
+| Color | `background`, `text`, `muted`, `accent`, `border`, `success`, `warning`, `danger` |
+| Typography | font family, sizes (`text-sm` through `text-4xl`), weights, line heights |
+| Spacing | `space-1` through `space-8` (tight to wide) |
+| Radius | `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-full` |
+| Shadow | `shadow-sm`, `shadow-md`, `shadow-lg` |
+| Motion | `duration-fast`, `duration-base`, `duration-slow` + easing |
+
+## Primitive Components
+
+Generate these 6 components, each wired to tokens:
+
+1. **Button** -- filled, outlined, ghost variants + sizes (sm/md/lg) + states (hover/focus/disabled/loading)
+2. **Input** -- with label, error state, disabled state
+3. **Textarea** -- same states as Input
+4. **Select** -- dropdown with consistent styling
+5. **Card** -- container with consistent padding, radius, shadow
+6. **Alert** -- info/success/warning/danger tones
+
+Every primitive must include:
+- Visible focus state (not browser default)
+- Contrast-safe text colors
+- Hover and disabled states where relevant
+
+## Personality Adjustments
+
+After the system exists, the designer can shift the whole feel with plain English:
+
+| They say | What changes |
+|---|---|
+| "Make it warmer" | Shift palette toward warm neutrals, amber/orange accents |
+| "More playful" | Increase border radius, add bounce easing, brighter accent |
+| "More minimal" | Reduce shadow depth, tighten spacing, mute accent |
+| "Bolder" | Increase heading weight/size contrast, stronger shadows, saturated accent |
+| "More corporate" | Cool neutrals, tighter type scale, sharper corners |
+| "Softer" | Larger radius, lighter shadows, more whitespace |
+
+Each adjustment shifts the full token set at once. Never ask which individual token to change.
+
+## Rules (Applied Automatically)
+
+After generating the system, enforce these going forward:
+1. No raw color values outside token definitions
+2. Use spacing scale only (no arbitrary pixel values)
+3. All interactive elements must have visible focus states
+4. Text must meet minimum contrast (4.5:1 for body, 3:1 for large)
+5. Use primitives for common UI patterns instead of rebuilding from scratch
+
+Do not lecture about rules. Just follow them silently when building new pages.
+
+## Output
+
+After applying, say something short like:
+- "Your styles are now consistent across all pages. 6 reusable components are ready."
+- "Everything matches now. Future pages will stay consistent automatically."
+
+Do not list every token or every file changed.
+
+## What Not To Do
+
+- Do not redesign the app when extracting a system
+- Do not show Material Design terminology to the user
+- Do not require Figma
+- Do not ask which tokens to create -- just create them all
+- Do not make it a multi-session project -- do it in one pass
+- Do not use emoji or em dash in generated copy