ai-qakit 1.0.0

package/templates/.claude/skills/javascript-pro/references/best-practices.md

@@ -0,0 +1,98 @@
+# JavaScript Best Practices
+
+## Variable Declarations
+
+```javascript
+const API_URL = '/api';        // Default - immutable reference
+let count = 0; count++;        // Only when reassignment needed
+// Never use var (function-scoped, hoisted)
+```
+
+## Naming Conventions
+
+```javascript
+const userName = 'John';           // camelCase - variables/functions
+class UserService {}               // PascalCase - classes
+const MAX_RETRIES = 3;             // UPPER_SNAKE - constants
+const isActive = true;             // is/has/can - booleans
+```
+
+## Code Organization
+
+```javascript
+// Import order: external → internal absolute → relative → styles
+import React from 'react';
+import { useAuth } from '@/hooks';
+import { formatDate } from './utils';
+
+// Early returns
+function process(user) {
+  if (!user) return null;
+  if (!user.active) return { error: 'Inactive' };
+  return { data: transform(user) };
+}
+
+// Avoid deep nesting - flatten with guards
+if (!user || !user.active || user.role !== 'admin') return;
+```
+
+## Common Pitfalls
+
+```javascript
+// Always use strict equality
+if (value === null) {}  // Not ==
+
+// typeof null quirk
+typeof null === 'object';  // true (bug) - use: value === null
+
+// Array check
+Array.isArray([]);  // true - not typeof
+
+// parseInt with radix
+parseInt('08', 10);  // Always specify base
+```
+
+## Security
+
+```javascript
+// Sanitize DOM insertion
+element.textContent = userInput;  // Safe
+element.innerHTML = userInput;    // XSS risk!
+
+// Validate inputs
+function createUser(input) {
+  const name = String(input.name).slice(0, 100);
+  const email = validateEmail(input.email) ? input.email : null;
+  if (!email) throw new ValidationError('Invalid email');
+  return { name, email };
+}
+```
+
+## Testing Structure
+
+```javascript
+describe('UserService', () => {
+  describe('createUser', () => {
+    it('should create user with valid data', () => {});
+    it('should throw on invalid email', () => {});
+  });
+});
+
+// Mock dependencies
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+```
+
+## Documentation
+
+```javascript
+/**
+ * Calculates total with tax.
+ * @param {number} price - Base price
+ * @param {number} [taxRate=0.1] - Tax rate
+ * @returns {number} Total with tax
+ */
+function calculateTotal(price, taxRate = 0.1) {
+  return price * (1 + taxRate);
+}
+```

package/templates/.claude/skills/javascript-pro/references/design-patterns.md

@@ -0,0 +1,100 @@
+# JavaScript Design Patterns
+
+## Module Pattern
+
+```javascript
+// ES6 module (preferred)
+let users = [];  // Module-scoped private
+export const add = user => users.push(user);
+export const getAll = () => [...users];
+export const find = id => users.find(u => u.id === id);
+```
+
+## Factory Pattern
+
+```javascript
+function createUser(type, data) {
+  const base = { id: generateId(), ...data, createdAt: new Date() };
+  const roles = {
+    admin: { role: 'admin', permissions: ['read', 'write', 'delete'] },
+    guest: { role: 'guest', permissions: ['read'] },
+    default: { role: 'user', permissions: ['read', 'write'] }
+  };
+  return { ...base, ...(roles[type] || roles.default) };
+}
+```
+
+## Singleton Pattern
+
+```javascript
+// ES6 module singleton (simplest)
+class Database {
+  constructor() { this.connection = null; }
+  connect(url) { /* ... */ }
+}
+export default new Database();  // Single instance
+
+// Class-based
+class Logger {
+  static instance;
+  constructor() {
+    if (Logger.instance) return Logger.instance;
+    Logger.instance = this;
+  }
+}
+```
+
+## Observer Pattern (Pub/Sub)
+
+```javascript
+class EventEmitter {
+  #listeners = new Map();
+
+  on(event, callback) {
+    if (!this.#listeners.has(event)) this.#listeners.set(event, []);
+    this.#listeners.get(event).push(callback);
+    return () => this.off(event, callback);
+  }
+
+  off(event, callback) {
+    const cbs = this.#listeners.get(event);
+    if (cbs) this.#listeners.set(event, cbs.filter(cb => cb !== callback));
+  }
+
+  emit(event, data) {
+    this.#listeners.get(event)?.forEach(cb => cb(data));
+  }
+}
+```
+
+## Strategy Pattern
+
+```javascript
+const paymentStrategies = {
+  creditCard: amount => ({ method: 'card', amount, fee: amount * 0.03 }),
+  paypal: amount => ({ method: 'paypal', amount, fee: amount * 0.04 }),
+  crypto: amount => ({ method: 'crypto', amount, fee: 0 })
+};
+
+function processPayment(strategy, amount) {
+  const processor = paymentStrategies[strategy];
+  if (!processor) throw new Error(`Unknown: ${strategy}`);
+  return processor(amount);
+}
+```
+
+## Dependency Injection
+
+```javascript
+class UserService {
+  constructor(repo, logger) { this.repo = repo; this.logger = logger; }
+  async create(data) { this.logger.info('Creating'); return this.repo.save(data); }
+}
+
+// Simple container
+class Container {
+  #services = new Map();
+  register(name, fn) { this.#services.set(name, fn); }
+  resolve(name) { return this.#services.get(name)?.(this); }
+}
+```

package/templates/.claude/skills/javascript-pro/references/error-handling.md

@@ -0,0 +1,100 @@
+# Error Handling
+
+## Custom Error Classes
+
+```javascript
+class AppError extends Error {
+  constructor(message, statusCode = 500) {
+    super(message);
+    this.name = this.constructor.name;
+    this.statusCode = statusCode;
+  }
+}
+
+class ValidationError extends AppError {
+  constructor(message, fields = []) {
+    super(message, 400);
+    this.fields = fields;
+  }
+}
+
+class NotFoundError extends AppError {
+  constructor(resource = 'Resource') {
+    super(`${resource} not found`, 404);
+  }
+}
+```
+
+## Try-Catch Patterns
+
+```javascript
+// Basic with type check
+try {
+  const data = JSON.parse(jsonString);
+} catch (error) {
+  if (error instanceof SyntaxError) console.error('Invalid JSON');
+  else throw error;
+}
+
+// With finally for cleanup
+try {
+  connection = await db.connect();
+  await connection.query(sql);
+} catch (error) {
+  logger.error('Query failed', error);
+  throw error;
+} finally {
+  connection?.close();
+}
+```
+
+## Async Error Handling
+
+```javascript
+// async/await
+async function fetchUser(id) {
+  try {
+    const response = await fetch(`/api/users/${id}`);
+    if (!response.ok) throw new NotFoundError('User');
+    return response.json();
+  } catch (error) {
+    logger.error('Fetch failed', { id, error });
+    throw error;
+  }
+}
+
+// Global handlers
+process.on('unhandledRejection', (reason) => logger.error('Unhandled', { reason }));
+window.addEventListener('unhandledrejection', e => console.error(e.reason));
+```
+
+## Result Pattern
+
+```javascript
+const Result = {
+  ok: data => ({ success: true, data }),
+  err: error => ({ success: false, error })
+};
+
+async function safeParseJSON(str) {
+  try { return Result.ok(JSON.parse(str)); }
+  catch (e) { return Result.err(e.message); }
+}
+
+const result = await safeParseJSON(input);
+if (result.success) console.log(result.data);
+else console.error(result.error);
+```
+
+## Graceful Degradation
+
+```javascript
+// Fallback chain
+const getData = async () => { try { return await fetchFromAPI(); } catch { return getCachedData() ?? getDefaultData(); } };
+
+// Safe storage wrapper
+const storage = {
+  get: k => { try { return JSON.parse(localStorage.getItem(k)); } catch { return null; } },
+  set: (k, v) => { try { localStorage.setItem(k, JSON.stringify(v)); } catch {} }
+};
+```

package/templates/.claude/skills/javascript-pro/references/functional-patterns.md

@@ -0,0 +1,93 @@
+# Functional Programming Patterns
+
+## Pure Functions
+
+```javascript
+// Pure - same input = same output, no side effects
+const add = (a, b) => a + b;
+const double = x => x * 2;
+
+// Make impure functions pure by returning new state
+const addToTotal = (total, x) => total + x;  // Instead of mutating
+```
+
+## Immutability
+
+```javascript
+// Arrays - create new
+const addItem = (arr, item) => [...arr, item];
+const removeItem = (arr, i) => arr.filter((_, idx) => idx !== i);
+const updateItem = (arr, i, val) => arr.map((item, idx) => idx === i ? val : item);
+
+// Objects - spread
+const updateUser = (user, updates) => ({ ...user, ...updates });
+const updateNested = (user, city) => ({ ...user, address: { ...user.address, city } });
+```
+
+## Higher-Order Functions
+
+```javascript
+// map - transform
+const doubled = nums.map(n => n * 2);
+
+// filter - select
+const adults = users.filter(u => u.age >= 18);
+
+// reduce - accumulate
+const sum = nums.reduce((acc, n) => acc + n, 0);
+const grouped = items.reduce((acc, item) => {
+  (acc[item.category] ??= []).push(item);
+  return acc;
+}, {});
+
+// find/some/every
+const admin = users.find(u => u.role === 'admin');
+const hasAdmin = users.some(u => u.role === 'admin');
+const allActive = users.every(u => u.active);
+```
+
+## Closures
+
+```javascript
+function createCounter() {
+  let count = 0;
+  return {
+    increment: () => ++count,
+    decrement: () => --count,
+    get: () => count
+  };
+}
+
+// Factory with config
+const createLogger = prefix => msg => console.log(`[${prefix}] ${msg}`);
+const debug = createLogger('DEBUG');
+```
+
+## Currying
+
+```javascript
+const multiply = a => b => a * b;
+const double = multiply(2);
+const triple = multiply(3);
+
+// Generic curry
+const curry = fn => (...args) =>
+  args.length >= fn.length ? fn(...args) : curry(fn.bind(null, ...args));
+```
+
+## Composition
+
+```javascript
+// Compose - right to left
+const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
+
+// Pipe - left to right
+const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
+
+// Usage
+const slugify = pipe(
+  str => str.toLowerCase(),
+  str => str.trim(),
+  str => str.replace(/\s+/g, '-')
+);
+```

package/templates/.claude/skills/javascript-pro/references/modern-syntax.md

@@ -0,0 +1,100 @@
+# Modern JavaScript Syntax (ES2015+)
+
+## Destructuring
+
+```javascript
+// Object
+const { name, age, city = 'Unknown' } = user;
+const { name: userName } = user;  // Rename
+
+// Array
+const [first, second, ...rest] = items;
+const [, , third] = items;  // Skip
+
+// Parameters
+function greet({ name, age }) { return `${name} is ${age}`; }
+
+// Nested
+const { address: { city, zip } } = user;
+```
+
+## Spread/Rest
+
+```javascript
+// Spread arrays
+const merged = [...arr1, ...arr2];
+const copy = [...original];
+
+// Spread objects
+const updated = { ...user, name: 'New' };
+
+// Rest parameters
+const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
+const { id, ...rest } = user;
+```
+
+## Arrow Functions
+
+```javascript
+const add = (a, b) => a + b;
+const greet = name => `Hello, ${name}`;
+const getUser = () => ({ name: 'John' });  // Return object
+
+// Lexical this
+class Timer {
+  constructor() {
+    this.seconds = 0;
+    setInterval(() => this.seconds++, 1000);
+  }
+}
+```
+
+## Template Literals
+
+```javascript
+const msg = `Hello, ${name}!`;
+const multi = `Line 1
+Line 2`;
+
+// Tagged
+const highlight = (strings, ...vals) =>
+  strings.reduce((acc, s, i) => acc + s + (vals[i] ? `<b>${vals[i]}</b>` : ''), '');
+```
+
+## Optional Chaining & Nullish Coalescing
+
+```javascript
+const city = user?.address?.city;
+const first = arr?.[0];
+const result = obj?.method?.();
+
+const name = user.name ?? 'Anonymous';  // Only null/undefined
+const street = user?.address?.street ?? 'Unknown';
+```
+
+## Classes
+
+```javascript
+class User {
+  #secret = 'private';  // Private
+  static count = 0;     // Static
+
+  constructor(name) { this.name = name; User.count++; }
+  get fullName() { return this.name; }
+  greet() { return `Hello, ${this.name}`; }
+}
+
+class Admin extends User {
+  constructor(name, role) { super(name); this.role = role; }
+}
+```
+
+## Modules
+
+```javascript
+export const API = '/api';           // Named
+export default class Service {}      // Default
+import Service from './service';
+import { API } from './api';
+const mod = await import('./module.js');  // Dynamic
+```

package/templates/.claude/skills/javascript-pro/references/performance.md

@@ -0,0 +1,98 @@
+# Performance Optimization
+
+## Debouncing
+
+```javascript
+function debounce(fn, delay) {
+  let timeoutId;
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), delay);
+  };
+}
+
+// Usage - search input
+const debouncedSearch = debounce(query => fetchResults(query), 300);
+input.addEventListener('input', e => debouncedSearch(e.target.value));
+```
+
+## Throttling
+
+```javascript
+function throttle(fn, limit) {
+  let inThrottle;
+  return function(...args) {
+    if (!inThrottle) {
+      fn.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  };
+}
+
+// Usage - scroll handler
+window.addEventListener('scroll', throttle(updatePosition, 100));
+```
+
+## Memoization
+
+```javascript
+function memoize(fn) {
+  const cache = new Map();
+  return function(...args) {
+    const key = JSON.stringify(args);
+    if (cache.has(key)) return cache.get(key);
+    const result = fn.apply(this, args);
+    cache.set(key, result);
+    return result;
+  };
+}
+
+const expensiveCalc = memoize((a, b) => { /* heavy computation */ });
+```
+
+## Lazy Loading
+
+```javascript
+// Dynamic imports
+const loadModule = async () => {
+  const { default: Module } = await import('./heavy-module.js');
+  return new Module();
+};
+
+// Intersection Observer for images
+const observer = new IntersectionObserver((entries, obs) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.src = entry.target.dataset.src;
+      obs.unobserve(entry.target);
+    }
+  });
+});
+document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
+```
+
+## Memory Management
+
+```javascript
+// WeakMap for metadata (auto GC)
+const metadata = new WeakMap();
+const setMeta = (obj, data) => metadata.set(obj, data);
+
+// Clean up listeners with AbortController
+const controller = new AbortController();
+element.addEventListener('click', handler, { signal: controller.signal });
+controller.abort();  // Removes all listeners
+```
+
+## Efficient DOM
+
+```javascript
+// Batch with DocumentFragment - single reflow
+const fragment = document.createDocumentFragment();
+items.forEach(item => { const el = document.createElement('div'); el.textContent = item; fragment.appendChild(el); });
+container.appendChild(fragment);
+
+// requestAnimationFrame for smooth animations
+const animate = () => { updatePosition(); requestAnimationFrame(animate); };
+```