@namch/agent-assistant 1.0.0

package/skills/react-expert/references/testing-react.md

@@ -0,0 +1,177 @@
+# Testing React
+
+> Reference for: React Expert
+> Load when: Testing, React Testing Library, Jest, Vitest
+
+## Basic Component Test
+
+```tsx
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+test('renders greeting', () => {
+  render(<Greeting name="World" />);
+  expect(screen.getByText('Hello, World!')).toBeInTheDocument();
+});
+
+test('increments counter on click', async () => {
+  const user = userEvent.setup();
+  render(<Counter />);
+
+  await user.click(screen.getByRole('button', { name: /increment/i }));
+
+  expect(screen.getByText('1')).toBeInTheDocument();
+});
+```
+
+## Query Priority
+
+```tsx
+// Preferred: Accessible queries (how users find elements)
+screen.getByRole('button', { name: /submit/i });
+screen.getByLabelText('Email');
+screen.getByPlaceholderText('Search...');
+screen.getByText('Welcome');
+
+// Fallback: Test IDs (when no accessible name)
+screen.getByTestId('custom-element');
+
+// Async queries (wait for element)
+await screen.findByText('Loading complete');
+```
+
+## Testing Forms
+
+```tsx
+test('submits form with user data', async () => {
+  const handleSubmit = vi.fn();
+  const user = userEvent.setup();
+
+  render(<ContactForm onSubmit={handleSubmit} />);
+
+  await user.type(screen.getByLabelText('Name'), 'John Doe');
+  await user.type(screen.getByLabelText('Email'), 'john@example.com');
+  await user.selectOptions(screen.getByLabelText('Topic'), 'support');
+  await user.click(screen.getByRole('button', { name: /submit/i }));
+
+  expect(handleSubmit).toHaveBeenCalledWith({
+    name: 'John Doe',
+    email: 'john@example.com',
+    topic: 'support',
+  });
+});
+```
+
+## Testing with Providers
+
+```tsx
+function renderWithProviders(
+  ui: React.ReactElement,
+  { initialState = {}, ...options } = {}
+) {
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider>
+          {children}
+        </ThemeProvider>
+      </QueryClientProvider>
+    );
+  }
+
+  return render(ui, { wrapper: Wrapper, ...options });
+}
+
+test('displays user data', async () => {
+  renderWithProviders(<UserProfile userId="123" />);
+
+  await screen.findByText('John Doe');
+});
+```
+
+## Mocking API Calls
+
+```tsx
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+
+const server = setupServer(
+  http.get('/api/users/:id', ({ params }) => {
+    return HttpResponse.json({ id: params.id, name: 'John' });
+  })
+);
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+test('fetches and displays user', async () => {
+  render(<UserProfile userId="123" />);
+
+  await screen.findByText('John');
+});
+
+test('handles error', async () => {
+  server.use(
+    http.get('/api/users/:id', () => {
+      return new HttpResponse(null, { status: 500 });
+    })
+  );
+
+  render(<UserProfile userId="123" />);
+
+  await screen.findByText('Error loading user');
+});
+```
+
+## Testing Hooks
+
+```tsx
+import { renderHook, act } from '@testing-library/react';
+
+test('useCounter increments', () => {
+  const { result } = renderHook(() => useCounter());
+
+  act(() => {
+    result.current.increment();
+  });
+
+  expect(result.current.count).toBe(1);
+});
+
+test('useDebounce delays value', async () => {
+  vi.useFakeTimers();
+
+  const { result, rerender } = renderHook(
+    ({ value }) => useDebounce(value, 500),
+    { initialProps: { value: 'initial' } }
+  );
+
+  rerender({ value: 'updated' });
+  expect(result.current).toBe('initial');
+
+  await act(async () => {
+    vi.advanceTimersByTime(500);
+  });
+
+  expect(result.current).toBe('updated');
+  vi.useRealTimers();
+});
+```
+
+## Quick Reference
+
+| Query | Use When |
+|-------|----------|
+| `getByRole` | Buttons, links, headings |
+| `getByLabelText` | Form inputs |
+| `getByText` | Non-interactive text |
+| `findByX` | Async/loading content |
+| `queryByX` | Assert NOT present |
+
+| Pattern | Use Case |
+|---------|----------|
+| `userEvent.setup()` | User interactions |
+| `renderHook()` | Testing custom hooks |
+| `msw` | Mocking API calls |
+| Custom render | Wrap with providers |

package/skills/react-flow-node/SKILL.md

@@ -0,0 +1,66 @@
+---
+name: react-flow-node
+description: Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components.
+---
+
+# React Flow Node
+
+Create React Flow node components following established patterns with proper TypeScript types and store integration.
+
+## Quick Start
+
+Copy templates from [assets/](assets/) and replace placeholders:
+- `{{NodeName}}` → PascalCase component name (e.g., `VideoNode`)
+- `{{nodeType}}` → kebab-case type identifier (e.g., `video-node`)
+- `{{NodeData}}` → Data interface name (e.g., `VideoNodeData`)
+
+## Templates
+
+- [assets/template.tsx](assets/template.tsx) - Node component
+- [assets/types.template.ts](assets/types.template.ts) - TypeScript definitions
+
+## Node Component Pattern
+
+```tsx
+export const MyNode = memo(function MyNode({
+  id,
+  data,
+  selected,
+  width,
+  height,
+}: MyNodeProps) {
+  const updateNode = useAppStore((state) => state.updateNode);
+  const canvasMode = useAppStore((state) => state.canvasMode);
+  
+  return (
+    <>
+      <NodeResizer isVisible={selected && canvasMode === 'editing'} />
+      <div className="node-container">
+        <Handle type="target" position={Position.Top} />
+        {/* Node content */}
+        <Handle type="source" position={Position.Bottom} />
+      </div>
+    </>
+  );
+});
+```
+
+## Type Definition Pattern
+
+```typescript
+export interface MyNodeData extends Record<string, unknown> {
+  title: string;
+  description?: string;
+}
+
+export type MyNode = Node<MyNodeData, 'my-node'>;
+```
+
+## Integration Steps
+
+1. Add type to `src/frontend/src/types/index.ts`
+2. Create component in `src/frontend/src/components/nodes/`
+3. Export from `src/frontend/src/components/nodes/index.ts`
+4. Add defaults in `src/frontend/src/store/app-store.ts`
+5. Register in canvas `nodeTypes`
+6. Add to AddBlockMenu and ConnectMenu

package/skills/react-flow-node/assets/template.tsx

@@ -0,0 +1,108 @@
+import { memo, useCallback } from 'react';
+import { NodeProps, Node, Handle, Position, NodeResizer } from '@xyflow/react';
+import { {{NodeData}} } from '@/types';
+import { useAppStore } from '@/store';
+import { cn } from '@/utils/utils';
+
+type {{NodeName}}Props = NodeProps<Node<{{NodeData}}>>;
+
+/**
+ * {{NodeName}} - Description of what this node does
+ * 
+ * @example
+ * // Node data structure
+ * const data: {{NodeData}} = {
+ *   title: 'Example',
+ *   // ... other properties
+ * };
+ */
+export const {{NodeName}} = memo(function {{NodeName}}({
+  id,
+  data,
+  selected,
+  width,
+  height,
+}: {{NodeName}}Props) {
+  // Store selectors - use individual selectors for performance
+  const updateNode = useAppStore((state) => state.updateNode);
+  const canvasMode = useAppStore((state) => state.canvasMode);
+  const isEditing = canvasMode === 'editing';
+
+  // Handlers
+  const handleTitleChange = useCallback(
+    (title: string) => {
+      updateNode(id, { title });
+    },
+    [id, updateNode]
+  );
+
+  return (
+    <>
+      {/* NodeResizer - only visible in editing mode */}
+      {isEditing && (
+        <NodeResizer
+          minWidth={200}
+          minHeight={150}
+          isVisible={selected}
+          lineClassName="!border-[var(--frontier-primary)]"
+          handleClassName="!w-2 !h-2 !bg-[var(--frontier-primary)] !border-none"
+        />
+      )}
+
+      {/* Node Container */}
+      <div
+        className={cn(
+          'bg-[var(--frontier-surface)]',
+          'border-2 rounded-xl overflow-hidden',
+          'transition-all duration-200',
+          selected
+            ? 'border-[var(--frontier-primary)] shadow-lg shadow-[var(--frontier-primary)]/20'
+            : 'border-[var(--frontier-border)]'
+        )}
+        style={{ width: width ?? 280, height: height ?? 'auto' }}
+      >
+        {/* Target Handle (top) */}
+        <Handle
+          type="target"
+          position={Position.Top}
+          className="!w-3 !h-3 !bg-[var(--frontier-primary)] !border-2 !border-[var(--frontier-surface)]"
+        />
+
+        {/* Node Header */}
+        <div className="px-4 py-3 border-b border-[var(--frontier-border)]">
+          {isEditing ? (
+            <input
+              type="text"
+              value={data.title}
+              onChange={(e) => handleTitleChange(e.target.value)}
+              className={cn(
+                'w-full bg-transparent text-[var(--frontier-text)]',
+                'font-semibold text-sm outline-none',
+                'focus:ring-1 focus:ring-[var(--frontier-primary)] rounded px-1'
+              )}
+            />
+          ) : (
+            <h3 className="text-[var(--frontier-text)] font-semibold text-sm truncate">
+              {data.title}
+            </h3>
+          )}
+        </div>
+
+        {/* Node Content */}
+        <div className="p-4">
+          {/* Add node-specific content here */}
+          <p className="text-[var(--frontier-text-muted)] text-xs">
+            Node content goes here
+          </p>
+        </div>
+
+        {/* Source Handle (bottom) */}
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          className="!w-3 !h-3 !bg-[var(--frontier-primary)] !border-2 !border-[var(--frontier-surface)]"
+        />
+      </div>
+    </>
+  );
+});

package/skills/react-flow-node/assets/types.template.ts

@@ -0,0 +1,34 @@
+import { Node } from '@xyflow/react';
+
+/**
+ * {{NodeData}} - Data structure for {{NodeName}}
+ * 
+ * Extends Record<string, unknown> for React Flow compatibility.
+ */
+export interface {{NodeData}} extends Record<string, unknown> {
+  /** Display title for the node */
+  title: string;
+  
+  /** Optional description */
+  description?: string;
+  
+  // Add additional properties specific to this node type
+}
+
+/**
+ * {{NodeName}} type alias for React Flow
+ * 
+ * Usage:
+ * ```typescript
+ * const node: {{NodeName}} = {
+ *   id: 'unique-id',
+ *   type: '{{nodeType}}',
+ *   position: { x: 0, y: 0 },
+ *   data: { title: 'Example' },
+ * };
+ * ```
+ */
+export type {{NodeName}} = Node<{{NodeData}}, '{{nodeType}}'>;
+
+// Remember to add {{NodeName}} to the AppNode union type in types/index.ts:
+// export type AppNode = VideoNode | ImageNode | ... | {{NodeName}};

package/skills/react-native-expert/SKILL.md

@@ -0,0 +1,88 @@
+---
+name: react-native-expert
+description: Use when building cross-platform mobile applications with React Native or Expo. Invoke for navigation patterns, platform-specific code, native modules, FlatList optimization.
+triggers:
+  - React Native
+  - Expo
+  - mobile app
+  - iOS
+  - Android
+  - cross-platform
+  - native module
+role: specialist
+scope: implementation
+output-format: code
+---
+
+# React Native Expert
+
+Senior mobile engineer building production-ready cross-platform applications with React Native and Expo.
+
+## Role Definition
+
+You are a senior mobile developer with 8+ years of React Native experience. You specialize in Expo SDK 50+, React Navigation 7, and performance optimization for mobile. You build apps that feel truly native on both iOS and Android.
+
+## When to Use This Skill
+
+- Building cross-platform mobile applications
+- Implementing navigation (tabs, stacks, drawers)
+- Handling platform-specific code (iOS/Android)
+- Optimizing FlatList performance
+- Integrating native modules
+- Setting up Expo or bare React Native projects
+
+## Core Workflow
+
+1. **Setup** - Expo Router or React Navigation, TypeScript config
+2. **Structure** - Feature-based organization
+3. **Implement** - Components with platform handling
+4. **Optimize** - FlatList, images, memory
+5. **Test** - Both platforms, real devices
+
+## Reference Guide
+
+Load detailed guidance based on context:
+
+| Topic | Reference | Load When |
+|-------|-----------|-----------|
+| Navigation | `references/expo-router.md` | Expo Router, tabs, stacks, deep linking |
+| Platform | `references/platform-handling.md` | iOS/Android code, SafeArea, keyboard |
+| Lists | `references/list-optimization.md` | FlatList, performance, memo |
+| Storage | `references/storage-hooks.md` | AsyncStorage, MMKV, persistence |
+| Structure | `references/project-structure.md` | Project setup, architecture |
+
+## Constraints
+
+### MUST DO
+- Use FlatList/SectionList for lists (not ScrollView)
+- Implement memo + useCallback for list items
+- Handle SafeAreaView for notches
+- Test on both iOS and Android real devices
+- Use KeyboardAvoidingView for forms
+- Handle Android back button in navigation
+
+### MUST NOT DO
+- Use ScrollView for large lists
+- Use inline styles extensively (creates new objects)
+- Hardcode dimensions (use Dimensions API or flex)
+- Ignore memory leaks from subscriptions
+- Skip platform-specific testing
+- Use waitFor/setTimeout for animations (use Reanimated)
+
+## Output Templates
+
+When implementing React Native features, provide:
+1. Component code with TypeScript
+2. Platform-specific handling
+3. Navigation integration
+4. Performance considerations noted
+
+## Knowledge Reference
+
+React Native 0.73+, Expo SDK 50+, Expo Router, React Navigation 7, Reanimated 3, Gesture Handler, AsyncStorage, MMKV, React Query, Zustand
+
+## Related Skills
+
+- **React Expert** - Shared React patterns
+- **Flutter Expert** - Alternative mobile framework
+- **Test Master** - Mobile testing strategies

package/skills/react-native-expert/references/expo-router.md

@@ -0,0 +1,190 @@
+# Expo Router
+
+> Reference for: React Native Expert
+> Load when: Navigation, routing, tabs, stacks
+
+## Project Structure
+
+```
+app/
+├── _layout.tsx           # Root layout
+├── index.tsx             # Home (/)
+├── +not-found.tsx        # 404 page
+├── (tabs)/               # Tab group
+│   ├── _layout.tsx       # Tab bar config
+│   ├── index.tsx         # First tab
+│   └── profile.tsx       # Profile tab
+├── (auth)/               # Auth group (no tabs)
+│   ├── _layout.tsx
+│   ├── login.tsx
+│   └── register.tsx
+├── settings/
+│   ├── _layout.tsx       # Stack layout
+│   ├── index.tsx         # Settings main
+│   └── notifications.tsx
+└── details/[id].tsx      # Dynamic route
+```
+
+## Root Layout
+
+```typescript
+// app/_layout.tsx
+import { Stack } from 'expo-router';
+import { ThemeProvider } from '@react-navigation/native';
+
+export default function RootLayout() {
+  return (
+    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <Stack screenOptions={{ headerShown: false }}>
+        <Stack.Screen name="(tabs)" />
+        <Stack.Screen name="(auth)" />
+        <Stack.Screen
+          name="details/[id]"
+          options={{ presentation: 'modal' }}
+        />
+      </Stack>
+    </ThemeProvider>
+  );
+}
+```
+
+## Tab Layout
+
+```typescript
+// app/(tabs)/_layout.tsx
+import { Tabs } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: '#007AFF',
+        headerShown: true,
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="home" color={color} size={size} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: 'Profile',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="person" color={color} size={size} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}
+```
+
+## Navigation
+
+```typescript
+import { router, useLocalSearchParams, Link } from 'expo-router';
+
+// Programmatic navigation
+router.push('/details/123');           // Push to stack
+router.replace('/home');               // Replace current
+router.back();                          // Go back
+router.canGoBack();                     // Check if can go back
+
+// With params
+router.push({
+  pathname: '/details/[id]',
+  params: { id: '123', title: 'Item' },
+});
+
+// Link component
+<Link href="/profile" asChild>
+  <Pressable>
+    <Text>Go to Profile</Text>
+  </Pressable>
+</Link>
+
+// Reading params
+function DetailsScreen() {
+  const { id, title } = useLocalSearchParams<{ id: string; title?: string }>();
+  return <Text>Details for {id}</Text>;
+}
+```
+
+## Protected Routes
+
+```typescript
+// app/(auth)/_layout.tsx
+import { Redirect, Stack } from 'expo-router';
+import { useAuth } from '@/hooks/useAuth';
+
+export default function AuthLayout() {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (user) {
+    return <Redirect href="/(tabs)" />;
+  }
+
+  return <Stack screenOptions={{ headerShown: false }} />;
+}
+
+// app/(tabs)/_layout.tsx
+export default function TabLayout() {
+  const { user, isLoading } = useAuth();
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (!user) {
+    return <Redirect href="/(auth)/login" />;
+  }
+
+  return <Tabs>...</Tabs>;
+}
+```
+
+## Deep Linking
+
+```json
+// app.json
+{
+  "expo": {
+    "scheme": "myapp",
+    "web": {
+      "bundler": "metro"
+    }
+  }
+}
+```
+
+```typescript
+// Handle: myapp://details/123
+// app/details/[id].tsx handles automatically
+```
+
+## Quick Reference
+
+| Component | Purpose |
+|-----------|---------|
+| `<Stack>` | Stack navigator |
+| `<Tabs>` | Tab navigator |
+| `<Drawer>` | Drawer navigator |
+| `<Link>` | Declarative navigation |
+
+| router method | Behavior |
+|---------------|----------|
+| `push()` | Add to stack |
+| `replace()` | Replace current |
+| `back()` | Go back |
+| `dismissAll()` | Dismiss modals |