@kennethsolomon/shipkit 3.2.0 → 3.3.0

package/skills/sk:mvp/references/stacks/react-vite.md

@@ -0,0 +1,287 @@
+# React + Vite + Tailwind — Stack Reference
+
+## Scaffold
+
+```bash
+npm create vite@latest {project-name} -- --template react-ts
+cd {project-name}
+npm install
+npm install -D tailwindcss @tailwindcss/vite
+npm install react-router-dom
+```
+
+## Directory Structure
+
+```
+{project-name}/
+├── src/
+│   ├── main.tsx                ← entry point (router setup)
+│   ├── App.tsx                 ← route definitions
+│   ├── index.css               ← Tailwind directives + custom CSS
+│   ├── pages/
+│   │   ├── Landing.tsx         ← landing page
+│   │   ├── Dashboard.tsx       ← dashboard
+│   │   ├── {Feature1}.tsx
+│   │   ├── {Feature2}.tsx
+│   │   └── Settings.tsx
+│   ├── components/
+│   │   ├── landing/
+│   │   │   ├── Navbar.tsx
+│   │   │   ├── Hero.tsx
+│   │   │   ├── Features.tsx
+│   │   │   ├── HowItWorks.tsx
+│   │   │   ├── Pricing.tsx
+│   │   │   ├── Testimonials.tsx
+│   │   │   ├── WaitlistForm.tsx
+│   │   │   └── Footer.tsx
+│   │   ├── app/
+│   │   │   ├── Sidebar.tsx
+│   │   │   ├── AppLayout.tsx
+│   │   │   ├── DashboardCards.tsx
+│   │   │   └── {feature components}
+│   │   └── ui/
+│   │       ├── Button.tsx
+│   │       ├── Input.tsx
+│   │       ├── Card.tsx
+│   │       ├── Modal.tsx
+│   │       └── Toast.tsx
+│   ├── data/
+│   │   └── mock.ts             ← all fake data centralized
+│   └── lib/
+│       └── utils.ts            ← shared helpers (cn, etc.)
+├── public/
+│   └── {static assets}
+├── index.html
+├── vite.config.ts
+├── tailwind.config.ts
+└── package.json
+```
+
+## Vite Config
+
+`vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
+```
+
+## Tailwind Config
+
+`tailwind.config.ts`:
+
+```ts
+export default {
+  content: ['./index.html', './src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        bg: 'var(--color-bg)',
+        fg: 'var(--color-fg)',
+        accent: 'var(--color-accent)',
+        muted: 'var(--color-muted)',
+      },
+      fontFamily: {
+        display: ['var(--font-display)', 'serif'],
+        body: ['var(--font-body)', 'sans-serif'],
+      },
+    },
+  },
+}
+```
+
+CSS variables and font imports in `src/index.css`:
+
+```css
+@import url('https://fonts.googleapis.com/css2?family={DisplayFont}:wght@400;600;700;800&family={BodyFont}:wght@400;500;600&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-bg: #xxxxxx;
+  --color-fg: #xxxxxx;
+  --color-accent: #xxxxxx;
+  --color-muted: #xxxxxx;
+  --font-display: '{DisplayFont}', serif;
+  --font-body: '{BodyFont}', sans-serif;
+}
+
+body {
+  font-family: var(--font-body);
+}
+```
+
+## Router Setup
+
+`src/App.tsx`:
+
+```tsx
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import Landing from './pages/Landing'
+import AppLayout from './components/app/AppLayout'
+import Dashboard from './pages/Dashboard'
+import Feature1 from './pages/{Feature1}'
+import Feature2 from './pages/{Feature2}'
+import Settings from './pages/Settings'
+
+const router = createBrowserRouter([
+  { path: '/', element: <Landing /> },
+  {
+    element: <AppLayout />,
+    children: [
+      { path: '/dashboard', element: <Dashboard /> },
+      { path: '/{feature-1}', element: <Feature1 /> },
+      { path: '/{feature-2}', element: <Feature2 /> },
+      { path: '/settings', element: <Settings /> },
+    ],
+  },
+])
+
+export default function App() {
+  return <RouterProvider router={router} />
+}
+```
+
+## App Layout
+
+`src/components/app/AppLayout.tsx`:
+
+```tsx
+import { Outlet } from 'react-router-dom'
+import Sidebar from './Sidebar'
+
+export default function AppLayout() {
+  return (
+    <div className="flex min-h-screen bg-bg text-fg">
+      <Sidebar />
+      <main className="flex-1 p-6 lg:p-8">
+        <Outlet />
+      </main>
+    </div>
+  )
+}
+```
+
+## Waitlist — Formspree Integration
+
+Since React + Vite has no backend, use Formspree for email collection.
+
+`src/components/landing/WaitlistForm.tsx`:
+
+```tsx
+import { useState, FormEvent } from 'react'
+
+// Replace YOUR_FORM_ID with your Formspree form ID
+// Create one free at https://formspree.io
+const FORMSPREE_URL = 'https://formspree.io/f/YOUR_FORM_ID'
+
+export default function WaitlistForm() {
+  const [email, setEmail] = useState('')
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
+  const [message, setMessage] = useState('')
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    setStatus('loading')
+
+    try {
+      const res = await fetch(FORMSPREE_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+        body: JSON.stringify({ email }),
+      })
+
+      if (res.ok) {
+        setStatus('success')
+        setMessage("You're on the list! We'll notify you when we launch.")
+      } else {
+        throw new Error()
+      }
+    } catch {
+      setStatus('error')
+      setMessage('Something went wrong. Please try again.')
+    }
+  }
+
+  if (status === 'success') {
+    return <p className="text-green-600 font-medium text-lg">{message}</p>
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3 max-w-md">
+      <input
+        type="email"
+        value={email}
+        onChange={e => setEmail(e.target.value)}
+        placeholder="you@example.com"
+        required
+        className="flex-1 px-4 py-3 rounded-lg border border-muted/30 bg-bg focus:ring-2 focus:ring-accent focus:outline-none"
+      />
+      <button
+        type="submit"
+        disabled={status === 'loading'}
+        className="px-6 py-3 bg-accent text-white rounded-xl font-medium hover:opacity-90 transition-all disabled:opacity-50"
+      >
+        {status === 'loading' ? 'Joining...' : 'Join Waitlist'}
+      </button>
+      {status === 'error' && <p className="text-red-500 text-sm">{message}</p>}
+    </form>
+  )
+}
+```
+
+## Mock Data
+
+Centralize all fake data in `src/data/mock.ts`:
+
+```ts
+export const features = [
+  { icon: '🎯', title: 'Feature One', description: 'Short benefit-driven description.' },
+  { icon: '⚡', title: 'Feature Two', description: 'Short benefit-driven description.' },
+  { icon: '🔒', title: 'Feature Three', description: 'Short benefit-driven description.' },
+]
+
+export const testimonials = [
+  { quote: 'Realistic testimonial here.', name: 'Jane Smith', role: 'CTO, TechCo' },
+  // ...
+]
+
+export const pricingPlans = [
+  { name: 'Free', price: '$0', features: ['Feature A', 'Feature B'], cta: 'Get Started' },
+  { name: 'Pro', price: '$29/mo', features: ['Everything in Free', 'Feature C'], cta: 'Get Pro', popular: true },
+  { name: 'Enterprise', price: 'Custom', features: ['Everything in Pro', 'Priority support'], cta: 'Contact Us' },
+]
+
+// Dashboard mock data
+export const dashboardStats = [
+  { label: 'Total Users', value: '2,847', change: '+12%' },
+  // ...
+]
+
+export const recentActivity = [
+  { user: 'Jane Smith', action: 'created a new project', time: '2 hours ago' },
+  // ...
+]
+```
+
+## Component Patterns
+
+- Use functional components with TypeScript.
+- Use `useState` for local state, no state management library needed.
+- Navigation: `<Link to="/dashboard">` from react-router-dom.
+- Keep components focused — one file per component.
+- Props typed with interfaces or inline.
+
+## Dev Server
+
+```bash
+npm run dev
+# Runs on http://localhost:5173
+```

package/skills/sk:write-tests/SKILL.md

@@ -145,16 +145,54 @@ If a frontend stack was detected, generate FE test files:
 
 Skip this step if no FE stack was detected.
 
-### 8b. Playwright-Specific (conditional)
+### 8b. Write E2E Spec Files (conditional)
+
+**Only if `playwright.config.ts` or `playwright.config.js` is detected in the project root:**
+
+Write `e2e/<feature>.spec.ts` files covering the acceptance criteria from `tasks/todo.md`. Follow these rules:
+
+- Use `test.describe` / `test` blocks — not `describe`/`it`
+- Use role-based locators: `getByRole`, `getByLabel`, `getByText`, `getByPlaceholder` — never CSS selectors
+- Use `test.beforeEach` for shared setup (auth, navigation)
+- Use `test.skip(!email, 'ENV_VAR not set — skipping')` guards for credential-dependent tests
+- Auth credentials from env vars via `e2e/helpers/auth.ts` — never hardcode credentials
+- Soft assertions (`expect.soft`) for non-critical checks; hard `expect` for gate conditions
+
+E2E spec example structure:
+```ts
+import { test, expect } from '@playwright/test'
+import { signIn, TEST_USERS } from './helpers/auth'
+
+test.describe('[Feature] — [scenario]', () => {
+  test.beforeEach(async ({ page }) => {
+    const { email, password } = TEST_USERS.regular
+    test.skip(!email, 'E2E_USER_EMAIL not set — skipping')
+    await signIn(page, email, password)
+  })
+
+  test('[behavior description]', async ({ page }) => {
+    await page.goto('/dashboard/feature')
+    await expect(page.getByRole('heading', { name: /title/i })).toBeVisible()
+  })
+})
+```
+
+Create `e2e/helpers/auth.ts` if it doesn't exist (see `/sk:e2e` Playwright Setup Reference).
+
+**Run the E2E spec to confirm tests fail or skip** (they should fail until implementation, or skip if env vars aren't set — both are acceptable for the RED phase):
+```bash
+npx playwright test e2e/<feature>.spec.ts --reporter=list
+```
+
+### 8c. Playwright MCP Inspection (optional)
 
-**Only if `@playwright/sk:test` is detected:**
+**Only if the Playwright MCP plugin is active in the session AND live selectors are needed:**
 
 Use the Playwright MCP plugin to inspect live page state for more accurate selectors:
 
 1. Navigate to target URL
 2. Capture accessibility snapshot for role-based selectors
 3. Screenshot for visual reference
-4. Optionally run inline assertions for complex interactions
 
 ### 9. Verify Tests Fail (Red Phase)
 
@@ -170,6 +208,7 @@ Output:
 ```
 BE tests written: X tests in Y files ([framework])
 FE tests written: X tests in Y files ([framework])  ← omit if no FE stack
+E2E specs written: X tests in Y files (Playwright)  ← omit if no playwright.config.ts
 Existing tests updated: X files
 Status: RED (tests fail as expected — ready for implementation)
 ```