@ngxtm/devkit 3.7.0 → 3.9.0

package/merged-commands/react-expert.md

@@ -0,0 +1,98 @@
+---
+name: react-expert
+description: Use when building React 18+ applications requiring component architecture, hooks patterns, or state management. Invoke for Server Components, performance optimization, Suspense boundaries, React 19 features.
+triggers:
+  - React
+  - JSX
+  - hooks
+  - useState
+  - useEffect
+  - useContext
+  - Server Components
+  - React 19
+  - Suspense
+  - TanStack Query
+  - Redux
+  - Zustand
+  - component
+  - frontend
+role: specialist
+scope: implementation
+output-format: code
+---
+
+# React Expert
+
+Senior React specialist with deep expertise in React 19, Server Components, and production-grade application architecture.
+
+## Role Definition
+
+You are a senior React engineer with 10+ years of frontend experience. You specialize in React 19 patterns including Server Components, the `use()` hook, and form actions. You build accessible, performant applications with TypeScript and modern state management.
+
+## When to Use This Skill
+
+- Building new React components or features
+- Implementing state management (local, Context, Redux, Zustand)
+- Optimizing React performance
+- Setting up React project architecture
+- Working with React 19 Server Components
+- Implementing forms with React 19 actions
+- Data fetching patterns with TanStack Query or `use()`
+
+## Core Workflow
+
+1. **Analyze requirements** - Identify component hierarchy, state needs, data flow
+2. **Choose patterns** - Select appropriate state management, data fetching approach
+3. **Implement** - Write TypeScript components with proper types
+4. **Optimize** - Apply memoization where needed, ensure accessibility
+5. **Test** - Write tests with React Testing Library
+
+## Reference Guide
+
+Load detailed guidance based on context:
+
+| Topic | Reference | Load When |
+|-------|-----------|-----------|
+| Server Components | `references/server-components.md` | RSC patterns, Next.js App Router |
+| React 19 | `references/react-19-features.md` | use() hook, useActionState, forms |
+| State Management | `references/state-management.md` | Context, Zustand, Redux, TanStack |
+| Hooks | `references/hooks-patterns.md` | Custom hooks, useEffect, useCallback |
+| Performance | `references/performance.md` | memo, lazy, virtualization |
+| Testing | `references/testing-react.md` | Testing Library, mocking |
+| Class Migration | `references/migration-class-to-modern.md` | Converting class components to hooks/RSC |
+
+## Constraints
+
+### MUST DO
+- Use TypeScript with strict mode
+- Implement error boundaries for graceful failures
+- Use `key` props correctly (stable, unique identifiers)
+- Clean up effects (return cleanup function)
+- Use semantic HTML and ARIA for accessibility
+- Memoize when passing callbacks/objects to memoized children
+- Use Suspense boundaries for async operations
+
+### MUST NOT DO
+- Mutate state directly
+- Use array index as key for dynamic lists
+- Create functions inside JSX (causes re-renders)
+- Forget useEffect cleanup (memory leaks)
+- Ignore React strict mode warnings
+- Skip error boundaries in production
+
+## Output Templates
+
+When implementing React features, provide:
+1. Component file with TypeScript types
+2. Test file if non-trivial logic
+3. Brief explanation of key decisions
+
+## Knowledge Reference
+
+React 19, Server Components, use() hook, Suspense, TypeScript, TanStack Query, Zustand, Redux Toolkit, React Router, React Testing Library, Vitest/Jest, Next.js App Router, accessibility (WCAG)
+
+## Related Skills
+
+- **Fullstack Guardian** - Full-stack feature implementation
+- **Playwright Expert** - E2E testing for React apps
+- **Test Master** - Comprehensive testing strategies

package/merged-commands/react-flow-node.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/merged-commands/react-modernization.md

@@ -0,0 +1,34 @@
+---
+name: react-modernization
+description: Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
+---
+
+# React Modernization
+
+Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
+
+## Use this skill when
+
+- Upgrading React applications to latest versions
+- Migrating class components to functional components with hooks
+- Adopting concurrent React features (Suspense, transitions)
+- Applying codemods for automated refactoring
+- Modernizing state management patterns
+- Updating to TypeScript
+- Improving performance with React 18+ features
+
+## Do not use this skill when
+
+- The task is unrelated to react modernization
+- You need a different domain or tool outside this scope
+
+## Instructions
+
+- Clarify goals, constraints, and required inputs.
+- Apply relevant best practices and validate outcomes.
+- Provide actionable steps and verification.
+- If detailed examples are required, open `resources/implementation-playbook.md`.
+
+## Resources
+
+- `resources/implementation-playbook.md` for detailed patterns and examples.

package/merged-commands/react-native-architecture.md

@@ -0,0 +1,33 @@
+---
+name: react-native-architecture
+description: Build production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.
+---
+
+# React Native Architecture
+
+Production-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.
+
+## Use this skill when
+
+- Starting a new React Native or Expo project
+- Implementing complex navigation patterns
+- Integrating native modules and platform APIs
+- Building offline-first mobile applications
+- Optimizing React Native performance
+- Setting up CI/CD for mobile releases
+
+## Do not use this skill when
+
+- The task is unrelated to react native architecture
+- You need a different domain or tool outside this scope
+
+## Instructions
+
+- Clarify goals, constraints, and required inputs.
+- Apply relevant best practices and validate outcomes.
+- Provide actionable steps and verification.
+- If detailed examples are required, open `resources/implementation-playbook.md`.
+
+## Resources
+
+- `resources/implementation-playbook.md` for detailed patterns and examples.

package/merged-commands/react-native-expert.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/merged-commands/react-patterns.md

@@ -0,0 +1,198 @@
+---
+name: react-patterns
+description: Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
+allowed-tools: Read, Write, Edit, Glob, Grep
+---
+
+# React Patterns
+
+> Principles for building production-ready React applications.
+
+---
+
+## 1. Component Design Principles
+
+### Component Types
+
+| Type | Use | State |
+|------|-----|-------|
+| **Server** | Data fetching, static | None |
+| **Client** | Interactivity | useState, effects |
+| **Presentational** | UI display | Props only |
+| **Container** | Logic/state | Heavy state |
+
+### Design Rules
+
+- One responsibility per component
+- Props down, events up
+- Composition over inheritance
+- Prefer small, focused components
+
+---
+
+## 2. Hook Patterns
+
+### When to Extract Hooks
+
+| Pattern | Extract When |
+|---------|-------------|
+| **useLocalStorage** | Same storage logic needed |
+| **useDebounce** | Multiple debounced values |
+| **useFetch** | Repeated fetch patterns |
+| **useForm** | Complex form state |
+
+### Hook Rules
+
+- Hooks at top level only
+- Same order every render
+- Custom hooks start with "use"
+- Clean up effects on unmount
+
+---
+
+## 3. State Management Selection
+
+| Complexity | Solution |
+|------------|----------|
+| Simple | useState, useReducer |
+| Shared local | Context |
+| Server state | React Query, SWR |
+| Complex global | Zustand, Redux Toolkit |
+
+### State Placement
+
+| Scope | Where |
+|-------|-------|
+| Single component | useState |
+| Parent-child | Lift state up |
+| Subtree | Context |
+| App-wide | Global store |
+
+---
+
+## 4. React 19 Patterns
+
+### New Hooks
+
+| Hook | Purpose |
+|------|---------|
+| **useActionState** | Form submission state |
+| **useOptimistic** | Optimistic UI updates |
+| **use** | Read resources in render |
+
+### Compiler Benefits
+
+- Automatic memoization
+- Less manual useMemo/useCallback
+- Focus on pure components
+
+---
+
+## 5. Composition Patterns
+
+### Compound Components
+
+- Parent provides context
+- Children consume context
+- Flexible slot-based composition
+- Example: Tabs, Accordion, Dropdown
+
+### Render Props vs Hooks
+
+| Use Case | Prefer |
+|----------|--------|
+| Reusable logic | Custom hook |
+| Render flexibility | Render props |
+| Cross-cutting | Higher-order component |
+
+---
+
+## 6. Performance Principles
+
+### When to Optimize
+
+| Signal | Action |
+|--------|--------|
+| Slow renders | Profile first |
+| Large lists | Virtualize |
+| Expensive calc | useMemo |
+| Stable callbacks | useCallback |
+
+### Optimization Order
+
+1. Check if actually slow
+2. Profile with DevTools
+3. Identify bottleneck
+4. Apply targeted fix
+
+---
+
+## 7. Error Handling
+
+### Error Boundary Usage
+
+| Scope | Placement |
+|-------|-----------|
+| App-wide | Root level |
+| Feature | Route/feature level |
+| Component | Around risky component |
+
+### Error Recovery
+
+- Show fallback UI
+- Log error
+- Offer retry option
+- Preserve user data
+
+---
+
+## 8. TypeScript Patterns
+
+### Props Typing
+
+| Pattern | Use |
+|---------|-----|
+| Interface | Component props |
+| Type | Unions, complex |
+| Generic | Reusable components |
+
+### Common Types
+
+| Need | Type |
+|------|------|
+| Children | ReactNode |
+| Event handler | MouseEventHandler |
+| Ref | RefObject<Element> |
+
+---
+
+## 9. Testing Principles
+
+| Level | Focus |
+|-------|-------|
+| Unit | Pure functions, hooks |
+| Integration | Component behavior |
+| E2E | User flows |
+
+### Test Priorities
+
+- User-visible behavior
+- Edge cases
+- Error states
+- Accessibility
+
+---
+
+## 10. Anti-Patterns
+
+| ❌ Don't | ✅ Do |
+|----------|-------|
+| Prop drilling deep | Use context |
+| Giant components | Split smaller |
+| useEffect for everything | Server components |
+| Premature optimization | Profile first |
+| Index as key | Stable unique ID |
+
+---
+
+> **Remember:** React is about composition. Build small, combine thoughtfully.