@jarrodmedrano/claude-skills 1.0.2 → 1.0.4

package/.claude/skills/react-three-fiber/scripts/build-scene.ts

@@ -0,0 +1,171 @@
+#!/usr/bin/env bun
+
+/**
+ * Three.js Scene Builder Helper
+ * Quickly scaffold Three.js scenes with common configurations
+ */
+
+import { writeFile, mkdir } from 'fs/promises';
+import { join } from 'path';
+
+async function main() {
+  const args = process.argv.slice(2);
+
+  if (args.includes('--help') || args.includes('-h') || args.length === 0) {
+    console.log(`
+Three.js Scene Builder
+
+Usage:
+  bun run build-scene.ts <scene-name> [options]
+
+Options:
+  --basic            Create basic scene (default)
+  --vr               Create VR-ready scene
+  --physics          Include physics setup
+  --lighting         Advanced lighting setup
+  --output <dir>     Output directory (default: ./src/scenes)
+  --help, -h         Show this help message
+
+Examples:
+  bun run build-scene.ts MyScene
+  bun run build-scene.ts GameScene --vr --physics
+`);
+    process.exit(args.length === 0 ? 1 : 0);
+  }
+
+  const sceneName = args[0];
+  const outputDir = args[args.indexOf('--output') + 1] || './src/scenes';
+  const isVR = args.includes('--vr');
+  const hasPhysics = args.includes('--physics');
+  const advancedLighting = args.includes('--lighting');
+
+  try {
+    await mkdir(outputDir, { recursive: true });
+
+    const sceneTemplate = `import * as THREE from 'three';
+${isVR ? "import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';" : ''}
+${hasPhysics ? "import * as CANNON from 'cannon-es';" : ''}
+
+export class ${sceneName} {
+  scene: THREE.Scene;
+  camera: THREE.PerspectiveCamera;
+  renderer: THREE.WebGLRenderer;
+  ${hasPhysics ? 'world: CANNON.World;' : ''}
+
+  constructor() {
+    this.scene = new THREE.Scene();
+    this.camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+    this.renderer = new THREE.WebGLRenderer({ antialias: true });
+
+    this.init();
+  }
+
+  init() {
+    // Renderer setup
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.shadowMap.enabled = true;
+    ${isVR ? 'this.renderer.xr.enabled = true;' : ''}
+    document.body.appendChild(this.renderer.domElement);
+
+    ${isVR ? "document.body.appendChild(VRButton.createButton(this.renderer));" : ''}
+
+    ${hasPhysics ? this.getPhysicsSetup() : ''}
+
+    // Lighting
+    ${advancedLighting ? this.getAdvancedLighting() : this.getBasicLighting()}
+
+    // Camera position
+    this.camera.position.set(0, 2, 5);
+    this.camera.lookAt(0, 0, 0);
+
+    // Window resize handler
+    window.addEventListener('resize', () => this.onWindowResize());
+  }
+
+  ${hasPhysics ? `
+  initPhysics() {
+    this.world = new CANNON.World();
+    this.world.gravity.set(0, -9.82, 0);
+  }
+  ` : ''}
+
+  onWindowResize() {
+    this.camera.aspect = window.innerWidth / window.innerHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+  }
+
+  animate() {
+    ${isVR ? 'this.renderer.setAnimationLoop(() => {' : 'requestAnimationFrame(() => this.animate());'}
+      ${hasPhysics ? 'this.world.step(1 / 60);' : ''}
+      this.renderer.render(this.scene, this.camera);
+    ${isVR ? '});' : ''}
+  }
+
+  start() {
+    this.animate();
+  }
+}
+`;
+
+    const filepath = join(outputDir, `${sceneName}.ts`);
+    await writeFile(filepath, sceneTemplate);
+
+    console.log(`✓ Created scene: ${filepath}`);
+    console.log(`
+Next steps:
+  1. Import and instantiate: import { ${sceneName} } from './scenes/${sceneName}';
+  2. Create instance: const scene = new ${sceneName}();
+  3. Start rendering: scene.start();
+`);
+  } catch (error) {
+    console.error('Failed to create scene:', error);
+    process.exit(1);
+  }
+
+  function getBasicLighting(): string {
+    return `const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    this.scene.add(ambientLight);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    directionalLight.position.set(5, 10, 5);
+    directionalLight.castShadow = true;
+    this.scene.add(directionalLight);`;
+  }
+
+  function getAdvancedLighting(): string {
+    return `// Ambient light
+    const ambientLight = new THREE.AmbientLight(0x404040, 0.3);
+    this.scene.add(ambientLight);
+
+    // Main directional light (sun)
+    const sunLight = new THREE.DirectionalLight(0xffffff, 1.0);
+    sunLight.position.set(10, 20, 10);
+    sunLight.castShadow = true;
+    sunLight.shadow.mapSize.width = 2048;
+    sunLight.shadow.mapSize.height = 2048;
+    sunLight.shadow.camera.near = 0.5;
+    sunLight.shadow.camera.far = 50;
+    this.scene.add(sunLight);
+
+    // Fill light
+    const fillLight = new THREE.DirectionalLight(0x8888ff, 0.3);
+    fillLight.position.set(-5, 5, -5);
+    this.scene.add(fillLight);
+
+    // Hemisphere light for sky/ground gradient
+    const hemisphereLight = new THREE.HemisphereLight(0x8888ff, 0x888888, 0.5);
+    this.scene.add(hemisphereLight);`;
+  }
+
+  function getPhysicsSetup(): string {
+    return `this.initPhysics();`;
+  }
+}
+
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jarrodmedrano/claude-skills",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Reusable Claude Code skills for web development projects",
   "main": "index.js",
   "bin": {
@@ -23,6 +23,8 @@
   "files": [
     ".claude/skills/**/*",
     ".claude/commands/**/*",
+    ".claude/agents/**/*",
+    "templates/**/*",
     "scripts/**/*",
     "bin/**/*",
     "README.md"

package/scripts/install.js

@@ -38,8 +38,10 @@ function copySkills() {
 
   const skillsTargetDir = path.join(projectRoot, '.claude', 'skills');
   const commandsTargetDir = path.join(projectRoot, '.claude', 'commands');
+  const agentsTargetDir = path.join(projectRoot, '.claude', 'agents');
   const skillsSourceDir = path.join(packageRoot, '.claude', 'skills');
   const commandsSourceDir = path.join(packageRoot, '.claude', 'commands');
+  const agentsSourceDir = path.join(packageRoot, '.claude', 'agents');
 
   // Create .claude directories if they don't exist
   if (!fs.existsSync(skillsTargetDir)) {
@@ -52,7 +54,12 @@ function copySkills() {
     console.log('✓ Created .claude/commands directory');
   }
 
-  // Copy skills and commands
+  if (!fs.existsSync(agentsTargetDir)) {
+    fs.mkdirSync(agentsTargetDir, { recursive: true });
+    console.log('✓ Created .claude/agents directory');
+  }
+
+  // Copy skills, commands, and agents
   try {
     if (fs.existsSync(skillsSourceDir)) {
       copyRecursive(skillsSourceDir, skillsTargetDir);
@@ -64,6 +71,11 @@ function copySkills() {
       console.log(`✓ Commands copied to ${commandsTargetDir}`);
     }
 
+    if (fs.existsSync(agentsSourceDir)) {
+      copyRecursive(agentsSourceDir, agentsTargetDir);
+      console.log(`✓ Agents copied to ${agentsTargetDir}`);
+    }
+
     console.log('\n✓ Claude Code skills installed successfully!');
     console.log('\nAvailable skills:');
     console.log('  /new-website    - Create frontend projects');
@@ -74,6 +86,9 @@ function copySkills() {
     console.log('  /code-review    - Code review workflows');
     console.log('  /design-review  - Design review workflows');
     console.log('  /security-review - Security review workflows');
+    console.log('\nAvailable agents:');
+    console.log('  design-review        - Design review subagent');
+    console.log('  pragmatic-code-review - Code review subagent');
     console.log('\nTo update later, run: npm run update-skills');
   } catch (error) {
     console.error('Error copying skills:', error.message);

package/templates/github-actions/README.md

@@ -0,0 +1,36 @@
+# GitHub Actions Templates
+
+This directory contains GitHub Actions workflow templates for automating Claude Code reviews in your CI/CD pipeline.
+
+## Available Templates
+
+### Code Review Workflows
+
+- **`claude-code-review.yml`** - Basic Claude Code review workflow
+- **`claude-code-review-custom.yml`** - Customizable Claude Code review workflow with advanced options
+
+### Security Review Workflow
+
+- **`security.yml`** - Automated security review workflow
+
+## Usage
+
+To use these templates in your project:
+
+1. Copy the desired `.yml` file to your repository's `.github/workflows/` directory:
+   ```bash
+   cp templates/github-actions/claude-code-review.yml .github/workflows/
+   ```
+
+2. Set up required secrets in your GitHub repository settings:
+   - `CLAUDE_CODE_OAUTH_TOKEN` or `CLAUDE_API_KEY`
+
+3. Customize the workflow as needed for your project
+
+4. The workflow will automatically run on pull requests
+
+## Documentation
+
+For more information about setting up Claude Code in GitHub Actions, see:
+- [Code Review Documentation](../../.claude/commands/code-review/README.md)
+- [Security Review Documentation](../../.claude/commands/security-review/README.md)