gl-life-claude-zen 1.0.2 → 1.3.0

package/dist/scripts/task-status.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-var _0x3671c6=_0x2905;(function(_0x40e8dd,_0x5d2892){var _0x51d334=_0x2905,_0x405e8b=_0x40e8dd();while(!![]){try{var _0x4e5d38=-parseInt(_0x51d334(0x110))/0x1*(parseInt(_0x51d334(0x103))/0x2)+-parseInt(_0x51d334(0xf6))/0x3+-parseInt(_0x51d334(0xff))/0x4*(-parseInt(_0x51d334(0xfc))/0x5)+parseInt(_0x51d334(0x113))/0x6*(parseInt(_0x51d334(0x108))/0x7)+-parseInt(_0x51d334(0x10d))/0x8*(-parseInt(_0x51d334(0x105))/0x9)+-parseInt(_0x51d334(0xfb))/0xa*(-parseInt(_0x51d334(0xfa))/0xb)+parseInt(_0x51d334(0x10a))/0xc*(-parseInt(_0x51d334(0xfd))/0xd);if(_0x4e5d38===_0x5d2892)break;else _0x405e8b['push'](_0x405e8b['shift']());}catch(_0x36e28b){_0x405e8b['push'](_0x405e8b['shift']());}}}(_0x1f50,0x911a6));var _0x5cd232=(function(){var _0xfd3564=_0x2905,_0x46061c={};_0x46061c[_0xfd3564(0x115)]=_0xfd3564(0x10e);var _0x5048da=_0x46061c,_0x34f2d3=!![];return function(_0xd85f58,_0x4df16c){var _0x4b725e=_0xfd3564;if(_0x5048da['tOVOD']===_0x5048da[_0x4b725e(0x115)]){var _0x2d8b39=_0x34f2d3?function(){if(_0x4df16c){var _0x39becb=_0x4df16c['apply'](_0xd85f58,arguments);return _0x4df16c=null,_0x39becb;}}:function(){};return _0x34f2d3=![],_0x2d8b39;}else{var _0x1f1c18=_0x443ddf?function(){var _0x51eb56=_0x4b725e;if(_0x559739){var _0x476bfc=_0x24df97[_0x51eb56(0x100)](_0x406a0b,arguments);return _0x58a338=null,_0x476bfc;}}:function(){};return _0x22479e=![],_0x1f1c18;}};}()),_0x29722d=_0x5cd232(this,function(){var _0x15c097=_0x2905,_0x2833b0={};_0x2833b0[_0x15c097(0x106)]='(((.+)+)+)+$';var _0x14718b=_0x2833b0;return _0x29722d['toString']()[_0x15c097(0x10b)](_0x14718b['fYeOD'])[_0x15c097(0x107)]()[_0x15c097(0xf8)](_0x29722d)['search'](_0x14718b[_0x15c097(0x106)]);});_0x29722d();function _0x1f50(){var _0x21f034=['fYeOD','toString','42700smRJRa','qXjUz','252euVDmt','search','log','1587832vlNlSu','HXCrf','.claude','5kAvrux','task-status.js','path','498LSxrrL','📊\x20Task\x20Status\x20Report\x0a','tOVOD','3020391nGlqnf','error','constructor','stdio','506iTKOnt','149710FcrwKP','4526735OiROaH','448708iqHtzS','MIxps','4fYFhTf','apply','node\x20\x22','Iayrd','147910BSgRls','uVYrI','27gMhQbH'];_0x1f50=function(){return _0x21f034;};return _0x1f50();}var o=(_0x195d4a=>typeof require<'u'?require:typeof Proxy<'u'?new Proxy(_0x195d4a,{'get':(_0x160d24,_0x270014)=>(typeof require<'u'?require:_0x160d24)[_0x270014]}):_0x195d4a)(function(_0x5b5960){var _0x12c5cf=_0x2905,_0x4f8487={'Iayrd':function(_0x18d0ab,_0x59618b){return _0x18d0ab<_0x59618b;},'uVYrI':function(_0x32cd5a,_0xb353a4){return _0x32cd5a(_0xb353a4);},'qXjUz':function(_0x21dc37,_0x30b129){return _0x21dc37+_0x30b129;},'MIxps':'Dynamic\x20require\x20of\x20\x22'};if(_0x4f8487[_0x12c5cf(0x102)](typeof require,'u'))return require[_0x12c5cf(0x100)](this,arguments);throw _0x4f8487[_0x12c5cf(0x104)](Error,_0x4f8487[_0x12c5cf(0x109)](_0x4f8487[_0x12c5cf(0x109)](_0x4f8487[_0x12c5cf(0xfe)],_0x5b5960),'\x22\x20is\x20not\x20supported'));}),{execSync:r}=o('child_process'),n=o(_0x3671c6(0x112)),a=n['join'](__dirname,'..',_0x3671c6(0x10f),'hooks',_0x3671c6(0x111));console[_0x3671c6(0x10c)](_0x3671c6(0x114));function _0x2905(_0x416074,_0xb00fc1){_0x416074=_0x416074-0xf6;var _0x43b28d=_0x1f50();var _0x29722d=_0x43b28d[_0x416074];return _0x29722d;}try{var _0x258bd9={};_0x258bd9[_0x3671c6(0xf9)]='inherit',r(_0x3671c6(0x101)+a+'\x22',_0x258bd9);}catch{console[_0x3671c6(0xf7)]('\x0a❌\x20Failed\x20to\x20get\x20task\x20status'),process['exit'](0x1);}
+var _0x3d1491=_0x3575;(function(_0x5694cf,_0x33deff){var _0x2d5289=_0x3575,_0xb6a7a8=_0x5694cf();while(!![]){try{var _0x4b1b7e=-parseInt(_0x2d5289(0x104))/0x1+-parseInt(_0x2d5289(0xf3))/0x2*(parseInt(_0x2d5289(0x10c))/0x3)+-parseInt(_0x2d5289(0x107))/0x4*(-parseInt(_0x2d5289(0xfd))/0x5)+-parseInt(_0x2d5289(0x10a))/0x6*(-parseInt(_0x2d5289(0xfa))/0x7)+-parseInt(_0x2d5289(0xf1))/0x8+parseInt(_0x2d5289(0x101))/0x9+-parseInt(_0x2d5289(0x106))/0xa;if(_0x4b1b7e===_0x33deff)break;else _0xb6a7a8['push'](_0xb6a7a8['shift']());}catch(_0x518176){_0xb6a7a8['push'](_0xb6a7a8['shift']());}}}(_0x404a,0xe4847));var _0x2a5e29=(function(){var _0x30d501=_0x3575,_0x20eb3d={};_0x20eb3d[_0x30d501(0x10b)]=function(_0x3c8745,_0x57c887){return _0x3c8745!==_0x57c887;},_0x20eb3d[_0x30d501(0x105)]='gTCie';var _0x56d046=_0x20eb3d,_0x57891f=!![];return function(_0x45ec00,_0x2e4557){var _0x38abca=_0x30d501,_0x340ddf={'Fvjkv':function(_0x5968ac,_0x5b771d){return _0x56d046['rvkZI'](_0x5968ac,_0x5b771d);},'dqofS':_0x56d046[_0x38abca(0x105)]},_0x3f5cb6=_0x57891f?function(){var _0x39b8bc=_0x38abca;if(_0x2e4557){if(_0x340ddf[_0x39b8bc(0x102)](_0x340ddf[_0x39b8bc(0xee)],'INMpb')){var _0x2d4b52=_0x2e4557['apply'](_0x45ec00,arguments);return _0x2e4557=null,_0x2d4b52;}else{if(_0x4bf3b9){var _0x4625eb=_0x5d0d70[_0x39b8bc(0xff)](_0x39827f,arguments);return _0x57fc23=null,_0x4625eb;}}}}:function(){};return _0x57891f=![],_0x3f5cb6;};}()),_0x23caf9=_0x2a5e29(this,function(){var _0x5da6d9=_0x3575,_0x171dfc={};_0x171dfc[_0x5da6d9(0xf6)]='(((.+)+)+)+$';var _0x4f061d=_0x171dfc;return _0x23caf9['toString']()[_0x5da6d9(0x10f)](_0x4f061d[_0x5da6d9(0xf6)])[_0x5da6d9(0x111)]()[_0x5da6d9(0xfb)](_0x23caf9)[_0x5da6d9(0x10f)](_0x4f061d[_0x5da6d9(0xf6)]);});_0x23caf9();function _0x3575(_0x342b98,_0x1cadb6){_0x342b98=_0x342b98-0xee;var _0x280cd6=_0x404a();var _0x23caf9=_0x280cd6[_0x342b98];return _0x23caf9;}var o=(_0x51933b=>typeof require<'u'?require:typeof Proxy<'u'?new Proxy(_0x51933b,{'get':(_0x2636cb,_0x3637cc)=>(typeof require<'u'?require:_0x2636cb)[_0x3637cc]}):_0x51933b)(function(_0xbb9880){var _0x337ac2=_0x3575,_0x5589cf={};_0x5589cf[_0x337ac2(0x109)]=function(_0x496482,_0x271109){return _0x496482<_0x271109;},_0x5589cf[_0x337ac2(0xf7)]=function(_0x5bc693,_0xd87295){return _0x5bc693+_0xd87295;},_0x5589cf['yZpSO']=_0x337ac2(0xfe),_0x5589cf[_0x337ac2(0xf8)]=_0x337ac2(0xef);var _0x2de1e5=_0x5589cf;if(_0x2de1e5['nIWya'](typeof require,'u'))return require['apply'](this,arguments);throw Error(_0x2de1e5['gEyGZ'](_0x2de1e5['yZpSO']+_0xbb9880,_0x2de1e5[_0x337ac2(0xf8)]));}),{execSync:r}=o(_0x3d1491(0x10d)),n=o(_0x3d1491(0xf9)),a=n[_0x3d1491(0x103)](__dirname,'..',_0x3d1491(0x110),_0x3d1491(0xf4),_0x3d1491(0xf5));function _0x404a(){var _0x2eb80b=['1833375ZlspJX','nKwLm','687650DkvppO','1679276kJECkn','\x0a❌\x20Failed\x20to\x20get\x20task\x20status','nIWya','5742PzGvvA','rvkZI','9TcUKcS','child_process','stdio','search','.claude','toString','node\x20\x22','dqofS','\x22\x20is\x20not\x20supported','error','2423728QjoVuH','log','273794XmDnnt','hooks','task-status.js','HRjQi','gEyGZ','tHQIu','path','9856rPnlMk','constructor','inherit','20JkylJk','Dynamic\x20require\x20of\x20\x22','apply','exit','4725648YAPuvO','Fvjkv','join'];_0x404a=function(){return _0x2eb80b;};return _0x404a();}console[_0x3d1491(0xf2)]('📊\x20Task\x20Status\x20Report\x0a');try{var _0xf6c3db={};_0xf6c3db[_0x3d1491(0x10e)]=_0x3d1491(0xfc),r(_0x3d1491(0x112)+a+'\x22',_0xf6c3db);}catch{console[_0x3d1491(0xf0)](_0x3d1491(0x108)),process[_0x3d1491(0x100)](0x1);}

package/lib/init.js

@@ -54,12 +54,20 @@ export async function initializeProject(projectName, targetDir, options = {}) {
   writeFileSync(join(targetDir, 'README.md'), readme);
 
   // Copy .gitignore
-  console.log('  └─ .gitignore');
+  console.log('  ├─ .gitignore');
   cpSync(
     join(templatesDir, '.gitignore'),
     join(targetDir, '.gitignore')
   );
 
+  // Copy test-site template
+  console.log('  └─ test-site/');
+  cpSync(
+    join(templatesDir, 'test-site'),
+    join(targetDir, 'test-site'),
+    { recursive: true }
+  );
+
   console.log('✅ Framework structure created');
   console.log('✅ Templates copied');
   console.log('✅ Configuration files generated');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gl-life-claude-zen",
-  "version": "1.0.2",
+  "version": "1.3.0",
   "description": "NPM package for initializing projects with Claude Code enforcement framework",
   "main": "dist/index.js",
   "bin": {
@@ -10,6 +10,8 @@
   "scripts": {
     "build": "node esbuild.config.js",
     "test": "node test/bundle-protection.test.js && node test/integration.test.js",
+    "test:e2e": "node test/e2e-verification.test.js",
+    "test:site": "node test/verify-test-site.js",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -35,7 +37,9 @@
     "node": ">=18.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.57.0",
     "esbuild": "^0.20.0",
-    "javascript-obfuscator": "^5.1.0"
+    "javascript-obfuscator": "^5.1.0",
+    "playwright": "^1.57.0"
   }
 }

package/templates/.claude/CLAUDE.md

@@ -105,6 +105,202 @@ When modifying UI components (.tsx, .jsx, .vue, .svelte):
 - Test MUST validate state changes if component has state
 - E2E tests REQUIRED for multi-component user flows
 
+## Integration Test Website (Hard Enforced)
+
+UI components MUST be integrated into a test website for stakeholder validation before production deployment.
+
+### Purpose
+Integration test websites allow stakeholders to:
+- Preview UI components in realistic scenarios
+- Interact with components using actual data
+- Validate behavior and design before production
+- Test responsiveness across devices
+- Approve UX flows and visual design
+
+### Requirements
+When modifying UI components (.tsx, .jsx, .vue, .svelte):
+1. **Test site directory MUST exist** at `./test-site/` (or configured path)
+2. **Test site MUST have package.json** with dev script
+3. **Component SHOULD be imported** in test site for validation
+4. Test site should run locally with hot reload
+
+### Workflow
+
+#### 1. Initial Setup (One-Time)
+```bash
+# Test site is included in project template
+cd test-site
+npm install
+```
+
+#### 2. Add Components to Test Site
+Edit `test-site/src/App.jsx` to import and render your component:
+
+```jsx
+// Import your component
+import { Button } from '../Agent/src/components/Button'
+
+function App() {
+  return (
+    <section className="demo-section">
+      <h2>Button Component</h2>
+      <p>Validation: Click handlers, variants, disabled state</p>
+      <Button onClick={() => alert('Clicked!')} variant="primary">
+        Primary Button
+      </Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button disabled>Disabled</Button>
+    </section>
+  )
+}
+```
+
+#### 3. Run Test Site Locally
+```bash
+cd test-site
+npm run dev
+```
+
+Opens at http://localhost:3000 with hot reload.
+
+#### 4. Share with Stakeholders
+
+**Option A: Deploy to GitHub Pages**
+```bash
+cd test-site
+npm run deploy
+```
+
+Share URL: `https://username.github.io/repo-name/`
+
+**Option B: Local Network**
+Run `npm run dev` and share your local IP:
+```
+http://192.168.1.XXX:3000
+```
+
+**Option C: Tunneling (ngrok)**
+```bash
+npx ngrok http 3000
+```
+
+Share the generated public URL.
+
+#### 5. Collect Feedback
+- Schedule live demo sessions
+- Record video walkthroughs
+- Use GitHub Issues for feedback
+- Create approval checklists
+
+### Best Practices
+
+**Use Realistic Data**
+```jsx
+// Good: Realistic data stakeholders recognize
+<UserCard name="John Smith" email="john@company.com" role="Manager" />
+
+// Bad: Placeholder text
+<UserCard name="Test User" email="test@test.com" role="User" />
+```
+
+**Show Multiple States**
+```jsx
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button disabled>Disabled</Button>
+<Button loading>Loading...</Button>
+```
+
+**Test Edge Cases**
+```jsx
+<UserName name="Really Long Name That Might Wrap To Multiple Lines" />
+<UserName name="" /> {/* Empty state */}
+<ErrorMessage>Network connection lost. Please try again.</ErrorMessage>
+```
+
+**Group by Feature**
+```jsx
+<section className="checkout-flow">
+  <h2>Checkout Flow</h2>
+  <p>Validation: Cart → Shipping → Payment → Confirmation</p>
+  <ShoppingCart />
+  <ShippingForm />
+  <PaymentForm />
+</section>
+```
+
+**Add Annotations**
+```jsx
+<div className="demo-section">
+  <h2>Login Form</h2>
+  <p><strong>Validation Points:</strong></p>
+  <ul>
+    <li>Email validation works correctly</li>
+    <li>Password toggle shows/hides password</li>
+    <li>Error messages display properly</li>
+    <li>Submit button disables during API call</li>
+  </ul>
+  <LoginForm />
+</div>
+```
+
+### Configuration
+
+Test site requirement can be disabled in `.claude/settings.json`:
+```json
+{
+  "testing": {
+    "ui": {
+      "requireIntegrationSite": false
+    }
+  }
+}
+```
+
+Or configure custom directory:
+```json
+{
+  "testing": {
+    "ui": {
+      "integrationSiteDir": "demo-site"
+    }
+  }
+}
+```
+
+### Troubleshooting
+
+**Components Not Found**
+- Check import path relative to `test-site/src/`
+- Verify components are exported properly
+- Ensure file extensions match (.jsx, .tsx)
+
+**Styles Not Working**
+- Import component CSS alongside components
+- Configure Tailwind/styled-components if used
+- Check CSS module naming conventions
+
+**Hot Reload Issues**
+- Save files to trigger reload
+- Check terminal for build errors
+- Restart dev server: `Ctrl+C` then `npm run dev`
+
+**Deployment Fails**
+- Ensure GitHub Pages enabled in repo settings
+- Check `gh-pages` branch exists
+- Verify base path in `vite.config.js`
+
+### Framework Support
+
+**React (Default)**
+Template uses Vite + React with hot reload.
+
+**Vue**
+See `test-site/README.md` for Vue migration guide.
+
+**Svelte**
+See `test-site/README.md` for Svelte migration guide.
+
 ## Database Migration Requirements (Hard Enforced)
 Database changes MUST follow migration workflow:
 - WRITE migration files in `./Agent/migrations/` or `./Agent/prisma/migrations/`

package/templates/.claude/settings.json

@@ -74,6 +74,26 @@
     "CLAUDE_CODE_MAX_OUTPUT_TOKENS": "8192",
     "DISABLE_NON_ESSENTIAL_MODEL_CALLS": "1"
   },
+  "testing": {
+    "ui": {
+      "strictMode": true,
+      "requireTestFile": true,
+      "requireImport": true,
+      "requireRender": true,
+      "requireProps": true,
+      "requireEventTests": true,
+      "requireApiMocking": true,
+      "requireStateTests": true,
+      "requireFormTests": true,
+      "requireConditionalTests": true,
+      "requireIntegrationSite": true,
+      "integrationSiteDir": "test-site",
+      "conditionalThreshold": 3,
+      "requireVisualCheck": true,
+      "requireContract": false,
+      "comment": "⚠️  ALL UI testing requirements are HARD REQUIREMENTS (cannot be disabled). Commits will be blocked if any requirement is violated."
+    }
+  },
   "hooks": {
     "SessionStart": [
       {
@@ -113,6 +133,22 @@
             "type": "command",
             "command": "node node_modules/.gl-life-claude/hooks/auto-format.js"
           },
+          {
+            "type": "command",
+            "command": "node node_modules/.gl-life-claude/hooks/validate-ui-syntax.js"
+          },
+          {
+            "type": "command",
+            "command": "node node_modules/.gl-life-claude/hooks/validate-ui-runtime.js"
+          },
+          {
+            "type": "command",
+            "command": "node node_modules/.gl-life-claude/hooks/validate-ui-visual.js"
+          },
+          {
+            "type": "command",
+            "command": "node node_modules/.gl-life-claude/hooks/validate-component-contract.js"
+          },
           {
             "type": "command",
             "command": "node node_modules/.gl-life-claude/hooks/validate-test-quality.js"
@@ -121,6 +157,10 @@
             "type": "command",
             "command": "node node_modules/.gl-life-claude/hooks/validate-ui-integration.js"
           },
+          {
+            "type": "command",
+            "command": "node node_modules/.gl-life-claude/hooks/validate-integration-site.js"
+          },
           {
             "type": "command",
             "command": "node node_modules/.gl-life-claude/hooks/validate-database-changes.js"

package/templates/test-site/README.md

@@ -0,0 +1,271 @@
+# Integration Test Website
+
+A lightweight, hot-reloading test site for stakeholder validation of UI components before production deployment.
+
+## Purpose
+
+This test site allows stakeholders to:
+- Preview UI components in isolation
+- Interact with components using realistic data
+- Validate behavior before production deployment
+- Test responsiveness across devices
+- Approve visual design and UX flows
+
+## Quick Start
+
+### 1. Install Dependencies
+
+```bash
+cd test-site
+npm install
+```
+
+### 2. Run Development Server
+
+```bash
+npm run dev
+```
+
+The server will automatically allocate a port (default: 3000-3009 range) and display the URL.
+
+**Port Management Features:**
+- **Fixed Port Allocation**: Uses port 3000 by default, with automatic fallback to 3001-3009 if occupied
+- **Auto-Cleanup**: Automatically kills stale processes on the assigned port before starting
+- **Port Reuse**: Consistently uses the same port for a stable development experience
+- **Conflict Resolution**: Automatically finds an available port if the preferred port is in use
+
+Open the displayed URL (typically [http://localhost:3000](http://localhost:3000)) to view the test site.
+
+### 3. Add Your Components
+
+Edit `src/App.jsx` to import and render your components:
+
+```jsx
+// Import your component
+import { Button } from '../Agent/src/components/Button'
+
+function App() {
+  return (
+    <div className="demo-section">
+      <h2>Button Component Demo</h2>
+      <Button onClick={() => alert('Clicked!')}>
+        Click Me
+      </Button>
+    </div>
+  )
+}
+```
+
+## Available Scripts
+
+### `npm run dev`
+Starts the development server with:
+- **Port management**: Auto-allocates port from 3000-3009 range
+- **Hot reload**: Instant updates when you save files
+- **Auto-cleanup**: Kills stale processes before starting
+- **Graceful shutdown**: Releases port on Ctrl+C
+
+### `npm run dev:simple`
+Starts Vite server without port management (uses default Vite behavior).
+
+### `npm run build`
+Builds the site for production to the `dist/` folder.
+
+### `npm run preview`
+Preview the production build locally before deploying.
+
+### `npm run deploy`
+Builds and deploys the site to GitHub Pages.
+
+## Deployment to GitHub Pages
+
+### First-time Setup
+
+1. Create a GitHub repository for your project (if not already done)
+2. Enable GitHub Pages in repository settings:
+   - Go to Settings → Pages
+   - Source: Deploy from a branch
+   - Branch: Select `gh-pages` branch
+   - Click Save
+
+### Deploy Updates
+
+```bash
+npm run deploy
+```
+
+This will build the site and push it to the `gh-pages` branch automatically.
+
+Your test site will be available at:
+```
+https://<your-username>.github.io/<repo-name>/
+```
+
+## Sharing with Stakeholders
+
+### Option 1: GitHub Pages (Recommended)
+Deploy to GitHub Pages and share the URL. Updates are instant when you run `npm run deploy`.
+
+### Option 2: Local Network
+Run `npm run dev` and share your local IP address (find with `ipconfig` on Windows or `ifconfig` on Mac/Linux):
+```
+http://192.168.1.XXX:3000
+```
+
+### Option 3: Tunneling Service
+Use a service like ngrok to create a public URL for your local server:
+```bash
+npx ngrok http 3000
+```
+
+## Framework Support
+
+### React (Default)
+The template uses Vite + React with hot reload. No additional setup needed.
+
+### Vue
+To use Vue instead of React:
+
+1. Replace dependencies in `package.json`:
+```json
+{
+  "dependencies": {
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.5.0",
+    "vite": "^5.0.8"
+  }
+}
+```
+
+2. Update `vite.config.js`:
+```js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  // ...rest of config
+})
+```
+
+3. Rename `src/main.jsx` → `src/main.js` and update content:
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+
+createApp(App).mount('#app')
+```
+
+### Svelte
+To use Svelte:
+
+1. Replace dependencies in `package.json`:
+```json
+{
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "svelte": "^4.2.8",
+    "vite": "^5.0.8"
+  }
+}
+```
+
+2. Update `vite.config.js`:
+```js
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+export default defineConfig({
+  plugins: [svelte()],
+  // ...rest of config
+})
+```
+
+3. Rename files to `.svelte` and update imports.
+
+## Best Practices
+
+### 1. Use Realistic Data
+Don't use placeholder text. Use realistic data that stakeholders will recognize:
+```jsx
+<UserCard
+  name="John Smith"
+  email="john.smith@company.com"
+  role="Product Manager"
+/>
+```
+
+### 2. Show Multiple States
+Demonstrate different component states:
+```jsx
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button disabled>Disabled</Button>
+```
+
+### 3. Test Edge Cases
+Show how components handle edge cases:
+```jsx
+<UserName name="Really Long Name That Might Wrap" />
+<UserName name="" /> {/* Empty state */}
+<ErrorMessage>Something went wrong!</ErrorMessage>
+```
+
+### 4. Group by Feature
+Organize components by feature or user flow:
+```jsx
+<section className="login-flow">
+  <h2>Login Flow</h2>
+  <LoginForm />
+  <ForgotPassword />
+  <SignUpLink />
+</section>
+```
+
+### 5. Add Annotations
+Explain what stakeholders should validate:
+```jsx
+<div className="demo-section">
+  <h2>Shopping Cart</h2>
+  <p><strong>Validation Points:</strong></p>
+  <ul>
+    <li>Items can be added/removed</li>
+    <li>Quantity updates recalculate total</li>
+    <li>Discount codes apply correctly</li>
+  </ul>
+  <ShoppingCart items={mockCartItems} />
+</div>
+```
+
+## Troubleshooting
+
+### Components Not Found
+If your components can't be imported:
+- Check the import path is correct relative to `test-site/src/`
+- Ensure components are exported properly
+- Verify file extensions match (.jsx, .tsx, etc.)
+
+### Styles Not Working
+- Import component CSS files alongside components
+- Check that Tailwind/styled-components are configured if used
+- Verify CSS module naming conventions
+
+### Hot Reload Issues
+- Save files to trigger reload
+- Check terminal for build errors
+- Restart dev server: `Ctrl+C` then `npm run dev`
+
+## Tips for Stakeholder Review
+
+1. **Schedule a live demo session** - Walk through components together
+2. **Record a video** - Show interactions and flows
+3. **Create a checklist** - What needs approval on each component
+4. **Collect feedback** - Add a feedback form or use GitHub Issues
+5. **Version deployments** - Use git tags to track approved versions
+
+## License
+
+This template is part of the gl-life-claude-zen package and follows the same license as the parent project.

package/templates/test-site/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Integration Test Site - Component Preview</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/test-site/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "integration-test-site",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Integration test website for stakeholder validation of UI components",
+  "scripts": {
+    "dev": "node server.js",
+    "dev:simple": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "deploy": "npm run build && npx gh-pages -d dist"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "gh-pages": "^6.1.1",
+    "vite": "^5.0.8"
+  }
+}