omgkit 2.1.1 → 2.3.0

package/plugin/skills/frameworks/vue/SKILL.md

@@ -1,62 +1,184 @@
 ---
-name: vue
-description: Vue.js development. Use for Vue 3 projects, Composition API, Pinia.
+name: building-vue-apps
+description: Builds production Vue 3 applications with Composition API, TypeScript, Pinia, and Vue Router. Use when creating Vue.js SPAs, component libraries, or reactive web interfaces.
 ---
 
-# Vue.js Skill
+# Vue.js
 
-## Composition API
+## Quick Start
 
-### Component
 ```vue
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 
 const count = ref(0);
 const doubled = computed(() => count.value * 2);
+</script>
+
+<template>
+  <button @click="count++">
+    Count: {{ count }} (doubled: {{ doubled }})
+  </button>
+</template>
+```
+
+## Features
 
-function increment() {
-  count.value++;
+| Feature | Description | Guide |
+|---------|-------------|-------|
+| Composition API | Reactive state, composables, lifecycle | [COMPOSITION.md](COMPOSITION.md) |
+| TypeScript | Props, emits, refs typing | [TYPESCRIPT.md](TYPESCRIPT.md) |
+| Pinia | State management, stores, plugins | [PINIA.md](PINIA.md) |
+| Vue Router | Navigation, guards, lazy loading | [ROUTER.md](ROUTER.md) |
+| Testing | Vitest, Vue Test Utils patterns | [TESTING.md](TESTING.md) |
+| Performance | Lazy loading, memoization, virtual lists | [PERFORMANCE.md](PERFORMANCE.md) |
+
+## Common Patterns
+
+### Component with Props and Emits
+
+```vue
+<script setup lang="ts">
+interface Props {
+  user: { id: string; name: string; email: string };
+  showActions?: boolean;
 }
+
+const props = withDefaults(defineProps<Props>(), {
+  showActions: true,
+});
+
+const emit = defineEmits<{
+  (e: 'edit', user: Props['user']): void;
+  (e: 'delete', id: string): void;
+}>();
 </script>
 
 <template>
-  <button @click="increment">{{ count }} ({{ doubled }})</button>
+  <div class="user-card">
+    <h3>{{ user.name }}</h3>
+    <p>{{ user.email }}</p>
+    <div v-if="showActions">
+      <button @click="emit('edit', user)">Edit</button>
+      <button @click="emit('delete', user.id)">Delete</button>
+    </div>
+  </div>
 </template>
 ```
 
-### Composable
+### Composable for Reusable Logic
+
 ```typescript
-// composables/useUser.ts
-export function useUser(id: Ref<string>) {
-  const user = ref<User | null>(null);
-  const loading = ref(true);
+// composables/useFetch.ts
+import { ref, watch, type Ref } from 'vue';
 
-  watch(id, async (newId) => {
+export function useFetch<T>(url: Ref<string>) {
+  const data = ref<T | null>(null);
+  const loading = ref(false);
+  const error = ref<Error | null>(null);
+
+  async function fetchData() {
     loading.value = true;
-    user.value = await fetchUser(newId);
-    loading.value = false;
-  }, { immediate: true });
+    error.value = null;
+    try {
+      const response = await fetch(url.value);
+      data.value = await response.json();
+    } catch (e) {
+      error.value = e as Error;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  watch(url, fetchData, { immediate: true });
 
-  return { user, loading };
+  return { data, loading, error, refetch: fetchData };
 }
 ```
 
 ### Pinia Store
+
 ```typescript
+// stores/user.ts
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
 export const useUserStore = defineStore('user', () => {
   const user = ref<User | null>(null);
+  const token = ref<string | null>(null);
+
+  const isAuthenticated = computed(() => !!user.value);
 
-  async function login(email: string, password: string) {
-    user.value = await api.login(email, password);
+  async function login(credentials: { email: string; password: string }) {
+    const res = await authService.login(credentials);
+    user.value = res.user;
+    token.value = res.token;
   }
 
-  return { user, login };
+  function logout() {
+    user.value = null;
+    token.value = null;
+  }
+
+  return { user, token, isAuthenticated, login, logout };
+});
+```
+
+## Workflows
+
+### Component Development
+
+1. Define props interface with TypeScript
+2. Define emits with typed events
+3. Use `<script setup>` syntax
+4. Create composables for reusable logic
+5. Write tests with Vitest + Vue Test Utils
+
+### Router Setup
+
+```typescript
+const routes = [
+  { path: '/', component: () => import('./views/Home.vue') },
+  {
+    path: '/dashboard',
+    component: () => import('./views/Dashboard.vue'),
+    meta: { requiresAuth: true },
+  },
+];
+
+router.beforeEach((to, from, next) => {
+  const userStore = useUserStore();
+  if (to.meta.requiresAuth && !userStore.isAuthenticated) {
+    next({ path: '/login', query: { redirect: to.fullPath } });
+  } else {
+    next();
+  }
 });
 ```
 
 ## Best Practices
-- Use Composition API
-- Use `<script setup>`
-- Create composables for logic
-- Use Pinia for state
+
+| Do | Avoid |
+|----|-------|
+| Use Composition API with `<script setup>` | Options API in new code |
+| Type props/emits with interfaces | `any` types |
+| Create composables for shared logic | Duplicating reactive logic |
+| Use Pinia for global state | Overusing provide/inject |
+| Lazy load routes and components | Bundling everything upfront |
+
+## Project Structure
+
+```
+src/
+├── App.vue
+├── main.ts
+├── components/         # Reusable components
+├── composables/        # Composition functions
+├── views/              # Page components
+├── stores/             # Pinia stores
+├── router/             # Route definitions
+├── services/           # API services
+└── types/              # TypeScript types
+```
+
+For detailed examples and patterns, see reference files above.

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

@@ -1,52 +1,161 @@
 ---
-name: accessibility
-description: Accessibility (a11y). Use for WCAG compliance, screen readers, keyboard navigation.
+name: implementing-accessibility
+description: Claude implements WCAG 2.1 AA compliant web interfaces with proper ARIA, keyboard navigation, and screen reader support. Use when building accessible components or auditing existing UIs.
 ---
 
-# Accessibility Skill
+# Implementing Accessibility
 
-## Semantic HTML
-```html
-<header>
-<nav aria-label="Main">
-<main>
-<article>
-<aside>
-<footer>
+## Quick Start
+
+```tsx
+// Accessible dialog with focus trap and ARIA
+export function Dialog({ isOpen, onClose, title, children }: DialogProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+
+  useEffect(() => {
+    if (isOpen) {
+      dialogRef.current?.focus();
+      document.body.style.overflow = 'hidden';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+  return createPortal(
+    <>
+      <div className="dialog-backdrop" onClick={onClose} />
+      <div ref={dialogRef} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1}>
+        <h2 id={titleId}>{title}</h2>
+        {children}
+        <button onClick={onClose} aria-label="Close dialog">&times;</button>
+      </div>
+    </>,
+    document.body
+  );
+}
 ```
 
-## ARIA
-```html
-<button aria-label="Close" aria-pressed="false">
-<div role="alert" aria-live="polite">
-<input aria-describedby="hint-id">
+## Features
+
+| Feature | Description | Guide |
+|---------|-------------|-------|
+| Semantic HTML | Proper landmarks, headings, and native elements | `ref/semantic-structure.md` |
+| ARIA Attributes | Roles, states, and properties for custom widgets | `ref/aria-patterns.md` |
+| Keyboard Navigation | Tab order, roving tabindex, keyboard shortcuts | `ref/keyboard-nav.md` |
+| Focus Management | Focus trapping, restoration, visible indicators | `ref/focus-management.md` |
+| Live Regions | Dynamic content announcements for screen readers | `ref/live-regions.md` |
+| Testing | jest-axe, Cypress accessibility, manual testing | `ref/a11y-testing.md` |
+
+## Common Patterns
+
+### Accessible Form Field
+
+```tsx
+export function FormField({ id, label, error, hint, required, ...props }: FormFieldProps) {
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorId = error ? `${id}-error` : undefined;
+  const describedBy = [hintId, errorId].filter(Boolean).join(' ') || undefined;
+
+  return (
+    <div className={`form-field ${error ? 'has-error' : ''}`}>
+      <label htmlFor={id}>
+        {label}
+        {required && <span aria-hidden="true">*</span>}
+        {required && <span className="sr-only">(required)</span>}
+      </label>
+      {hint && <p id={hintId} className="form-hint">{hint}</p>}
+      <input
+        id={id}
+        aria-required={required}
+        aria-invalid={!!error}
+        aria-describedby={describedBy}
+        {...props}
+      />
+      {error && <p id={errorId} role="alert">{error}</p>}
+    </div>
+  );
+}
 ```
 
-## Keyboard Navigation
+### Roving Tabindex for Tab Component
+
 ```tsx
-function handleKeyDown(e: KeyboardEvent) {
-  if (e.key === 'Enter' || e.key === ' ') {
-    activate();
-  }
-  if (e.key === 'Escape') {
-    close();
-  }
+export function Tabs({ tabs }: { tabs: Tab[] }) {
+  const [activeTab, setActiveTab] = useState(0);
+  const tabRefs = useRef<HTMLButtonElement[]>([]);
+
+  const handleKeyDown = (e: KeyboardEvent, index: number) => {
+    let newIndex = index;
+    if (e.key === 'ArrowRight') newIndex = (index + 1) % tabs.length;
+    if (e.key === 'ArrowLeft') newIndex = (index - 1 + tabs.length) % tabs.length;
+    if (e.key === 'Home') newIndex = 0;
+    if (e.key === 'End') newIndex = tabs.length - 1;
+    if (newIndex !== index) {
+      e.preventDefault();
+      setActiveTab(newIndex);
+      tabRefs.current[newIndex]?.focus();
+    }
+  };
+
+  return (
+    <div>
+      <div role="tablist">
+        {tabs.map((tab, i) => (
+          <button
+            key={tab.id}
+            ref={el => tabRefs.current[i] = el!}
+            role="tab"
+            aria-selected={activeTab === i}
+            aria-controls={`panel-${tab.id}`}
+            tabIndex={activeTab === i ? 0 : -1}
+            onClick={() => setActiveTab(i)}
+            onKeyDown={e => handleKeyDown(e, i)}
+          >{tab.label}</button>
+        ))}
+      </div>
+      {tabs.map((tab, i) => (
+        <div key={tab.id} role="tabpanel" id={`panel-${tab.id}`} hidden={activeTab !== i} tabIndex={0}>
+          {tab.content}
+        </div>
+      ))}
+    </div>
+  );
 }
 ```
 
-## Focus Management
+### Live Region Announcer
+
 ```tsx
-const ref = useRef<HTMLButtonElement>(null);
+export function useAnnounce() {
+  const [message, setMessage] = useState('');
 
-useEffect(() => {
-  if (isOpen) ref.current?.focus();
-}, [isOpen]);
+  const announce = useCallback((text: string) => {
+    setMessage('');
+    requestAnimationFrame(() => setMessage(text));
+    setTimeout(() => setMessage(''), 1000);
+  }, []);
+
+  const Announcer = () => (
+    <div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+      {message}
+    </div>
+  );
+
+  return { announce, Announcer };
+}
+
+// Usage: announce('3 results found');
 ```
 
-## Checklist
-- [ ] Color contrast 4.5:1+
-- [ ] Keyboard accessible
-- [ ] Focus visible
-- [ ] Alt text on images
-- [ ] Form labels
-- [ ] Skip links
+## Best Practices
+
+| Do | Avoid |
+|----|-------|
+| Use semantic HTML elements (`<button>`, `<nav>`, `<main>`) | Removing focus outlines without replacement |
+| Provide text alternatives for images | Relying on color alone to convey information |
+| Ensure 4.5:1 color contrast for text | Using placeholder as the only label |
+| Associate labels with form controls | Trapping keyboard focus unintentionally |
+| Provide skip links for keyboard users | Auto-playing media with sound |
+| Test with actual screen readers (NVDA, VoiceOver) | Using ARIA when native HTML suffices |
+| Announce dynamic content changes with live regions | Very small touch targets (min 44x44px) |

package/plugin/skills/frontend/frontend-design/SKILL.md

@@ -1,47 +1,132 @@
 ---
-name: frontend-design
-description: Frontend design patterns. Use for component architecture, state management.
+name: designing-frontend-patterns
+description: Claude designs scalable React component architectures using compound components, custom hooks, and state machines. Use when building reusable UI systems or complex component APIs.
 ---
 
-# Frontend Design Skill
+# Designing Frontend Patterns
 
-## Component Patterns
+## Quick Start
 
-### Compound Components
 ```tsx
-<Select>
-  <SelectTrigger>Select option</SelectTrigger>
-  <SelectContent>
-    <SelectItem value="1">Option 1</SelectItem>
-  </SelectContent>
-</Select>
-```
+// Compound component pattern with context
+const SelectContext = createContext<SelectContextValue | null>(null);
 
-### Render Props
-```tsx
-<DataFetcher url="/api/users">
-  {({ data, loading }) => loading ? <Spinner /> : <UserList users={data} />}
-</DataFetcher>
+export function Select({ children, value, onValueChange }: SelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <SelectContext.Provider value={{ isOpen, setIsOpen, value, onValueChange }}>
+      <div className="relative">{children}</div>
+    </SelectContext.Provider>
+  );
+}
+
+Select.Trigger = SelectTrigger;
+Select.Content = SelectContent;
+Select.Item = SelectItem;
 ```
 
-### Custom Hooks
+## Features
+
+| Feature | Description | Guide |
+|---------|-------------|-------|
+| Compound Components | Shared state via context for flexible component APIs | `ref/compound-components.md` |
+| Custom Hooks | Encapsulate reusable logic (useDebounce, useLocalStorage) | `ref/custom-hooks.md` |
+| Render Props | Maximum flexibility for data fetching and rendering | `ref/render-props.md` |
+| State Machines | Predictable state transitions for complex flows | `ref/state-machines.md` |
+| HOCs | Cross-cutting concerns (auth, error boundaries) | `ref/higher-order-components.md` |
+| Optimistic UI | Instant feedback with rollback on failure | `ref/optimistic-updates.md` |
+
+## Common Patterns
+
+### Custom Hook with Cleanup
+
 ```tsx
-function useLocalStorage<T>(key: string, initial: T) {
-  const [value, setValue] = useState<T>(() => {
-    const stored = localStorage.getItem(key);
-    return stored ? JSON.parse(stored) : initial;
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export function useLocalStorage<T>(key: string, initialValue: T) {
+  const [stored, setStored] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch { return initialValue; }
   });
 
   useEffect(() => {
-    localStorage.setItem(key, JSON.stringify(value));
-  }, [key, value]);
+    window.localStorage.setItem(key, JSON.stringify(stored));
+  }, [key, stored]);
+
+  return [stored, setStored] as const;
+}
+```
+
+### State Machine Pattern
+
+```tsx
+type FormState = 'idle' | 'validating' | 'submitting' | 'success' | 'error';
+type FormEvent =
+  | { type: 'SUBMIT'; data: FormData }
+  | { type: 'SUCCESS'; response: any }
+  | { type: 'ERROR'; error: string };
 
-  return [value, setValue] as const;
+function useFormMachine() {
+  const [state, setState] = useState<FormState>('idle');
+  const [context, setContext] = useState({ data: null, error: null });
+
+  const send = useCallback((event: FormEvent) => {
+    switch (state) {
+      case 'idle':
+        if (event.type === 'SUBMIT') { setState('validating'); }
+        break;
+      case 'submitting':
+        if (event.type === 'SUCCESS') { setState('success'); }
+        if (event.type === 'ERROR') { setState('error'); setContext(c => ({ ...c, error: event.error })); }
+        break;
+    }
+  }, [state]);
+
+  return { state, context, send };
+}
+```
+
+### Optimistic Update Hook
+
+```tsx
+export function useOptimistic<T>(initialData: T, reducer: (state: T, action: any) => T) {
+  const [state, setState] = useState({ data: initialData, pending: false, error: null });
+  const previousRef = useRef(initialData);
+
+  const optimisticUpdate = useCallback(async (action: any, asyncOp: () => Promise<T>) => {
+    previousRef.current = state.data;
+    setState({ data: reducer(state.data, action), pending: true, error: null });
+
+    try {
+      const result = await asyncOp();
+      setState({ data: result, pending: false, error: null });
+    } catch (error) {
+      setState({ data: previousRef.current, pending: false, error: error as Error });
+    }
+  }, [state.data, reducer]);
+
+  return { ...state, optimisticUpdate };
 }
 ```
 
 ## Best Practices
-- Single responsibility components
-- Lift state appropriately
-- Colocate related code
-- Use composition over inheritance
+
+| Do | Avoid |
+|----|-------|
+| Use compound components for complex UI with shared state | Overusing HOCs (prefer hooks) |
+| Create custom hooks to encapsulate reusable logic | Mutating state directly |
+| Implement state machines for complex state transitions | Deeply nested component hierarchies |
+| Use TypeScript for type-safe component APIs | Passing too many props (use context/composition) |
+| Use forwardRef for component library primitives | Creating components with side effects in render |
+| Keep components focused with single responsibility | Prop drilling for deeply nested data |