omgkit 2.1.1 → 2.3.0

package/plugin/skills/frontend/threejs/SKILL.md

@@ -1,59 +1,134 @@
 ---
-name: threejs
-description: Three.js 3D graphics. Use for 3D scenes, WebGL, animations.
+name: building-3d-graphics
+description: Claude builds immersive 3D web experiences with Three.js and React Three Fiber. Use when creating WebGL scenes, 3D animations, shaders, or physics simulations.
 ---
 
-# Three.js Skill
+# Building 3D Graphics
 
-## Basic Setup
-```javascript
-import * as THREE from 'three';
+## Quick Start
 
-const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
-const renderer = new THREE.WebGLRenderer();
-
-renderer.setSize(width, height);
-document.body.appendChild(renderer.domElement);
-```
-
-## React Three Fiber
 ```tsx
 import { Canvas } from '@react-three/fiber';
-import { OrbitControls } from '@react-three/drei';
+import { OrbitControls, Environment } from '@react-three/drei';
 
-function Scene() {
+export function Scene() {
   return (
-    <Canvas>
-      <ambientLight />
-      <pointLight position={[10, 10, 10]} />
-      <mesh>
-        <boxGeometry />
-        <meshStandardMaterial color="orange" />
+    <Canvas shadows camera={{ position: [5, 3, 5], fov: 50 }}>
+      <ambientLight intensity={0.5} />
+      <directionalLight position={[10, 10, 5]} castShadow />
+      <mesh castShadow>
+        <boxGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial color="#4ecdc4" />
       </mesh>
-      <OrbitControls />
+      <OrbitControls enableDamping />
+      <Environment preset="city" />
     </Canvas>
   );
 }
 ```
 
-## Animation
-```tsx
-import { useFrame } from '@react-three/fiber';
+## Features
+
+| Feature | Description | Guide |
+|---------|-------------|-------|
+| Scene Management | Renderer, camera, controls setup with proper disposal | `ref/scene-manager.md` |
+| React Three Fiber | Declarative 3D with React components and hooks | `ref/r3f-patterns.md` |
+| Custom Shaders | GLSL vertex/fragment shaders with uniforms | `ref/shader-materials.md` |
+| Physics | Rapier physics with rigid bodies and colliders | `ref/physics-system.md` |
+| Animation | GSAP and Three.js animation mixer integration | `ref/animation.md` |
+| Performance | LOD, instancing, frustum culling, texture optimization | `ref/optimization.md` |
+
+## Common Patterns
 
-function Box() {
-  const ref = useRef<THREE.Mesh>(null);
+### Animated Component with Interaction
+
+```tsx
+function AnimatedBox({ position }: { position: [number, number, number] }) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const [hovered, setHovered] = useState(false);
 
   useFrame((state, delta) => {
-    if (ref.current) ref.current.rotation.y += delta;
+    if (meshRef.current) {
+      meshRef.current.rotation.y += delta * 0.5;
+      const scale = hovered ? 1.2 : 1;
+      meshRef.current.scale.lerp(new THREE.Vector3(scale, scale, scale), 0.1);
+    }
   });
 
-  return <mesh ref={ref}>...</mesh>;
+  return (
+    <mesh
+      ref={meshRef}
+      position={position}
+      onPointerOver={() => setHovered(true)}
+      onPointerOut={() => setHovered(false)}
+    >
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? '#ff6b6b' : '#4ecdc4'} />
+    </mesh>
+  );
+}
+```
+
+### Instanced Mesh for Performance
+
+```tsx
+function InstancedBoxes({ count = 1000 }: { count?: number }) {
+  const meshRef = useRef<THREE.InstancedMesh>(null);
+  const temp = useMemo(() => new THREE.Object3D(), []);
+
+  useEffect(() => {
+    for (let i = 0; i < count; i++) {
+      temp.position.set(
+        (Math.random() - 0.5) * 50,
+        (Math.random() - 0.5) * 50,
+        (Math.random() - 0.5) * 50
+      );
+      temp.updateMatrix();
+      meshRef.current?.setMatrixAt(i, temp.matrix);
+    }
+    meshRef.current!.instanceMatrix.needsUpdate = true;
+  }, [count, temp]);
+
+  return (
+    <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial />
+    </instancedMesh>
+  );
 }
 ```
 
+### Custom Shader Material
+
+```tsx
+const GradientMaterial = shaderMaterial(
+  { uTime: 0, uColorA: new THREE.Color('#ff6b6b'), uColorB: new THREE.Color('#4ecdc4') },
+  // Vertex shader
+  `varying vec2 vUv;
+   void main() {
+     vUv = uv;
+     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+   }`,
+  // Fragment shader
+  `uniform float uTime;
+   uniform vec3 uColorA;
+   uniform vec3 uColorB;
+   varying vec2 vUv;
+   void main() {
+     vec3 color = mix(uColorA, uColorB, vUv.y + sin(uTime) * 0.1);
+     gl_FragColor = vec4(color, 1.0);
+   }`
+);
+extend({ GradientMaterial });
+```
+
 ## Best Practices
-- Use React Three Fiber for React
-- Dispose resources
-- Optimize draw calls
-- Use instances for repeated objects
+
+| Do | Avoid |
+|----|-------|
+| Use React Three Fiber for React apps | Creating geometries/materials in render loops |
+| Dispose geometries, materials, textures on unmount | Too many dynamic lights (limit to 3-4) |
+| Use instancing for many identical objects | Skipping frustum culling in large scenes |
+| Implement LOD for complex scenes | Uncompressed high-resolution textures |
+| Cap pixel ratio at 2: `Math.min(window.devicePixelRatio, 2)` | Transparent materials unless necessary |
+| Use compressed textures (KTX2, Basis) | Forgetting to update instanceMatrix after changes |

package/plugin/skills/languages/javascript/SKILL.md

@@ -1,62 +1,223 @@
 ---
-name: javascript
-description: JavaScript development. Use for ES6+, async patterns, DOM manipulation.
+name: Writing JavaScript
+description: Writes modern JavaScript with ES2024+ features, async patterns, and functional programming. Use when building Node.js applications, implementing async workflows, or writing clean maintainable code.
+category: languages
+triggers:
+  - javascript
+  - js
+  - es6
+  - es2024
+  - ecmascript
+  - node
+  - nodejs
+  - npm
 ---
 
-# JavaScript Skill
+# Writing JavaScript
 
-## Patterns
+## Quick Start
 
-### Async/Await
 ```javascript
-async function fetchData() {
+// Modern destructuring and spread
+const { name, email, role = 'user' } = user;
+const settings = { ...defaults, theme: 'dark' };
+const [first, ...rest] = items;
+
+// Optional chaining and nullish coalescing
+const street = user?.address?.street ?? 'Unknown';
+config.timeout ??= 5000;
+
+// Async/await with error handling
+async function fetchUser(id) {
   try {
-    const response = await fetch('/api/data');
-    const data = await response.json();
-    return data;
+    const response = await fetch(`/api/users/${id}`);
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    return await response.json();
   } catch (error) {
-    console.error('Fetch failed:', error);
+    console.error('Failed to fetch:', error);
     throw error;
   }
 }
+
+// Functional composition
+const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
+const processData = pipe(filter(isValid), map(transform), reduce(aggregate, []));
 ```
 
-### Destructuring
+## Features
+
+| Feature | Description | Guide |
+|---------|-------------|-------|
+| Destructuring | Extract values from objects and arrays | Use `const { a, b } = obj` or `const [x, y] = arr` |
+| Spread Operator | Expand iterables and merge objects | Use `...` for shallow copies and merging |
+| Optional Chaining | Safe property access on nullable values | Use `?.` to avoid "cannot read property" errors |
+| Nullish Coalescing | Default values for null/undefined only | Use `??` instead of `\|\|` for falsy values |
+| Async/Await | Clean asynchronous code flow | Use try/catch for error handling |
+| Promise Methods | Parallel and conditional execution | Use all, allSettled, race, any for concurrency |
+| Array Methods | Functional array transformations | Use map, filter, reduce, find, at, toSorted |
+| Classes | Object-oriented patterns with private fields | Use # prefix for truly private members |
+| Modules | ESM import/export for code organization | Use named exports and barrel files |
+| Iterators | Custom iteration with generators | Use function* and for...of loops |
+
+## Common Patterns
+
+### Async Patterns with Concurrency Control
+
 ```javascript
-const { name, email } = user;
-const [first, ...rest] = items;
-const { data: userData } = response;
+// Parallel execution
+const [user, posts] = await Promise.all([fetchUser(id), fetchPosts(id)]);
+
+// Handle mixed success/failure
+const results = await Promise.allSettled(ids.map(fetchUser));
+const successful = results.filter(r => r.status === 'fulfilled').map(r => r.value);
+const failed = results.filter(r => r.status === 'rejected').map(r => r.reason);
+
+// Retry with exponential backoff
+async function withRetry(fn, maxRetries = 3, baseDelay = 1000) {
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    try {
+      return await fn();
+    } catch (error) {
+      if (attempt === maxRetries - 1) throw error;
+      await new Promise(r => setTimeout(r, baseDelay * Math.pow(2, attempt)));
+    }
+  }
+}
+
+// Concurrent execution with limit
+async function mapConcurrent(items, fn, limit = 5) {
+  const results = [];
+  const executing = new Set();
+  for (const item of items) {
+    const promise = fn(item).then(r => { executing.delete(promise); return r; });
+    executing.add(promise);
+    results.push(promise);
+    if (executing.size >= limit) await Promise.race(executing);
+  }
+  return Promise.all(results);
+}
+```
+
+### Functional Programming Utilities
+
+```javascript
+// Currying
+const curry = fn => function curried(...args) {
+  return args.length >= fn.length ? fn(...args) : (...next) => curried(...args, ...next);
+};
+
+// Memoization
+const memoize = fn => {
+  const cache = new Map();
+  return (...args) => {
+    const key = JSON.stringify(args);
+    if (!cache.has(key)) cache.set(key, fn(...args));
+    return cache.get(key);
+  };
+};
+
+// Immutable updates
+const updateUser = (user, updates) => ({ ...user, ...updates, updatedAt: new Date() });
+const addItem = (arr, item) => [...arr, item];
+const removeAt = (arr, i) => [...arr.slice(0, i), ...arr.slice(i + 1)];
 ```
 
-### Spread Operator
+### Error Handling with Result Type
+
 ```javascript
-const merged = { ...defaults, ...options };
-const combined = [...array1, ...array2];
+class Result {
+  constructor(value, error) { this.value = value; this.error = error; }
+  static ok(value) { return new Result(value, null); }
+  static err(error) { return new Result(null, error); }
+  isOk() { return this.error === null; }
+  map(fn) { return this.isOk() ? Result.ok(fn(this.value)) : this; }
+  unwrapOr(defaultValue) { return this.isOk() ? this.value : defaultValue; }
+}
+
+async function safeFetch(url) {
+  try {
+    const res = await fetch(url);
+    if (!res.ok) return Result.err(new Error(`HTTP ${res.status}`));
+    return Result.ok(await res.json());
+  } catch (e) { return Result.err(e); }
+}
+
+// Usage
+const result = await safeFetch('/api/data');
+const data = result.map(d => d.items).unwrapOr([]);
 ```
 
-### Modules (ESM)
+### Event Emitter Pattern
+
 ```javascript
-// Named exports
-export const helper = () => {};
-export function process() {}
+class EventEmitter {
+  constructor() { this.events = new Map(); }
+
+  on(event, listener) {
+    if (!this.events.has(event)) this.events.set(event, new Set());
+    this.events.get(event).add(listener);
+    return () => this.off(event, listener);
+  }
 
-// Default export
-export default class Service {}
+  off(event, listener) { this.events.get(event)?.delete(listener); }
+
+  emit(event, ...args) {
+    this.events.get(event)?.forEach(listener => listener(...args));
+  }
 
-// Import
-import Service, { helper, process } from './service.js';
+  once(event, listener) {
+    const wrapper = (...args) => { listener(...args); this.off(event, wrapper); };
+    return this.on(event, wrapper);
+  }
+}
 ```
 
-### Optional Chaining
+### Modern Collection Usage
+
 ```javascript
-const street = user?.address?.street;
-const result = callback?.();
+// Map for key-value with any type keys
+const cache = new Map();
+cache.set(userObj, 'data'); // Object as key
+for (const [key, value] of cache) { /* iterate */ }
+
+// Set for unique values and operations
+const setA = new Set([1, 2, 3]);
+const setB = new Set([2, 3, 4]);
+const union = new Set([...setA, ...setB]);
+const intersection = new Set([...setA].filter(x => setB.has(x)));
+
+// WeakMap for private data without memory leaks
+const privateData = new WeakMap();
+class Secret {
+  constructor(value) { privateData.set(this, { value }); }
+  getValue() { return privateData.get(this).value; }
+}
 ```
 
 ## Best Practices
-- Use const/let, never var
-- Use arrow functions for callbacks
-- Use template literals
-- Use optional chaining
-- Use nullish coalescing (??)
-- Use modules (ESM)
+
+| Do | Avoid |
+|----|-------|
+| Use `const` by default, `let` only when needed | Using `var` for variable declarations |
+| Use `===` for strict equality comparisons | Using `==` which allows type coercion |
+| Use async/await over raw promise chains | Deep nesting with .then() callbacks |
+| Use optional chaining for safe property access | Manual null checks at every level |
+| Use destructuring for cleaner parameter extraction | Accessing object properties repeatedly |
+| Use template literals for string interpolation | String concatenation with + |
+| Use arrow functions for callbacks | Using function expressions for simple callbacks |
+| Handle promise rejections explicitly | Ignoring unhandled rejection warnings |
+| Use modules (ESM) for code organization | Polluting the global namespace |
+| Write pure functions when possible | Functions with hidden side effects |
+
+## Related Skills
+
+- **typescript** - Type-safe JavaScript development
+- **nodejs** - Server-side JavaScript runtime
+- **react** - JavaScript UI framework
+
+## References
+
+- [MDN JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide)
+- [ECMAScript Specification](https://tc39.es/ecma262/)
+- [JavaScript Info](https://javascript.info/)
+- [Node.js Documentation](https://nodejs.org/docs/)

package/plugin/skills/methodology/brainstorming/SKILL.md

@@ -1,34 +1,102 @@
 ---
-name: brainstorming
-description: Creative brainstorming. Use when exploring ideas, generating options.
+name: brainstorming-ideas
+description: AI agent generates diverse solutions through structured divergent thinking and systematic exploration frameworks. Use when exploring options, solving problems creatively, or generating alternatives.
 ---
 
-# Brainstorming Skill
-
-## Process
-1. **Diverge** - Generate many ideas without judgment
-2. **Explore** - Ask clarifying questions
-3. **Converge** - Evaluate and prioritize
-
-## Rules
-- One question at a time
-- No premature judgment
-- Quantity over quality first
-- Build on ideas
-
-## Techniques
-- Mind mapping
-- SCAMPER
-- Reverse brainstorming
-- Random word association
-
-## Output
-```markdown
-## Ideas Generated
-1. [Idea] - [Brief rationale]
-
-## Top Recommendations
-1. **Best Overall**: [Why]
-2. **Most Innovative**: [Why]
-3. **Quickest Win**: [Why]
+# Brainstorming Ideas
+
+## Quick Start
+
+1. **Diverge** (20 min) - Generate 20+ ideas with no judgment
+2. **Explore** (10 min) - Combine, connect, flesh out themes
+3. **Converge** (15 min) - Evaluate against criteria, prioritize
+4. **Select** - Pick top 3 with clear rationale
+5. **Document** - Capture all ideas and decisions for future reference
+
+## Features
+
+| Feature | Description | Guide |
+|---------|-------------|-------|
+| Divergent Phase | Generate many options | Quantity over quality, no judgment |
+| SCAMPER | Systematic modification | Substitute, Combine, Adapt, Modify, Put to use, Eliminate, Reverse |
+| Mind Mapping | Visual connections | Central topic with branching ideas |
+| Reverse Brainstorm | Learn from failure | "How to guarantee failure?" -> prevention |
+| Role Storming | Different perspectives | Junior dev, security expert, user personas |
+| Starbursting | Question-based | Who, What, When, Where, Why, How |
+
+## Common Patterns
+
+```
+# Divergent Phase Rules
+1. Quantity over quality - aim for 20+ ideas
+2. No judgment - all ideas valid
+3. Wild ideas welcome - sparks creativity
+4. Build on others - "Yes, and..."
+5. Time-box - prevent over-analysis
+
+# SCAMPER Framework
+S - SUBSTITUTE: Different tech stack? Team structure?
+C - COMBINE: Merge features? Hybrid approaches?
+A - ADAPT: From other industries? Products?
+M - MODIFY/MAGNIFY: Bigger/smaller? Faster/slower?
+P - PUT TO OTHER USES: Different users? Problems?
+E - ELIMINATE: Remove features? Simplify?
+R - REVERSE: Opposite approach? Different order?
+```
+
+```
+# Reverse Brainstorm
+Goal: Build reliable API
+Reversed: How to make MOST unreliable API?
+
+| Failure Idea | Prevention Strategy |
+|--------------|---------------------|
+| No error handling | Comprehensive try/catch |
+| Single point of failure | Redundancy, load balancing |
+| No monitoring | Prometheus + Grafana |
+| Deploy on Fridays | Change freeze policies |
+
+# Prioritization Matrix
+| Idea | Impact | Effort | Score | Priority |
+|------|--------|--------|-------|----------|
+| A | High | Low | 9 | 1st |
+| B | High | High | 6 | 3rd |
+| C | Medium | Low | 7 | 2nd |
+```
+
 ```
+# Role Storming Perspectives
+TECHNICAL:
+- Junior Dev: "What's confusing?"
+- Security Expert: "What vulnerabilities?"
+- DevOps: "How to deploy/monitor?"
+
+USER:
+- Power User: "Advanced features needed?"
+- New User: "Is this intuitive?"
+- Frustrated User: "What's annoying?"
+
+EXTERNAL:
+- Competitor: "How would we copy this?"
+- Hacker: "How to exploit this?"
+```
+
+## Best Practices
+
+| Do | Avoid |
+|----|-------|
+| Set clear time limits per phase | Judging ideas during divergent phase |
+| Capture ALL ideas, even "bad" ones | Letting dominant voices control |
+| Build on others' ideas with "Yes, and..." | Skipping exploration phase |
+| Use visual tools (mind maps, boards) | Converging too early |
+| Vote anonymously to avoid groupthink | Brainstorming without clear goal |
+| Follow up with action items | Abandoning ideas without evaluation |
+| Mix individual and group ideation | Sessions over 60 minutes |
+| Create safety for wild ideas | Forgetting to capture reasoning |
+
+## Related Skills
+
+- `thinking-sequentially` - Structure exploration
+- `writing-plans` - Turn ideas into plans
+- `solving-problems` - Generate solution hypotheses
+- `dispatching-parallel-agents` - Parallel idea exploration