start-vibing-stacks 1.5.0 → 1.6.0

package/dist/index.js

@@ -146,18 +146,8 @@ async function main() {
             })),
         },
     ]);
-    // ─── Step 6: Deploy Target ─────────────────────────────────────────────
-    const { deploy } = await inquirer.prompt([
-        {
-            type: 'list',
-            name: 'deploy',
-            message: 'Deployment target?',
-            choices: stackConfig.deployTargets.map((d) => ({
-                name: `${d.icon}  ${d.name}`,
-                value: d.id,
-            })),
-        },
-    ]);
+    // ─── Step 6: Deploy — GitHub (default) ──────────────────────────────────
+    const deploy = 'github';
     // ─── Step 6b: MCP Servers ────────────────────────────────────────────
     const selectedMcps = FLAGS.noMcp ? [] : await selectMcpServers(stackId, database);
     // ─── Step 7: Show Summary & Confirm ────────────────────────────────────
@@ -180,7 +170,7 @@ async function main() {
         'Framework': framework,
         'Database': database,
         'Frontend': frontend,
-        'Deploy': deploy,
+        'Deploy': '🐙 GitHub (git push)',
         'Agents': '6 universal',
         'Skills': `${stackConfig.skills.length} stack + shared`,
         'Hooks': 'stop-validator + prompt-inject',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "start-vibing-stacks",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "AI-powered multi-stack dev workflow for Claude Code. Supports PHP, Node.js, Python and more.",
   "type": "module",
   "bin": {

package/stacks/_shared/skills/playwright-automation/SKILL.md

@@ -0,0 +1,90 @@
+# Playwright Automation — E2E Testing
+
+**ALWAYS invoke when writing E2E tests or browser automation.**
+
+## Structure
+
+```
+tests/e2e/
+├── fixtures/          # Auth, DB cleanup, custom fixtures
+├── pages/             # Page Object Model
+├── flows/             # User journey tests
+├── api/               # API-only tests
+└── playwright.config.ts
+```
+
+## Page Object Model
+
+```typescript
+// tests/e2e/pages/base.page.ts
+import { type Page, type Locator, expect } from '@playwright/test';
+
+export abstract class BasePage {
+  protected readonly page: Page;
+  constructor(page: Page) { this.page = page; }
+
+  get loadingSpinner(): Locator { return this.page.getByTestId('loading-spinner'); }
+  get errorMessage(): Locator { return this.page.getByTestId('error-message'); }
+
+  async waitForLoad(): Promise<void> {
+    await this.loadingSpinner.waitFor({ state: 'hidden' });
+  }
+
+  async goto(path: string): Promise<void> {
+    await this.page.goto(path);
+    await this.waitForLoad();
+  }
+}
+```
+
+## Auth Fixture
+
+```typescript
+export function generateTestUser(): TestUser {
+  const ts = Date.now();
+  const rand = Math.random().toString(36).substring(7);
+  return {
+    name: `Test User ${ts}`,
+    email: `testuser_${ts}_${rand}@test.com`,
+    password: 'TestPassword123!',
+  };
+}
+```
+
+## Multi-Viewport Testing
+
+```typescript
+const viewports = [
+  { name: 'mobile', width: 375, height: 667 },
+  { name: 'tablet', width: 768, height: 1024 },
+  { name: 'desktop', width: 1280, height: 800 },
+] as const;
+
+for (const viewport of viewports) {
+  test.describe(`Responsive - ${viewport.name}`, () => {
+    test.use({ viewport: { width: viewport.width, height: viewport.height } });
+    test('navigation adapts', async ({ page }) => { /* ... */ });
+  });
+}
+```
+
+## Required data-testid
+
+```html
+<input data-testid="email-input" />
+<input data-testid="password-input" />
+<button data-testid="submit-button" />
+<div data-testid="error-message" />
+<div data-testid="success-message" />
+<div data-testid="loading-spinner" />
+<nav data-testid="sidebar" />
+<button data-testid="hamburger-menu" />
+```
+
+## FORBIDDEN
+
+1. **Hardcoded test data** — generate unique data with timestamps
+2. **`.skip()` or `.only()`** — never in committed code
+3. **No cleanup** — always track + clean created data
+4. **Mocked auth** — use real authentication flows
+5. **Single viewport** — test mobile + tablet + desktop

package/stacks/_shared/skills/test-coverage/SKILL.md

@@ -0,0 +1,67 @@
+# Test Coverage — Testing Management
+
+**ALWAYS invoke AFTER implementing any feature. Do NOT skip.**
+
+## Critical Rules
+
+1. **CLEANUP ALL TEST DATA** — fixture-based tracking
+2. **VERIFY IN DATABASE** — check DB state after UI actions
+3. **TEST ALL VIEWPORTS** — desktop, tablet, mobile minimum
+4. **REAL AUTH ONLY** — never mock authentication
+5. **UNIQUE DATA** — timestamps in emails/names
+6. **NO `.skip()`** — never in committed code
+
+## Files That NEED Tests
+
+| Type | Test Expected | Required |
+|------|--------------|----------|
+| API Route | Unit + E2E | **YES** |
+| Model/Entity | Unit | **YES** |
+| Page/View | E2E flow | **YES** |
+| Component (interactive) | E2E | YES |
+| Hook/Service | Unit | YES |
+| Utility (exported) | Unit | YES |
+
+## Required E2E Flows
+
+- [ ] Registration — create user, verify in DB
+- [ ] Login/Logout — auth state changes
+- [ ] CRUD Create — item created, visible, in DB
+- [ ] CRUD Read — item displayed correctly
+- [ ] CRUD Update — changes reflected in DB
+- [ ] CRUD Delete — removed from DB
+- [ ] Permissions — forbidden requests blocked
+- [ ] Responsive — works on all viewports
+
+## Stack-Specific Commands
+
+### PHP (PHPUnit + Pest)
+```bash
+./vendor/bin/phpunit
+./vendor/bin/pest --coverage --min=70
+```
+
+### Node.js (Vitest + Playwright)
+```bash
+npx vitest run --coverage
+npx playwright test
+npx playwright test --ui
+```
+
+## Before Commit Checklist
+
+- [ ] All new features have tests?
+- [ ] Tests use fixtures for cleanup?
+- [ ] Database state verified after UI actions?
+- [ ] Tests run on all viewports?
+- [ ] Coverage threshold met (≥70%)?
+- [ ] No `.skip()` in tests?
+- [ ] All tests passing?
+
+## FORBIDDEN
+
+1. **Skipping tests** — `test.skip()`, `.only()`
+2. **Mocking auth** — use real authentication
+3. **Fixed test users** — `test@test.com` → generate unique
+4. **No cleanup** — orphaned test data
+5. **No DB validation** — trusting UI without checking DB

package/stacks/frontend/react/skills/react-patterns/SKILL.md

@@ -0,0 +1,113 @@
+# React Patterns — Modern Component Architecture
+
+**ALWAYS invoke when writing React components, hooks, or state management.**
+
+## Component Patterns
+
+### Compound Components
+```tsx
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function Tabs({ children, defaultTab }: { children: ReactNode; defaultTab: string }) {
+  const [activeTab, setActiveTab] = useState(defaultTab);
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+      <div className="tabs">{children}</div>
+    </TabsContext.Provider>
+  );
+}
+// + TabList, Tab, TabPanel components using useContext(TabsContext)
+```
+
+### Generic List Component
+```tsx
+interface ListProps<T> {
+  items: T[];
+  renderItem: (item: T) => ReactNode;
+  keyExtractor: (item: T) => string;
+}
+
+function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) {
+  return <ul>{items.map(item => <li key={keyExtractor(item)}>{renderItem(item)}</li>)}</ul>;
+}
+```
+
+## Custom Hooks
+
+```tsx
+// useLocalStorage
+function useLocalStorage<T>(key: string, initial: T) {
+  const [value, setValue] = useState<T>(() => {
+    if (typeof window === 'undefined') return initial;
+    try { return JSON.parse(window.localStorage.getItem(key) ?? '') } catch { return initial }
+  });
+  const set = useCallback((v: T | ((val: T) => T)) => {
+    setValue(prev => {
+      const next = v instanceof Function ? v(prev) : v;
+      window.localStorage.setItem(key, JSON.stringify(next));
+      return next;
+    });
+  }, [key]);
+  return [value, set] as const;
+}
+
+// useDebounce
+function useDebounce<T>(value: T, delay: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => { const t = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(t); }, [value, delay]);
+  return debounced;
+}
+```
+
+## State Management
+
+### useReducer for Complex State
+```tsx
+type Action =
+  | { type: 'FETCH_START' }
+  | { type: 'FETCH_SUCCESS'; payload: Item[] }
+  | { type: 'FETCH_ERROR'; payload: string };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'FETCH_START': return { ...state, loading: true, error: null };
+    case 'FETCH_SUCCESS': return { ...state, loading: false, items: action.payload };
+    case 'FETCH_ERROR': return { ...state, loading: false, error: action.payload };
+  }
+}
+```
+
+### Context (avoid prop drilling)
+```tsx
+const AppContext = createContext<AppContextValue | undefined>(undefined);
+export function useApp() {
+  const ctx = useContext(AppContext);
+  if (!ctx) throw new Error('useApp must be used within AppProvider');
+  return ctx;
+}
+```
+
+## Performance
+
+```tsx
+// memo — prevent re-renders
+const ExpensiveList = memo(function ExpensiveList({ items }: { items: Item[] }) { ... });
+
+// useMemo — expensive calculations
+const processed = useMemo(() => data.map(d => expensiveCalc(d)), [data]);
+
+// useCallback — stable refs
+const handleClick = useCallback(() => setCount(c => c + 1), []);
+
+// Code splitting
+const Heavy = lazy(() => import('./HeavyComponent'));
+<Suspense fallback={<Loading />}><Heavy /></Suspense>
+```
+
+## FORBIDDEN
+
+1. **Class components** — function components only
+2. **Prop drilling** — use context or composition
+3. **Inline objects/functions in JSX** — causes re-renders
+4. **useEffect for derived state** — use useMemo
+5. **Mutating state directly** — always setState/dispatch

package/stacks/frontend/react/skills/tailwind-patterns/SKILL.md

@@ -0,0 +1,94 @@
+# Tailwind Patterns — Utility-First CSS
+
+**ALWAYS invoke when writing Tailwind CSS classes.**
+
+## Mobile-First Breakpoints
+
+```
+sm: 640px → md: 768px → lg: 1024px → xl: 1280px → 2xl: 1536px
+```
+
+```tsx
+<div className="w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
+  {/* Mobile: full → Tablet: half → Desktop: third → Large: quarter */}
+</div>
+```
+
+## Layout Patterns
+
+### Flexbox
+```tsx
+// Center
+<div className="flex items-center justify-center h-screen" />
+
+// Responsive direction
+<div className="flex flex-col md:flex-row gap-4" />
+```
+
+### Grid
+```tsx
+// Responsive grid
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" />
+
+// Auto-fit
+<div className="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4" />
+```
+
+## Dark Mode
+
+```tsx
+<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
+  <p className="text-gray-600 dark:text-gray-300">Adapts to theme</p>
+</div>
+```
+
+## Component Patterns
+
+### Card
+```tsx
+<div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow">
+```
+
+### Button
+```tsx
+<button className="bg-primary text-primary-foreground px-4 py-2 rounded-md font-medium hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
+```
+
+### Input
+```tsx
+<input className="w-full px-3 py-2 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-md text-gray-900 dark:text-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" />
+```
+
+## Animations
+
+```tsx
+<Loader className="h-5 w-5 animate-spin" />           // Spinner
+<div className="h-4 w-24 bg-gray-200 animate-pulse" /> // Skeleton
+```
+
+### Custom (tailwind.config.js)
+```js
+animation: {
+  'fade-in': 'fadeIn 0.3s ease-in-out',
+  'slide-up': 'slideUp 0.3s ease-out',
+},
+keyframes: {
+  fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
+  slideUp: { '0%': { transform: 'translateY(10px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } },
+}
+```
+
+## Show/Hide Responsive
+
+```tsx
+<div className="hidden lg:block">Desktop only</div>
+<div className="block lg:hidden">Mobile only</div>
+<span className="sr-only">Screen reader only</span>
+```
+
+## FORBIDDEN
+
+1. **`!important`** — fix specificity properly
+2. **Arbitrary values when utilities exist** — use the scale
+3. **Mixing raw CSS with Tailwind** — stick to utilities
+4. **Inconsistent spacing** — follow the 4px scale (p-1=4px, p-2=8px, p-4=16px)

package/stacks/nodejs/skills/typescript-strict/SKILL.md

@@ -0,0 +1,90 @@
+# TypeScript Strict — Type Safety Patterns
+
+**ALWAYS invoke when writing .ts/.tsx files.**
+
+## Required tsconfig.json
+
+```json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "exactOptionalPropertyTypes": true
+  }
+}
+```
+
+## Index Access
+
+```typescript
+// WRONG
+const port = process.env.PORT;
+
+// CORRECT — bracket notation
+const port = process.env['PORT'];
+const host = process.env['HOST'] ?? 'localhost';
+```
+
+## Null Handling
+
+```typescript
+// Optional chaining + nullish coalescing
+const avatar = user.profile?.avatar ?? '/default.png';
+
+// WRONG — || treats 0, '', false as falsy
+const count = input || 10;
+// CORRECT — ?? only null/undefined
+const count = input ?? 10;
+```
+
+## Type Guards
+
+```typescript
+function isUser(value: unknown): value is User {
+  return typeof value === 'object' && value !== null && 'id' in value && 'email' in value;
+}
+
+// Assertion function
+function assertDefined<T>(value: T | undefined | null, msg: string): asserts value is T {
+  if (value == null) throw new Error(msg);
+}
+```
+
+## Const Assertions
+
+```typescript
+// Exact types (not widened)
+const endpoints = {
+  users: '/api/users',
+  posts: '/api/posts',
+} as const;
+
+// Discriminated unions
+type Result<T> =
+  | { success: true; data: T }
+  | { success: false; error: string };
+```
+
+## Generic Patterns
+
+```typescript
+// Constrained
+function findById<T extends { id: string }>(items: T[], id: string): T | undefined {
+  return items.find(item => item.id === id);
+}
+
+// RequireFields utility
+type RequireFields<T, K extends keyof T> = T & Required<Pick<T, K>>;
+```
+
+## FORBIDDEN
+
+1. **`any`** — use `unknown` instead
+2. **Non-null assertion without certainty** — check first
+3. **Type assertion to hide errors** — fix the actual issue
+4. **`@ts-ignore`** — use `@ts-expect-error` with comment
+5. **Ignoring strict errors** — always fix properly

package/stacks/nodejs/stack.json

@@ -1,13 +1,29 @@
 {
   "id": "nodejs",
   "name": "Node.js / TypeScript",
-  "icon": "📦",
+  "icon": "\ud83d\udce6",
   "runtime": "Bun / Node.js 20+",
   "minVersion": "20.0.0",
   "packageManager": "bun|npm|pnpm",
-  "extensions": [".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs"],
-  "testExtensions": ["*.test.ts", "*.spec.ts", "*.test.tsx"],
-  "detectFiles": ["package.json", "tsconfig.json", "bun.lockb", "next.config.js"],
+  "extensions": [
+    ".ts",
+    ".tsx",
+    ".js",
+    ".jsx",
+    ".mjs",
+    ".cjs"
+  ],
+  "testExtensions": [
+    "*.test.ts",
+    "*.spec.ts",
+    "*.test.tsx"
+  ],
+  "detectFiles": [
+    "package.json",
+    "tsconfig.json",
+    "bun.lockb",
+    "next.config.js"
+  ],
   "commands": {
     "test": "bun run test",
     "lint": "bun run lint",
@@ -17,41 +33,139 @@
     "typecheck": "bun run typecheck"
   },
   "qualityGates": [
-    { "name": "TypeCheck", "command": "bun run typecheck", "required": true, "order": 1 },
-    { "name": "Lint", "command": "bun run lint", "required": true, "order": 2 },
-    { "name": "Tests", "command": "bun run test", "required": true, "order": 3 },
-    { "name": "Build", "command": "bun run build", "required": true, "order": 4 }
+    {
+      "name": "TypeCheck",
+      "command": "bun run typecheck",
+      "required": true,
+      "order": 1
+    },
+    {
+      "name": "Lint",
+      "command": "bun run lint",
+      "required": true,
+      "order": 2
+    },
+    {
+      "name": "Tests",
+      "command": "bun run test",
+      "required": true,
+      "order": 3
+    },
+    {
+      "name": "Build",
+      "command": "bun run build",
+      "required": true,
+      "order": 4
+    }
   ],
   "frameworks": [
-    { "id": "nextjs", "name": "Next.js (App Router)", "icon": "▲", "detectFiles": ["next.config.js", "next.config.ts", "next.config.mjs"] },
-    { "id": "nuxt", "name": "Nuxt", "icon": "💚", "detectFiles": ["nuxt.config.ts"] },
-    { "id": "astro", "name": "Astro", "icon": "🚀", "detectFiles": ["astro.config.mjs"] },
-    { "id": "express", "name": "Express", "icon": "⚡" },
-    { "id": "fastify", "name": "Fastify", "icon": "🏎️" },
-    { "id": "vanilla", "name": "Vanilla Node.js", "icon": "📄" }
+    {
+      "id": "nextjs",
+      "name": "Next.js (App Router)",
+      "icon": "\u25b2",
+      "detectFiles": [
+        "next.config.js",
+        "next.config.ts",
+        "next.config.mjs"
+      ]
+    },
+    {
+      "id": "nuxt",
+      "name": "Nuxt",
+      "icon": "\ud83d\udc9a",
+      "detectFiles": [
+        "nuxt.config.ts"
+      ]
+    },
+    {
+      "id": "astro",
+      "name": "Astro",
+      "icon": "\ud83d\ude80",
+      "detectFiles": [
+        "astro.config.mjs"
+      ]
+    },
+    {
+      "id": "express",
+      "name": "Express",
+      "icon": "\u26a1"
+    },
+    {
+      "id": "fastify",
+      "name": "Fastify",
+      "icon": "\ud83c\udfce\ufe0f"
+    },
+    {
+      "id": "vanilla",
+      "name": "Vanilla Node.js",
+      "icon": "\ud83d\udcc4"
+    }
   ],
   "databases": [
-    { "id": "mongodb", "name": "MongoDB", "icon": "🍃" },
-    { "id": "postgresql", "name": "PostgreSQL", "icon": "🐘" },
-    { "id": "mysql", "name": "MySQL / MariaDB", "icon": "🐬" },
-    { "id": "sqlite", "name": "SQLite (Turso / libSQL)", "icon": "📁" },
-    { "id": "redis", "name": "Redis (Upstash)", "icon": "🔴" },
-    { "id": "none", "name": "None", "icon": "❌" }
+    {
+      "id": "mongodb",
+      "name": "MongoDB",
+      "icon": "\ud83c\udf43"
+    },
+    {
+      "id": "postgresql",
+      "name": "PostgreSQL",
+      "icon": "\ud83d\udc18"
+    },
+    {
+      "id": "mysql",
+      "name": "MySQL / MariaDB",
+      "icon": "\ud83d\udc2c"
+    },
+    {
+      "id": "sqlite",
+      "name": "SQLite (Turso / libSQL)",
+      "icon": "\ud83d\udcc1"
+    },
+    {
+      "id": "redis",
+      "name": "Redis (Upstash)",
+      "icon": "\ud83d\udd34"
+    },
+    {
+      "id": "none",
+      "name": "None",
+      "icon": "\u274c"
+    }
   ],
   "frontendOptions": [
-    { "id": "react-tailwind", "name": "React 19+ / TailwindCSS 4+", "icon": "⚛️" },
-    { "id": "vue", "name": "Vue.js / Nuxt", "icon": "💚" },
-    { "id": "svelte", "name": "Svelte / SvelteKit", "icon": "🔥" },
-    { "id": "shadcn", "name": "shadcn/ui + Tailwind", "icon": "🎨" },
-    { "id": "none", "name": "API only — no frontend", "icon": "❌" }
+    {
+      "id": "react-tailwind",
+      "name": "React 19+ / TailwindCSS 4+",
+      "icon": "\u269b\ufe0f"
+    },
+    {
+      "id": "vue",
+      "name": "Vue.js / Nuxt",
+      "icon": "\ud83d\udc9a"
+    },
+    {
+      "id": "svelte",
+      "name": "Svelte / SvelteKit",
+      "icon": "\ud83d\udd25"
+    },
+    {
+      "id": "shadcn",
+      "name": "shadcn/ui + Tailwind",
+      "icon": "\ud83c\udfa8"
+    },
+    {
+      "id": "none",
+      "name": "API only \u2014 no frontend",
+      "icon": "\u274c"
+    }
   ],
   "deployTargets": [
-    { "id": "vercel", "name": "Vercel", "icon": "▲" },
-    { "id": "docker", "name": "Docker", "icon": "🐳" },
-    { "id": "vps-ssh", "name": "VPS (SSH)", "icon": "☁️" },
-    { "id": "railway", "name": "Railway", "icon": "🚂" },
-    { "id": "fly", "name": "Fly.io", "icon": "✈️" },
-    { "id": "netlify", "name": "Netlify", "icon": "🌐" }
+    {
+      "id": "github",
+      "name": "GitHub (git push)",
+      "icon": "\ud83d\udc19"
+    }
   ],
   "skills": [
     "typescript-strict",

package/stacks/php/stack.json

@@ -150,34 +150,9 @@
   ],
   "deployTargets": [
     {
-      "id": "shared-hosting",
-      "name": "Shared Hosting (FTP)",
-      "icon": "\ud83c\udf10"
-    },
-    {
-      "id": "docker",
-      "name": "Docker",
-      "icon": "\ud83d\udc33"
-    },
-    {
-      "id": "vps-ssh",
-      "name": "VPS (SSH)",
-      "icon": "\u2601\ufe0f"
-    },
-    {
-      "id": "cpanel",
-      "name": "cPanel",
-      "icon": "\ud83d\udce6"
-    },
-    {
-      "id": "forge",
-      "name": "Laravel Forge",
-      "icon": "\ud83d\udd28"
-    },
-    {
-      "id": "vapor",
-      "name": "Laravel Vapor (AWS)",
-      "icon": "\u2601\ufe0f"
+      "id": "github",
+      "name": "GitHub (git push)",
+      "icon": "\ud83d\udc19"
     }
   ],
   "skills": [