aigroup-workflow 2.1.2 → 2.2.1

package/skills/frontend/react-native-expert/references/storage-hooks.md

@@ -0,0 +1,173 @@
+# Storage & Hooks
+
+## AsyncStorage
+
+```typescript
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+// Basic operations
+await AsyncStorage.setItem('user', JSON.stringify(user));
+const user = JSON.parse(await AsyncStorage.getItem('user') || 'null');
+await AsyncStorage.removeItem('user');
+await AsyncStorage.clear();
+
+// Multiple items
+await AsyncStorage.multiSet([
+  ['user', JSON.stringify(user)],
+  ['settings', JSON.stringify(settings)],
+]);
+
+const values = await AsyncStorage.multiGet(['user', 'settings']);
+```
+
+## useStorage Hook
+
+```typescript
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useState, useEffect, useCallback } from 'react';
+
+function useStorage<T>(key: string, initialValue: T) {
+  const [value, setValue] = useState<T>(initialValue);
+  const [loading, setLoading] = useState(true);
+
+  // Load on mount
+  useEffect(() => {
+    AsyncStorage.getItem(key)
+      .then((item) => {
+        if (item !== null) {
+          setValue(JSON.parse(item));
+        }
+      })
+      .finally(() => setLoading(false));
+  }, [key]);
+
+  // Persist changes
+  const setStoredValue = useCallback(
+    async (newValue: T | ((prev: T) => T)) => {
+      const valueToStore =
+        newValue instanceof Function ? newValue(value) : newValue;
+      setValue(valueToStore);
+      await AsyncStorage.setItem(key, JSON.stringify(valueToStore));
+    },
+    [key, value]
+  );
+
+  const removeValue = useCallback(async () => {
+    setValue(initialValue);
+    await AsyncStorage.removeItem(key);
+  }, [key, initialValue]);
+
+  return { value, setValue: setStoredValue, removeValue, loading };
+}
+
+// Usage
+function Settings() {
+  const { value: theme, setValue: setTheme, loading } = useStorage('theme', 'light');
+
+  if (loading) return <Loading />;
+
+  return (
+    <Switch
+      value={theme === 'dark'}
+      onValueChange={(dark) => setTheme(dark ? 'dark' : 'light')}
+    />
+  );
+}
+```
+
+## MMKV (Faster Alternative)
+
+```typescript
+import { MMKV } from 'react-native-mmkv';
+
+const storage = new MMKV();
+
+// Synchronous operations
+storage.set('user.name', 'John');
+const name = storage.getString('user.name');
+
+storage.set('user.age', 25);
+const age = storage.getNumber('user.age');
+
+storage.set('user.premium', true);
+const isPremium = storage.getBoolean('user.premium');
+
+storage.delete('user.name');
+storage.clearAll();
+
+// JSON data
+storage.set('user', JSON.stringify(user));
+const user = JSON.parse(storage.getString('user') || '{}');
+```
+
+## useMMKV Hook
+
+```typescript
+import { useMMKVString, useMMKVNumber, useMMKVBoolean } from 'react-native-mmkv';
+
+function Settings() {
+  const [theme, setTheme] = useMMKVString('theme');
+  const [fontSize, setFontSize] = useMMKVNumber('fontSize');
+  const [notifications, setNotifications] = useMMKVBoolean('notifications');
+
+  return (
+    <>
+      <Switch
+        value={theme === 'dark'}
+        onValueChange={(dark) => setTheme(dark ? 'dark' : 'light')}
+      />
+      <Slider value={fontSize} onValueChange={setFontSize} />
+      <Switch value={notifications} onValueChange={setNotifications} />
+    </>
+  );
+}
+```
+
+## Zustand with MMKV
+
+```typescript
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { MMKV } from 'react-native-mmkv';
+
+const storage = new MMKV();
+
+const mmkvStorage = {
+  getItem: (name: string) => storage.getString(name) ?? null,
+  setItem: (name: string, value: string) => storage.set(name, value),
+  removeItem: (name: string) => storage.delete(name),
+};
+
+interface SettingsStore {
+  theme: 'light' | 'dark';
+  setTheme: (theme: 'light' | 'dark') => void;
+}
+
+const useSettingsStore = create<SettingsStore>()(
+  persist(
+    (set) => ({
+      theme: 'light',
+      setTheme: (theme) => set({ theme }),
+    }),
+    {
+      name: 'settings-storage',
+      storage: createJSONStorage(() => mmkvStorage),
+    }
+  )
+);
+```
+
+## Quick Reference
+
+| Storage | Speed | Async | Use Case |
+|---------|-------|-------|----------|
+| AsyncStorage | Slow | Yes | Small data, simple apps |
+| MMKV | Fast | No | Large data, frequent access |
+| SecureStore | Medium | Yes | Sensitive data (tokens) |
+
+| Hook | Returns |
+|------|---------|
+| `useStorage()` | { value, setValue, loading } |
+| `useMMKVString()` | [value, setValue] |
+| `useMMKVNumber()` | [value, setValue] |
+| `useMMKVBoolean()` | [value, setValue] |

package/skills/frontend/vue-expert/SKILL.md

@@ -0,0 +1,98 @@
+---
+name: vue-expert
+description: Builds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG projects, sets up Pinia stores, scaffolds Quasar/Capacitor mobile apps, implements PWA features, and optimises Vite builds. Use when creating Vue 3 applications with Composition API, writing reusable composables, managing state with Pinia, building hybrid mobile apps with Quasar or Capacitor, configuring service workers, or tuning Vite configuration and TypeScript integration.
+license: MIT
+metadata:
+  author: https://github.com/Jeffallan
+  version: "1.1.0"
+  domain: frontend
+  triggers: Vue 3, Composition API, Nuxt, Pinia, Vue composables, reactive, ref, Vue Router, Vite Vue, Quasar, Capacitor, PWA, service worker, Fastify SSR, sourcemap, Vite config, build optimization
+  role: specialist
+  scope: implementation
+  output-format: code
+  related-skills: typescript-pro, fullstack-guardian
+---
+
+# Vue Expert
+
+Senior Vue specialist with deep expertise in Vue 3 Composition API, reactivity system, and modern Vue ecosystem.
+
+## Core Workflow
+
+1. **Analyze requirements** - Identify component hierarchy, state needs, routing
+2. **Design architecture** - Plan composables, stores, component structure
+3. **Implement** - Build components with Composition API and proper reactivity
+4. **Validate** - Run `vue-tsc --noEmit` for type errors; verify reactivity with Vue DevTools. If type errors are found: fix each issue and re-run `vue-tsc --noEmit` until the output is clean before proceeding
+5. **Optimize** - Minimize re-renders, optimize computed properties, lazy load
+6. **Test** - Write component tests with Vue Test Utils and Vitest. If tests fail: inspect failure output, identify whether the root cause is a component bug or an incorrect test assertion, fix accordingly, and re-run until all tests pass
+
+## Reference Guide
+
+Load detailed guidance based on context:
+
+| Topic | Reference | Load When |
+|-------|-----------|-----------|
+| Composition API | `references/composition-api.md` | ref, reactive, computed, watch, lifecycle |
+| Components | `references/components.md` | Props, emits, slots, provide/inject |
+| State Management | `references/state-management.md` | Pinia stores, actions, getters |
+| Nuxt 3 | `references/nuxt.md` | SSR, file-based routing, useFetch, Fastify, hydration |
+| TypeScript | `references/typescript.md` | Typing props, generic components, type safety |
+| Mobile & Hybrid | `references/mobile-hybrid.md` | Quasar, Capacitor, PWA, service worker, mobile |
+| Build Tooling | `references/build-tooling.md` | Vite config, sourcemaps, optimization, bundling |
+
+## Quick Example
+
+Minimal component demonstrating preferred patterns:
+
+```vue
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const props = defineProps<{ initialCount?: number }>()
+
+const count = ref(props.initialCount ?? 0)
+const doubled = computed(() => count.value * 2)
+
+function increment() {
+  count.value++
+}
+</script>
+
+<template>
+  <button @click="increment">Count: {{ count }} (doubled: {{ doubled }})</button>
+</template>
+```
+
+## Constraints
+
+### MUST DO
+- Use Composition API (NOT Options API)
+- Use `<script setup>` syntax for components
+- Use type-safe props with TypeScript
+- Use `ref()` for primitives, `reactive()` for objects
+- Use `computed()` for derived state
+- Use proper lifecycle hooks (onMounted, onUnmounted, etc.)
+- Implement proper cleanup in composables
+- Use Pinia for global state management
+
+### MUST NOT DO
+- Use Options API (data, methods, computed as object)
+- Mix Composition API with Options API
+- Mutate props directly
+- Create reactive objects unnecessarily
+- Use watch when computed is sufficient
+- Forget to cleanup watchers and effects
+- Access DOM before onMounted
+- Use Vuex (deprecated in favor of Pinia)
+
+## Output Templates
+
+When implementing Vue features, provide:
+1. Component file with `<script setup>` and TypeScript
+2. Composable if reusable logic exists
+3. Pinia store if global state needed
+4. Brief explanation of reactivity decisions
+
+## Knowledge Reference
+
+Vue 3 Composition API, Pinia, Nuxt 3, Vue Router 4, Vite, VueUse, TypeScript, Vitest, Vue Test Utils, SSR/SSG, reactive programming, performance optimization