@ngxtm/devkit 3.7.0 → 3.9.0

package/cli/init.js

@@ -136,14 +136,30 @@ function installForTool(toolId, tool, projectDir, options = {}) {
     }
   }
 
-  // 4. Install skills index
-  const skillsIndexSrc = path.join(PACKAGE_ROOT, 'skills-index.json');
-  if (fs.existsSync(skillsIndexSrc)) {
-    fs.copyFileSync(skillsIndexSrc, path.join(targetDir, 'skills-index.json'));
-    totalFiles++;
+  // 4. Install skills index files (for auto-skill detection)
+  const indexFiles = [
+    'skills-index.json',
+    'skills-keywords.json',
+    'skills-categories.json',
+    'skills-triggers.json'
+  ];
+  for (const indexFile of indexFiles) {
+    const src = path.join(PACKAGE_ROOT, indexFile);
+    if (fs.existsSync(src)) {
+      fs.copyFileSync(src, path.join(targetDir, indexFile));
+      totalFiles++;
+    }
+  }
+
+  // 5. Install base rules (including auto-skill detection)
+  const baseRulesDir = path.join(PACKAGE_ROOT, 'templates', 'base', 'rules');
+  if (tool.rulesPath && fs.existsSync(baseRulesDir)) {
+    const destRulesDir = path.join(targetDir, tool.rulesPath, 'base');
+    const count = copyDir(baseRulesDir, destRulesDir);
+    totalFiles += count;
   }
 
-  // 5. Create devkit.json tracking file
+  // 6. Create devkit.json tracking file
   const devkitConfig = {
     version: VERSION,
     tool: toolId,
@@ -164,7 +180,7 @@ function installForTool(toolId, tool, projectDir, options = {}) {
   );
   totalFiles++;
 
-  // 6. Create settings.json if not exists (for tools that use it)
+  // 7. Create settings.json if not exists (for tools that use it)
   if (toolId === 'claude') {
     const settingsPath = path.join(targetDir, 'settings.json');
     if (!fs.existsSync(settingsPath)) {

package/cli/update.js

@@ -97,14 +97,29 @@ function updateToolInstallation(toolId, tool, projectDir, options = {}) {
     }
   }
 
-  // 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++;
+  // 5. Update skills index files
+  const indexFiles = [
+    'skills-index.json',
+    'skills-keywords.json',
+    'skills-categories.json',
+    'skills-triggers.json'
+  ];
+  for (const indexFile of indexFiles) {
+    const src = path.join(PACKAGE_ROOT, indexFile);
+    if (fs.existsSync(src)) {
+      fs.copyFileSync(src, path.join(targetDir, indexFile));
+      updatedCount++;
+    }
+  }
+
+  // 6. Update base rules (including auto-skill detection)
+  const baseRulesDir = path.join(PACKAGE_ROOT, 'templates', 'base', 'rules');
+  if (tool.rulesPath && fs.existsSync(baseRulesDir)) {
+    const destRulesDir = path.join(targetDir, tool.rulesPath, 'base');
+    updatedCount += copyDir(baseRulesDir, destRulesDir);
   }
 
-  // 6. Update devkit.json
+  // 7. Update devkit.json
   const newConfig = {
     ...config,
     version: VERSION,

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`

package/merged-commands/ab-test-setup.md

@@ -0,0 +1,232 @@
+---
+name: ab-test-setup
+description: Structured guide for setting up A/B tests with mandatory gates for hypothesis, metrics, and execution readiness.
+---
+
+# A/B Test Setup
+
+## 1️⃣ Purpose & Scope
+
+Ensure every A/B test is **valid, rigorous, and safe** before a single line of code is written.
+
+- Prevents "peeking"
+- Enforces statistical power
+- Blocks invalid hypotheses
+
+---
+
+## 2️⃣ Pre-Requisites
+
+You must have:
+
+- A clear user problem
+- Access to an analytics source
+- Roughly estimated traffic volume
+
+### Hypothesis Quality Checklist
+
+A valid hypothesis includes:
+
+- Observation or evidence
+- Single, specific change
+- Directional expectation
+- Defined audience
+- Measurable success criteria
+
+---
+
+### 3️⃣ Hypothesis Lock (Hard Gate)
+
+Before designing variants or metrics, you MUST:
+
+- Present the **final hypothesis**
+- Specify:
+  - Target audience
+  - Primary metric
+  - Expected direction of effect
+  - Minimum Detectable Effect (MDE)
+
+Ask explicitly:
+
+> “Is this the final hypothesis we are committing to for this test?”
+
+**Do NOT proceed until confirmed.**
+
+---
+
+### 4️⃣ Assumptions & Validity Check (Mandatory)
+
+Explicitly list assumptions about:
+
+- Traffic stability
+- User independence
+- Metric reliability
+- Randomization quality
+- External factors (seasonality, campaigns, releases)
+
+If assumptions are weak or violated:
+
+- Warn the user
+- Recommend delaying or redesigning the test
+
+---
+
+### 5️⃣ Test Type Selection
+
+Choose the simplest valid test:
+
+- **A/B Test** – single change, two variants
+- **A/B/n Test** – multiple variants, higher traffic required
+- **Multivariate Test (MVT)** – interaction effects, very high traffic
+- **Split URL Test** – major structural changes
+
+Default to **A/B** unless there is a clear reason otherwise.
+
+---
+
+### 6️⃣ Metrics Definition
+
+#### Primary Metric (Mandatory)
+
+- Single metric used to evaluate success
+- Directly tied to the hypothesis
+- Pre-defined and frozen before launch
+
+#### Secondary Metrics
+
+- Provide context
+- Explain _why_ results occurred
+- Must not override the primary metric
+
+#### Guardrail Metrics
+
+- Metrics that must not degrade
+- Used to prevent harmful wins
+- Trigger test stop if significantly negative
+
+---
+
+### 7️⃣ Sample Size & Duration
+
+Define upfront:
+
+- Baseline rate
+- MDE
+- Significance level (typically 95%)
+- Statistical power (typically 80%)
+
+Estimate:
+
+- Required sample size per variant
+- Expected test duration
+
+**Do NOT proceed without a realistic sample size estimate.**
+
+---
+
+### 8️⃣ Execution Readiness Gate (Hard Stop)
+
+You may proceed to implementation **only if all are true**:
+
+- Hypothesis is locked
+- Primary metric is frozen
+- Sample size is calculated
+- Test duration is defined
+- Guardrails are set
+- Tracking is verified
+
+If any item is missing, stop and resolve it.
+
+---
+
+## Running the Test
+
+### During the Test
+
+**DO:**
+
+- Monitor technical health
+- Document external factors
+
+**DO NOT:**
+
+- Stop early due to “good-looking” results
+- Change variants mid-test
+- Add new traffic sources
+- Redefine success criteria
+
+---
+
+## Analyzing Results
+
+### Analysis Discipline
+
+When interpreting results:
+
+- Do NOT generalize beyond the tested population
+- Do NOT claim causality beyond the tested change
+- Do NOT override guardrail failures
+- Separate statistical significance from business judgment
+
+### Interpretation Outcomes
+
+| Result               | Action                                 |
+| -------------------- | -------------------------------------- |
+| Significant positive | Consider rollout                       |
+| Significant negative | Reject variant, document learning      |
+| Inconclusive         | Consider more traffic or bolder change |
+| Guardrail failure    | Do not ship, even if primary wins      |
+
+---
+
+## Documentation & Learning
+
+### Test Record (Mandatory)
+
+Document:
+
+- Hypothesis
+- Variants
+- Metrics
+- Sample size vs achieved
+- Results
+- Decision
+- Learnings
+- Follow-up ideas
+
+Store records in a shared, searchable location to avoid repeated failures.
+
+---
+
+## Refusal Conditions (Safety)
+
+Refuse to proceed if:
+
+- Baseline rate is unknown and cannot be estimated
+- Traffic is insufficient to detect the MDE
+- Primary metric is undefined
+- Multiple variables are changed without proper design
+- Hypothesis cannot be clearly stated
+
+Explain why and recommend next steps.
+
+---
+
+## Key Principles (Non-Negotiable)
+
+- One hypothesis per test
+- One primary metric
+- Commit before launch
+- No peeking
+- Learning over winning
+- Statistical rigor first
+
+---
+
+## Final Reminder
+
+A/B testing is not about proving ideas right.
+It is about **learning the truth with confidence**.
+
+If you feel tempted to rush, simplify, or “just try it” —
+that is the signal to **slow down and re-check the design**.

package/merged-commands/accessibility-compliance-accessibility-audit.md

@@ -0,0 +1,42 @@
+---
+name: accessibility-compliance-accessibility-audit
+description: "You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance."
+---
+
+# Accessibility Audit and Testing
+
+You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct comprehensive audits, identify barriers, provide remediation guidance, and ensure digital products are accessible to all users.
+
+## Use this skill when
+
+- Auditing web or mobile experiences for WCAG compliance
+- Identifying accessibility barriers and remediation priorities
+- Establishing ongoing accessibility testing practices
+- Preparing compliance evidence for stakeholders
+
+## Do not use this skill when
+
+- You only need a general UI design review without accessibility scope
+- The request is unrelated to user experience or compliance
+- You cannot access the UI, design artifacts, or content
+
+## Context
+
+The user needs to audit and improve accessibility to ensure compliance with WCAG standards and provide an inclusive experience for users with disabilities. Focus on automated testing, manual verification, remediation strategies, and establishing ongoing accessibility practices.
+
+## Requirements
+
+$ARGUMENTS
+
+## Instructions
+
+- Confirm scope (platforms, WCAG level, target pages, key user journeys).
+- Run automated scans to collect baseline violations and coverage gaps.
+- Perform manual checks (keyboard, screen reader, focus order, contrast).
+- Map findings to WCAG criteria, severity, and user impact.
+- Provide remediation steps and re-test after fixes.
+- If detailed procedures are required, open `resources/implementation-playbook.md`.
+
+## Resources
+
+- `resources/implementation-playbook.md` for detailed audit steps, tooling, and remediation examples.