aigroup-workflow 2.1.2 → 2.2.1

package/skills/vue-expert-js/references/state-management.md

@@ -1,249 +0,0 @@
-# State Management
-
----
-
-## Setup
-
-```javascript
-// main.js
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import App from './App.vue'
-
-createApp(App).use(createPinia()).mount('#app')
-```
-
----
-
-## Options Store Syntax
-
-```javascript
-// stores/counter.js
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', {
-  state: () => ({
-    count: 0,
-    name: 'Counter'
-  }),
-
-  getters: {
-    doubleCount: (state) => state.count * 2,
-    // Getter with parameter
-    countPlusN: (state) => (n) => state.count + n
-  },
-
-  actions: {
-    increment() {
-      this.count++
-    },
-    /** @param {number} amount */
-    incrementBy(amount) {
-      this.count += amount
-    }
-  }
-})
-```
-
----
-
-## Setup Store Syntax (Composition API)
-
-```javascript
-// stores/user.js
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-
-/**
- * @typedef {Object} User
- * @property {number} id
- * @property {string} name
- * @property {string} email
- */
-
-export const useUserStore = defineStore('user', () => {
-  // State
-  /** @type {import('vue').Ref<User | null>} */
-  const currentUser = ref(null)
-  const isLoading = ref(false)
-  const error = ref(null)
-
-  // Getters
-  const isLoggedIn = computed(() => currentUser.value !== null)
-  const userName = computed(() => currentUser.value?.name ?? 'Guest')
-
-  // Actions
-  async function login(email, password) {
-    isLoading.value = true
-    error.value = null
-    try {
-      const res = await fetch('/api/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email, password })
-      })
-      currentUser.value = (await res.json()).user
-      return true
-    } catch (e) {
-      error.value = e.message
-      return false
-    } finally {
-      isLoading.value = false
-    }
-  }
-
-  function logout() {
-    currentUser.value = null
-  }
-
-  return { currentUser, isLoading, error, isLoggedIn, userName, login, logout }
-})
-```
-
----
-
-## Using Stores
-
-```vue
-<script setup>
-import { useUserStore } from '@/stores/user'
-import { storeToRefs } from 'pinia'
-
-const userStore = useUserStore()
-
-// Use storeToRefs for reactive state/getters
-const { currentUser, isLoggedIn, isLoading } = storeToRefs(userStore)
-
-// Actions can be destructured directly
-const { login, logout } = userStore
-</script>
-
-<template>
-  <div v-if="isLoading">Loading...</div>
-  <div v-else-if="isLoggedIn">
-    Welcome, {{ currentUser?.name }}
-    <button @click="logout">Logout</button>
-  </div>
-</template>
-```
-
----
-
-## Store Composition
-
-```javascript
-// stores/cart.js
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import { useProductsStore } from './products'
-import { useUserStore } from './user'
-
-export const useCartStore = defineStore('cart', () => {
-  const items = ref([]) // [{ productId, quantity }]
-
-  // Access other stores
-  const productsStore = useProductsStore()
-  const userStore = useUserStore()
-
-  const total = computed(() =>
-    items.value.reduce((sum, item) => {
-      const product = productsStore.items.find(p => p.id === item.productId)
-      return sum + (product?.price ?? 0) * item.quantity
-    }, 0)
-  )
-
-  function addItem(productId, quantity = 1) {
-    const existing = items.value.find(i => i.productId === productId)
-    if (existing) existing.quantity += quantity
-    else items.value.push({ productId, quantity })
-  }
-
-  async function checkout() {
-    if (!userStore.isLoggedIn) throw new Error('Must be logged in')
-    await fetch('/api/checkout', {
-      method: 'POST',
-      body: JSON.stringify({ userId: userStore.currentUser.id, items: items.value })
-    })
-    items.value = []
-  }
-
-  return { items, total, addItem, checkout }
-})
-```
-
----
-
-## Persistence
-
-```javascript
-// stores/settings.js
-import { defineStore } from 'pinia'
-import { ref, watch } from 'vue'
-
-const STORAGE_KEY = 'app-settings'
-
-function loadFromStorage() {
-  try {
-    return JSON.parse(localStorage.getItem(STORAGE_KEY)) ?? {}
-  } catch {
-    return {}
-  }
-}
-
-export const useSettingsStore = defineStore('settings', () => {
-  const saved = loadFromStorage()
-
-  const theme = ref(saved.theme ?? 'light')
-  const language = ref(saved.language ?? 'en')
-
-  watch([theme, language], () => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify({
-      theme: theme.value,
-      language: language.value
-    }))
-  })
-
-  return { theme, language }
-})
-```
-
----
-
-## Testing Stores
-
-```javascript
-// stores/__tests__/counter.test.js
-import { describe, it, expect, beforeEach } from 'vitest'
-import { setActivePinia, createPinia } from 'pinia'
-import { useCounterStore } from '../counter'
-
-describe('Counter Store', () => {
-  beforeEach(() => setActivePinia(createPinia()))
-
-  it('increments count', () => {
-    const store = useCounterStore()
-    store.increment()
-    expect(store.count).toBe(1)
-  })
-
-  it('computes double count', () => {
-    const store = useCounterStore()
-    store.count = 5
-    expect(store.doubleCount).toBe(10)
-  })
-})
-```
-
----
-
-## Quick Reference
-
-| Feature | Options Syntax | Setup Syntax |
-|---------|---------------|--------------|
-| State | `state: () => ({})` | `const x = ref()` |
-| Getter | `getters: { x: (state) => }` | `const x = computed()` |
-| Action | `actions: { fn() {} }` | `function fn() {}` |
-| Use in component | `storeToRefs()` for state | Same |
-| Reset state | `store.$reset()` | Manual reset function |
-| Subscribe | `store.$subscribe((mutation, state) => {})` | Same |
-| Other stores | Use in actions | Call at setup top level |

package/skills/vue-expert-js/references/testing-patterns.md

@@ -1,237 +0,0 @@
-# Testing Patterns
-
----
-
-## Setup
-
-```javascript
-// vitest.config.js
-import { defineConfig } from 'vitest/config'
-import vue from '@vitejs/plugin-vue'
-
-export default defineConfig({
-  plugins: [vue()],
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: ['./vitest.setup.js']
-  }
-})
-```
-
-```javascript
-// vitest.setup.js
-import { config } from '@vue/test-utils'
-import { vi } from 'vitest'
-
-vi.stubGlobal('fetch', vi.fn())
-
-config.global.stubs = {
-  'router-link': { template: '<a><slot /></a>' }
-}
-```
-
----
-
-## Component Testing Basics
-
-```javascript
-// Button.test.js
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Button from './Button.vue'
-
-describe('Button', () => {
-  it('renders slot content', () => {
-    const wrapper = mount(Button, { slots: { default: 'Click me' } })
-    expect(wrapper.text()).toBe('Click me')
-  })
-
-  it('applies variant class', () => {
-    const wrapper = mount(Button, { props: { variant: 'danger' } })
-    expect(wrapper.classes()).toContain('btn--danger')
-  })
-
-  it('emits click event', async () => {
-    const wrapper = mount(Button)
-    await wrapper.trigger('click')
-    expect(wrapper.emitted('click')).toHaveLength(1)
-  })
-
-  it('is disabled when prop is true', () => {
-    const wrapper = mount(Button, { props: { disabled: true } })
-    expect(wrapper.attributes('disabled')).toBeDefined()
-  })
-})
-```
-
----
-
-## Testing v-model
-
-```javascript
-// TextInput.test.js
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import TextInput from './TextInput.vue'
-
-describe('TextInput', () => {
-  it('emits update:modelValue on input', async () => {
-    const wrapper = mount(TextInput, { props: { modelValue: '' } })
-    await wrapper.find('input').setValue('new value')
-    expect(wrapper.emitted('update:modelValue')).toEqual([['new value']])
-  })
-})
-```
-
----
-
-## Testing Async
-
-```javascript
-// UserList.test.js
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { mount, flushPromises } from '@vue/test-utils'
-import UserList from './UserList.vue'
-
-describe('UserList', () => {
-  beforeEach(() => vi.resetAllMocks())
-
-  it('renders users after fetch', async () => {
-    global.fetch = vi.fn().mockResolvedValue({
-      ok: true,
-      json: () => Promise.resolve([{ id: 1, name: 'Alice' }])
-    })
-
-    const wrapper = mount(UserList)
-    await flushPromises()
-
-    expect(wrapper.text()).toContain('Alice')
-  })
-
-  it('shows error on failure', async () => {
-    global.fetch = vi.fn().mockRejectedValue(new Error('Network error'))
-
-    const wrapper = mount(UserList)
-    await flushPromises()
-
-    expect(wrapper.find('[data-test="error"]').exists()).toBe(true)
-  })
-})
-```
-
----
-
-## Mocking Composables
-
-```javascript
-// Header.test.js
-import { describe, it, expect, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { ref, computed } from 'vue'
-import Header from './Header.vue'
-import * as useAuthModule from '@/composables/useAuth'
-
-describe('Header', () => {
-  it('shows login button when logged out', () => {
-    vi.spyOn(useAuthModule, 'useAuth').mockReturnValue({
-      user: ref(null),
-      isLoggedIn: computed(() => false),
-      login: vi.fn(),
-      logout: vi.fn()
-    })
-
-    const wrapper = mount(Header)
-    expect(wrapper.find('[data-test="login-btn"]').exists()).toBe(true)
-  })
-
-  it('shows user menu when logged in', () => {
-    vi.spyOn(useAuthModule, 'useAuth').mockReturnValue({
-      user: ref({ id: 1, name: 'John' }),
-      isLoggedIn: computed(() => true),
-      login: vi.fn(),
-      logout: vi.fn()
-    })
-
-    const wrapper = mount(Header)
-    expect(wrapper.find('[data-test="user-menu"]').exists()).toBe(true)
-  })
-})
-```
-
----
-
-## Testing with Pinia
-
-```javascript
-// CartSummary.test.js
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { createTestingPinia } from '@pinia/testing'
-import CartSummary from './CartSummary.vue'
-import { useCartStore } from '@/stores/cart'
-
-describe('CartSummary', () => {
-  it('displays cart total', () => {
-    const wrapper = mount(CartSummary, {
-      global: {
-        plugins: [createTestingPinia({
-          initialState: {
-            cart: { items: [{ productId: 1, quantity: 2, price: 100 }] }
-          }
-        })]
-      }
-    })
-
-    expect(wrapper.text()).toContain('$200')
-  })
-
-  it('calls checkout action', async () => {
-    const wrapper = mount(CartSummary, {
-      global: { plugins: [createTestingPinia()] }
-    })
-
-    await wrapper.find('[data-test="checkout-btn"]').trigger('click')
-    expect(useCartStore().checkout).toHaveBeenCalled()
-  })
-})
-```
-
----
-
-## Testing Provide/Inject
-
-```javascript
-// ChildComponent.test.js
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { ref } from 'vue'
-import ChildComponent from './ChildComponent.vue'
-
-describe('ChildComponent', () => {
-  it('uses injected theme', () => {
-    const wrapper = mount(ChildComponent, {
-      global: { provide: { theme: ref('dark') } }
-    })
-    expect(wrapper.classes()).toContain('theme-dark')
-  })
-})
-```
-
----
-
-## Quick Reference
-
-| Task | Code |
-|------|------|
-| Mount | `mount(Component, { props, slots, global })` |
-| Find | `wrapper.find('[data-test="x"]')` |
-| Trigger | `await wrapper.trigger('click')` |
-| Check emitted | `wrapper.emitted('event')` |
-| Set input | `await wrapper.find('input').setValue('x')` |
-| Wait async | `await flushPromises()` |
-| Mock composable | `vi.spyOn(module, 'fn').mockReturnValue()` |
-| Mock fetch | `global.fetch = vi.fn().mockResolvedValue()` |
-| Test Pinia | `createTestingPinia({ initialState })` |
-| Provide | `global: { provide: { key: value } }` |
-| Stub component | `global: { stubs: { Comp: true } }` |

package/skills/websocket-engineer/SKILL.md

@@ -1,168 +0,0 @@
----
-name: websocket-engineer
-description: Use when building real-time communication systems with WebSockets or Socket.IO. Invoke for bidirectional messaging, horizontal scaling with Redis, presence tracking, room management.
-license: MIT
-metadata:
-  author: https://github.com/Jeffallan
-  version: "1.1.0"
-  domain: api-architecture
-  triggers: WebSocket, Socket.IO, real-time communication, bidirectional messaging, pub/sub, server push, live updates, chat systems, presence tracking
-  role: specialist
-  scope: implementation
-  output-format: code
-  related-skills: fastapi-expert, nestjs-expert, devops-engineer, monitoring-expert, security-reviewer
----
-
-# WebSocket Engineer
-
-## Core Workflow
-
-1. **Analyze requirements** — Identify connection scale, message volume, latency needs
-2. **Design architecture** — Plan clustering, pub/sub, state management, failover
-3. **Implement** — Build WebSocket server with authentication, rooms, events
-4. **Validate locally** — Test connection handling, auth, and room behavior before scaling (e.g., `npx wscat -c ws://localhost:3000`); confirm auth rejection on missing/invalid tokens, room join/leave events, and message delivery
-5. **Scale** — Verify Redis connection and pub/sub round-trip before enabling the adapter; configure sticky sessions and confirm with test connections across multiple instances; set up load balancing
-6. **Monitor** — Track connections, latency, throughput, error rates; add alerts for connection-count spikes and error-rate thresholds
-
-## Reference Guide
-
-Load detailed guidance based on context:
-
-| Topic | Reference | Load When |
-|-------|-----------|-----------|
-| Protocol | `references/protocol.md` | WebSocket handshake, frames, ping/pong, close codes |
-| Scaling | `references/scaling.md` | Horizontal scaling, Redis pub/sub, sticky sessions |
-| Patterns | `references/patterns.md` | Rooms, namespaces, broadcasting, acknowledgments |
-| Security | `references/security.md` | Authentication, authorization, rate limiting, CORS |
-| Alternatives | `references/alternatives.md` | SSE, long polling, when to choose WebSockets |
-
-## Code Examples
-
-### Server Setup (Socket.IO with Auth and Room Management)
-
-```js
-import { createServer } from "http";
-import { Server } from "socket.io";
-import { createAdapter } from "@socket.io/redis-adapter";
-import { createClient } from "redis";
-import jwt from "jsonwebtoken";
-
-const httpServer = createServer();
-const io = new Server(httpServer, {
-  cors: { origin: process.env.ALLOWED_ORIGIN, credentials: true },
-  pingTimeout: 20000,
-  pingInterval: 25000,
-});
-
-// Authentication middleware — runs before connection is established
-io.use((socket, next) => {
-  const token = socket.handshake.auth.token;
-  if (!token) return next(new Error("Authentication required"));
-  try {
-    socket.data.user = jwt.verify(token, process.env.JWT_SECRET);
-    next();
-  } catch {
-    next(new Error("Invalid token"));
-  }
-});
-
-// Redis adapter for horizontal scaling
-const pubClient = createClient({ url: process.env.REDIS_URL });
-const subClient = pubClient.duplicate();
-await Promise.all([pubClient.connect(), subClient.connect()]);
-io.adapter(createAdapter(pubClient, subClient));
-
-io.on("connection", (socket) => {
-  const { userId } = socket.data.user;
-  console.log(`connected: ${userId} (${socket.id})`);
-
-  // Presence: mark user online
-  pubClient.hSet("presence", userId, socket.id);
-
-  socket.on("join-room", (roomId) => {
-    socket.join(roomId);
-    socket.to(roomId).emit("user-joined", { userId });
-  });
-
-  socket.on("message", ({ roomId, text }) => {
-    io.to(roomId).emit("message", { userId, text, ts: Date.now() });
-  });
-
-  socket.on("disconnect", () => {
-    pubClient.hDel("presence", userId);
-    console.log(`disconnected: ${userId}`);
-  });
-});
-
-httpServer.listen(3000);
-```
-
-### Client-Side Reconnection with Exponential Backoff
-
-```js
-import { io } from "socket.io-client";
-
-const socket = io("wss://api.example.com", {
-  auth: { token: getAuthToken() },
-  reconnection: true,
-  reconnectionAttempts: 10,
-  reconnectionDelay: 1000,       // initial delay (ms)
-  reconnectionDelayMax: 30000,   // cap at 30 s
-  randomizationFactor: 0.5,      // jitter to avoid thundering herd
-});
-
-// Queue messages while disconnected
-let messageQueue = [];
-
-socket.on("connect", () => {
-  console.log("connected:", socket.id);
-  // Flush queued messages
-  messageQueue.forEach((msg) => socket.emit("message", msg));
-  messageQueue = [];
-});
-
-socket.on("disconnect", (reason) => {
-  console.warn("disconnected:", reason);
-  if (reason === "io server disconnect") socket.connect(); // manual reconnect
-});
-
-socket.on("connect_error", (err) => {
-  console.error("connection error:", err.message);
-});
-
-function sendMessage(roomId, text) {
-  const msg = { roomId, text };
-  if (socket.connected) {
-    socket.emit("message", msg);
-  } else {
-    messageQueue.push(msg); // buffer until reconnected
-  }
-}
-```
-
-## Constraints
-
-### MUST DO
-- Use sticky sessions for load balancing (WebSocket connections are stateful — requests must route to the same server instance)
-- Implement heartbeat/ping-pong to detect dead connections (TCP keepalive alone is insufficient)
-- Use rooms/namespaces for message scoping rather than filtering in application logic
-- Queue messages during disconnection windows to avoid silent data loss
-- Plan connection limits per instance before scaling horizontally
-
-### MUST NOT DO
-- Store large state in memory without a clustering strategy (use Redis or an external store)
-- Mix WebSocket and HTTP on the same port without explicit upgrade handling
-- Forget to handle connection cleanup (presence records, room membership, in-flight timers)
-- Skip load testing before production — connection-count spikes behave differently from HTTP traffic spikes
-
-## Output Templates
-
-When implementing WebSocket features, provide:
-1. Server setup (Socket.IO/ws configuration)
-2. Event handlers (connection, message, disconnect)
-3. Client library (connection, events, reconnection)
-4. Brief explanation of scaling strategy
-
-## Knowledge Reference
-
-Socket.IO, ws, uWebSockets.js, Redis adapter, sticky sessions, nginx WebSocket proxy, JWT over WebSocket, rooms/namespaces, acknowledgments, binary data, compression, heartbeat, backpressure, horizontal pod autoscaling