@ngxtm/devkit 3.6.1 → 3.8.0

package/cli/update.js

@@ -13,7 +13,7 @@ const { execSync } = require('child_process');
 
 const { detectProjectType, getRulesForTypes } = require('./detect');
 const { initProject } = require('./init');
-const { copyDir, getDirSize, parseJsonFile } = require('./utils');
+const { copyDir, getDirSize, parseJsonFile, TOOLS } = require('./utils');
 
 const VERSION = require('../package.json').version;
 const PACKAGE_ROOT = path.join(__dirname, '..');
@@ -34,33 +34,134 @@ function checkForUpdates() {
 }
 
 /**
- * Update devkit installation
+ * Update a single tool installation
+ * @param {string} toolId - Tool identifier
+ * @param {Object} tool - Tool configuration
+ * @param {string} projectDir - Project directory
+ * @param {Object} options - Update options
+ * @returns {Object} - Update result
+ */
+function updateToolInstallation(toolId, tool, projectDir, options = {}) {
+  const targetDir = path.join(projectDir, tool.projectPath);
+  const configPath = path.join(targetDir, 'devkit.json');
+
+  if (!fs.existsSync(configPath)) {
+    return { success: false, reason: 'not_installed' };
+  }
+
+  const config = parseJsonFile(configPath);
+  if (!config) {
+    return { success: false, reason: 'corrupted_config' };
+  }
+
+  let updatedCount = 0;
+
+  // 1. Update commands (if tool supports it)
+  if (tool.commandsPath) {
+    const mergedCommandsDir = path.join(PACKAGE_ROOT, 'merged-commands');
+    const commandsDir = path.join(targetDir, tool.commandsPath);
+    if (fs.existsSync(mergedCommandsDir)) {
+      updatedCount += copyDir(mergedCommandsDir, commandsDir);
+    }
+  }
+
+  // 2. Update rules
+  if (tool.rulesPath && options.rules && options.rules.length > 0) {
+    const rulesDir = path.join(targetDir, tool.rulesPath);
+    for (const ruleType of options.rules) {
+      const srcRulesDir = path.join(PACKAGE_ROOT, 'templates', ruleType, 'rules');
+      if (fs.existsSync(srcRulesDir)) {
+        const destRulesDir = path.join(rulesDir, ruleType);
+        updatedCount += copyDir(srcRulesDir, destRulesDir);
+      }
+    }
+  }
+
+  // 3. Remove old rules (if clean enabled)
+  if (tool.rulesPath && options.removedRules && options.removedRules.length > 0 && options.clean !== false) {
+    const rulesDir = path.join(targetDir, tool.rulesPath);
+    for (const ruleType of options.removedRules) {
+      const ruleDir = path.join(rulesDir, ruleType);
+      if (fs.existsSync(ruleDir)) {
+        fs.rmSync(ruleDir, { recursive: true, force: true });
+      }
+    }
+  }
+
+  // 4. Update hooks (if tool supports it)
+  if (tool.supportsHooks && tool.hooksPath) {
+    const srcHooksDir = path.join(PACKAGE_ROOT, 'hooks');
+    const hooksDir = path.join(targetDir, tool.hooksPath);
+    if (fs.existsSync(srcHooksDir)) {
+      updatedCount += copyDir(srcHooksDir, hooksDir);
+    }
+  }
+
+  // 5. Update skills index
+  const skillsIndexSrc = path.join(PACKAGE_ROOT, 'skills-index.json');
+  if (fs.existsSync(skillsIndexSrc)) {
+    fs.copyFileSync(skillsIndexSrc, path.join(targetDir, 'skills-index.json'));
+    updatedCount++;
+  }
+
+  // 6. Update devkit.json
+  const newConfig = {
+    ...config,
+    version: VERSION,
+    detectedTypes: options.detectedTypes || config.detectedTypes,
+    installedRules: options.allRules || config.installedRules,
+    updatedAt: new Date().toISOString(),
+    stats: {
+      totalFiles: config.stats?.totalFiles || 0,
+      sizeKB: Math.round(getDirSize(targetDir) / 1024)
+    }
+  };
+  fs.writeFileSync(configPath, JSON.stringify(newConfig, null, 2));
+
+  return {
+    success: true,
+    tool: toolId,
+    toolName: tool.name,
+    path: targetDir,
+    updatedFiles: updatedCount,
+    sizeKB: newConfig.stats.sizeKB
+  };
+}
+
+/**
+ * Update devkit installation for all installed tools
  */
 function updateProject(options = {}) {
   const projectDir = options.path || process.cwd();
-  const claudeDir = path.join(projectDir, '.claude');
-  const configPath = path.join(claudeDir, 'devkit.json');
 
   console.log('\n' + '='.repeat(60));
   console.log('  DEVKIT - UPDATE');
   console.log('='.repeat(60));
 
-  // Check if devkit is installed
-  if (!fs.existsSync(configPath)) {
+  // Find all installed tools
+  const installedTools = [];
+  let primaryConfig = null;
+
+  for (const [toolId, tool] of Object.entries(TOOLS)) {
+    const targetDir = path.join(projectDir, tool.projectPath);
+    const configPath = path.join(targetDir, 'devkit.json');
+    if (fs.existsSync(configPath)) {
+      const config = parseJsonFile(configPath);
+      if (config) {
+        installedTools.push({ toolId, tool, config });
+        if (!primaryConfig) primaryConfig = config;
+      }
+    }
+  }
+
+  if (installedTools.length === 0) {
     console.log('\n  No devkit installation found.');
     console.log('  Run: devkit init\n');
     return { success: false, reason: 'not_installed' };
   }
 
-  // Read current config with error handling
-  const config = parseJsonFile(configPath);
-  if (!config) {
-    console.log('\n  Error: devkit.json is corrupted.');
-    console.log('  Try reinitializing with: devkit init --force\n');
-    return { success: false, reason: 'corrupted_config' };
-  }
-  console.log(`\n  Current version: ${config.version}`);
-  console.log(`  Installed: ${new Date(config.installedAt).toLocaleDateString()}`);
+  console.log(`\n  Found ${installedTools.length} tool(s): ${installedTools.map(t => t.tool.name).join(', ')}`);
+  console.log(`  Current version: ${primaryConfig.version}`);
 
   // Check for package updates
   console.log('\n  Checking for updates...');
@@ -79,12 +180,11 @@ function updateProject(options = {}) {
   // Re-detect project type
   console.log('\n  Re-detecting project type...');
   const newDetected = detectProjectType(projectDir);
-  const oldDetected = config.detectedTypes || [];
+  const oldDetected = primaryConfig.detectedTypes || [];
 
   // Find differences
   const added = newDetected.filter(t => !oldDetected.includes(t));
   const removed = oldDetected.filter(t => !newDetected.includes(t));
-  const unchanged = newDetected.filter(t => oldDetected.includes(t));
 
   if (added.length > 0) {
     console.log(`  New tech detected: ${added.join(', ')}`);
@@ -92,82 +192,50 @@ function updateProject(options = {}) {
   if (removed.length > 0) {
     console.log(`  Removed: ${removed.join(', ')}`);
   }
-  if (unchanged.length > 0) {
-    console.log(`  Unchanged: ${unchanged.join(', ')}`);
-  }
   if (added.length === 0 && removed.length === 0) {
     console.log('  No changes in detected technologies.');
   }
 
-  // Update rules if needed (always update by default)
-  if (added.length > 0 || options.force !== false) {
-    const newRules = getRulesForTypes(added);
-    const rulesDir = path.join(claudeDir, 'rules');
-
-    console.log('\n  Installing new rules...');
-
-    for (const ruleType of newRules) {
-      const srcRulesDir = path.join(PACKAGE_ROOT, 'templates', ruleType, 'rules');
-      if (fs.existsSync(srcRulesDir)) {
-        const destRulesDir = path.join(rulesDir, ruleType);
-        const count = copyDir(srcRulesDir, destRulesDir);
-        console.log(`    ${ruleType}: ${count} files`);
-      }
-    }
-  }
-
-  // Remove old rules (enabled by default, use --no-clean to skip)
-  if (removed.length > 0 && options.clean !== false) {
-    const rulesDir = path.join(claudeDir, 'rules');
-
-    console.log('\n  Removing old rules...');
+  // Get all rules to install
+  const allRules = getRulesForTypes(newDetected);
+  const newRules = getRulesForTypes(added);
+
+  // Update each tool
+  console.log('\n  Updating installations...');
+  const results = [];
+
+  for (const { toolId, tool } of installedTools) {
+    const result = updateToolInstallation(toolId, tool, projectDir, {
+      ...options,
+      rules: newRules,
+      removedRules: removed,
+      allRules,
+      detectedTypes: newDetected
+    });
 
-    for (const ruleType of removed) {
-      const ruleDir = path.join(rulesDir, ruleType);
-      if (fs.existsSync(ruleDir)) {
-        fs.rmSync(ruleDir, { recursive: true, force: true });
-        console.log(`    Removed: ${ruleType}`);
-      }
+    if (result.success) {
+      console.log(`    [+] ${tool.name}: ${result.updatedFiles} files (${result.sizeKB} KB)`);
+    } else {
+      console.log(`    [-] ${tool.name}: ${result.reason}`);
     }
-  }
 
-  // Update commands (enabled by default)
-  if (options.force !== false) {
-    console.log('\n  Updating commands...');
-    const mergedCommandsDir = path.join(PACKAGE_ROOT, 'merged-commands');
-    const commandsDir = path.join(claudeDir, 'commands');
-
-    if (fs.existsSync(mergedCommandsDir)) {
-      // Copy directly - copyDir will overwrite existing files
-      // No need for backup/rename which fails on Windows when files are open
-      const count = copyDir(mergedCommandsDir, commandsDir);
-      console.log(`    Commands: ${count} files`);
-    }
+    results.push(result);
   }
 
-  // Update config
-  const newConfig = {
-    ...config,
-    version: VERSION,
-    detectedTypes: newDetected,
-    installedRules: getRulesForTypes(newDetected),
-    updatedAt: new Date().toISOString(),
-    stats: {
-      totalFiles: config.stats?.totalFiles || 0,
-      sizeKB: Math.round(getDirSize(claudeDir) / 1024)
-    }
-  };
-
-  fs.writeFileSync(configPath, JSON.stringify(newConfig, null, 2));
+  // Summary
+  const successCount = results.filter(r => r.success).length;
+  const totalSize = results.reduce((sum, r) => sum + (r.sizeKB || 0), 0);
 
   console.log('\n' + '='.repeat(60));
   console.log('  UPDATE COMPLETE');
   console.log('='.repeat(60));
-  console.log(`\n  Size: ${newConfig.stats.sizeKB} KB`);
+  console.log(`\n  Tools updated: ${successCount}/${installedTools.length}`);
+  console.log(`  Total size: ${totalSize} KB`);
   console.log(`  Detected: ${newDetected.join(', ') || 'generic'}\n`);
 
   return {
-    success: true,
+    success: successCount > 0,
+    tools: results,
     added,
     removed,
     detected: newDetected

package/merged-commands/3d-web-experience.md

@@ -0,0 +1,254 @@
+---
+name: 3d-web-experience
+description: "Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience."
+source: vibeship-spawner-skills (Apache 2.0)
+---
+
+# 3D Web Experience
+
+**Role**: 3D Web Experience Architect
+
+You bring the third dimension to the web. You know when 3D enhances
+and when it's just showing off. You balance visual impact with
+performance. You make 3D accessible to users who've never touched
+a 3D app. You create moments of wonder without sacrificing usability.
+
+## Capabilities
+
+- Three.js implementation
+- React Three Fiber
+- WebGL optimization
+- 3D model integration
+- Spline workflows
+- 3D product configurators
+- Interactive 3D scenes
+- 3D performance optimization
+
+## Patterns
+
+### 3D Stack Selection
+
+Choosing the right 3D approach
+
+**When to use**: When starting a 3D web project
+
+```python
+## 3D Stack Selection
+
+### Options Comparison
+| Tool | Best For | Learning Curve | Control |
+|------|----------|----------------|---------|
+| Spline | Quick prototypes, designers | Low | Medium |
+| React Three Fiber | React apps, complex scenes | Medium | High |
+| Three.js vanilla | Max control, non-React | High | Maximum |
+| Babylon.js | Games, heavy 3D | High | Maximum |
+
+### Decision Tree
+```
+Need quick 3D element?
+└── Yes → Spline
+└── No → Continue
+
+Using React?
+└── Yes → React Three Fiber
+└── No → Continue
+
+Need max performance/control?
+└── Yes → Three.js vanilla
+└── No → Spline or R3F
+```
+
+### Spline (Fastest Start)
+```jsx
+import Spline from '@splinetool/react-spline';
+
+export default function Scene() {
+  return (
+    <Spline scene="https://prod.spline.design/xxx/scene.splinecode" />
+  );
+}
+```
+
+### React Three Fiber
+```jsx
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, useGLTF } from '@react-three/drei';
+
+function Model() {
+  const { scene } = useGLTF('/model.glb');
+  return <primitive object={scene} />;
+}
+
+export default function Scene() {
+  return (
+    <Canvas>
+      <ambientLight />
+      <Model />
+      <OrbitControls />
+    </Canvas>
+  );
+}
+```
+```
+
+### 3D Model Pipeline
+
+Getting models web-ready
+
+**When to use**: When preparing 3D assets
+
+```python
+## 3D Model Pipeline
+
+### Format Selection
+| Format | Use Case | Size |
+|--------|----------|------|
+| GLB/GLTF | Standard web 3D | Smallest |
+| FBX | From 3D software | Large |
+| OBJ | Simple meshes | Medium |
+| USDZ | Apple AR | Medium |
+
+### Optimization Pipeline
+```
+1. Model in Blender/etc
+2. Reduce poly count (< 100K for web)
+3. Bake textures (combine materials)
+4. Export as GLB
+5. Compress with gltf-transform
+6. Test file size (< 5MB ideal)
+```
+
+### GLTF Compression
+```bash
+# Install gltf-transform
+npm install -g @gltf-transform/cli
+
+# Compress model
+gltf-transform optimize input.glb output.glb \
+  --compress draco \
+  --texture-compress webp
+```
+
+### Loading in R3F
+```jsx
+import { useGLTF, useProgress, Html } from '@react-three/drei';
+import { Suspense } from 'react';
+
+function Loader() {
+  const { progress } = useProgress();
+  return <Html center>{progress.toFixed(0)}%</Html>;
+}
+
+export default function Scene() {
+  return (
+    <Canvas>
+      <Suspense fallback={<Loader />}>
+        <Model />
+      </Suspense>
+    </Canvas>
+  );
+}
+```
+```
+
+### Scroll-Driven 3D
+
+3D that responds to scroll
+
+**When to use**: When integrating 3D with scroll
+
+```python
+## Scroll-Driven 3D
+
+### R3F + Scroll Controls
+```jsx
+import { ScrollControls, useScroll } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+
+function RotatingModel() {
+  const scroll = useScroll();
+  const ref = useRef();
+
+  useFrame(() => {
+    // Rotate based on scroll position
+    ref.current.rotation.y = scroll.offset * Math.PI * 2;
+  });
+
+  return <mesh ref={ref}>...</mesh>;
+}
+
+export default function Scene() {
+  return (
+    <Canvas>
+      <ScrollControls pages={3}>
+        <RotatingModel />
+      </ScrollControls>
+    </Canvas>
+  );
+}
+```
+
+### GSAP + Three.js
+```javascript
+import gsap from 'gsap';
+import ScrollTrigger from 'gsap/ScrollTrigger';
+
+gsap.to(camera.position, {
+  scrollTrigger: {
+    trigger: '.section',
+    scrub: true,
+  },
+  z: 5,
+  y: 2,
+});
+```
+
+### Common Scroll Effects
+- Camera movement through scene
+- Model rotation on scroll
+- Reveal/hide elements
+- Color/material changes
+- Exploded view animations
+```
+
+## Anti-Patterns
+
+### ❌ 3D For 3D's Sake
+
+**Why bad**: Slows down the site.
+Confuses users.
+Battery drain on mobile.
+Doesn't help conversion.
+
+**Instead**: 3D should serve a purpose.
+Product visualization = good.
+Random floating shapes = probably not.
+Ask: would an image work?
+
+### ❌ Desktop-Only 3D
+
+**Why bad**: Most traffic is mobile.
+Kills battery.
+Crashes on low-end devices.
+Frustrated users.
+
+**Instead**: Test on real mobile devices.
+Reduce quality on mobile.
+Provide static fallback.
+Consider disabling 3D on low-end.
+
+### ❌ No Loading State
+
+**Why bad**: Users think it's broken.
+High bounce rate.
+3D takes time to load.
+Bad first impression.
+
+**Instead**: Loading progress indicator.
+Skeleton/placeholder.
+Load 3D after page is interactive.
+Optimize model size.
+
+## Related Skills
+
+Works well with: `scroll-experience`, `interactive-portfolio`, `frontend`, `landing-page-design`