@cubis/foundry 0.3.83 → 0.3.84

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/react-native/references/performance.md

@@ -1,119 +0,0 @@
-# React Native Performance Reference
-
-## Hermes Engine
-
-Enabled by default in Expo SDK 52+. Provides bytecode precompilation (30-50% faster cold start), optimized GC, and smaller memory footprint.
-
-```json
-{ "expo": { "jsEngine": "hermes" } }
-```
-
-Verify: `const isHermes = () => !!global.HermesInternal;`
-
-## List Performance
-
-### FlashList (Recommended)
-
-```tsx
-import { FlashList } from '@shopify/flash-list';
-
-<FlashList
-  data={products}
-  renderItem={({ item }) => <ProductCard product={item} />}
-  estimatedItemSize={120}
-  keyExtractor={(item) => item.id}
-/>
-```
-
-| Feature | FlatList | FlashList |
-|---------|----------|-----------|
-| Cell recycling | No | Yes |
-| Blank areas on fast scroll | Common | Rare |
-| Memory usage | Higher | Lower |
-
-### FlatList Optimization
-
-```tsx
-<FlatList
-  data={items} renderItem={renderItem} keyExtractor={item => item.id}
-  getItemLayout={(_, i) => ({ length: 80, offset: 80 * i, index: i })}
-  maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews
-/>
-```
-
-## Rendering Optimization
-
-**React.memo:** Prevent re-renders for pure components.
-
-```tsx
-const ProductCard = React.memo(function ProductCard({ product }: { product: Product }) {
-  return <View><Text>{product.name}</Text></View>;
-});
-```
-
-**useMemo / useCallback:** Stabilize references passed as props.
-
-```tsx
-const filtered = useMemo(() => items.filter(i => i.name.includes(query)), [items, query]);
-const onSelect = useCallback((id: string) => router.push(`/product/${id}`), []);
-```
-
-**Avoid inline objects/functions in render:**
-
-```tsx
-// BAD: <View style={{ flex: 1 }}>   GOOD: <View style={styles.container}>
-// BAD: onPress={() => fn(id)}        GOOD: onPress={memoizedCallback}
-```
-
-## Image Optimization
-
-```tsx
-import { Image } from 'expo-image';
-<Image source={{ uri: url }} style={{ width: 200, height: 200 }}
-  contentFit="cover" placeholder={{ blurhash: 'L6PZfS...' }}
-  transition={200} cachePolicy="memory-disk" />
-```
-
-Use WebP format (25-34% smaller). Serve at correct resolution via `PixelRatio.get()`.
-
-## Bundle Size
-
-```bash
-npx react-native-bundle-visualizer          # analyze
-npx expo export --dump-sourcemap             # Expo
-```
-
-Reduce: enable Hermes, lazy-load screens (Expo Router does this by default), tree-shake imports (`import debounce from 'lodash/debounce'` not `import _ from 'lodash'`).
-
-## Animation Performance
-
-```tsx
-// Native driver (transform + opacity only)
-Animated.timing(fadeAnim, { toValue: 1, duration: 300, useNativeDriver: true }).start();
-```
-
-Use Reanimated for gesture-driven animations (runs on UI thread). Never animate `width`/`height`/`margin` -- use `transform: [{ translateX }]` instead.
-
-## Profiling Tools
-
-- **React DevTools Profiler:** identify components rendering >16ms
-- **Flipper:** network, DB inspection, component profiling
-- **Hermes profiler:** `npx react-native profile-hermes`, view in `chrome://tracing`
-- **Fabric overlay:** built-in FPS monitor in dev builds
-
-## Startup Optimization
-
-| Technique | Impact | Effort |
-|-----------|--------|--------|
-| Enable Hermes | 30-50% faster cold start | Low |
-| Lazy-load screens | 10-30% faster TTI | Low |
-| Reduce `initialNumToRender` | Faster first frame | Low |
-| Native splash screen | Hides init lag | Low |
-| Preload critical data | Perceived speed | Medium |
-
-## Common Pitfalls
-
-1. **Anonymous functions in render** -- use `useCallback` for memoized children
-2. **Inline styles** -- use `StyleSheet.create` for stable references
-3. **Unoptimized images** -- serve at device resolution, use caching, prefer WebP
-4. **Missing list optimization** -- always provide `keyExtractor`; use FlashList for 50+ items

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/react-native/references/testing.md

@@ -1,134 +0,0 @@
-# React Native Testing Reference
-
-## Setup
-
-```javascript
-// jest.config.js
-module.exports = {
-  preset: 'jest-expo',
-  setupFilesAfterSetup: ['<rootDir>/jest.setup.ts'],
-  transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*))'
-  ]
-};
-```
-
-```typescript
-// jest.setup.ts
-import '@testing-library/react-native/extend-expect';
-jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
-jest.mock('expo-router', () => ({
-  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), back: jest.fn() }),
-  useLocalSearchParams: () => ({}),
-  Link: ({ children }: any) => children,
-}));
-```
-
-## Component Testing (RNTL)
-
-```tsx
-import { render, screen, fireEvent } from '@testing-library/react-native';
-
-it('calls onPress when tapped', () => {
-  const onPress = jest.fn();
-  render(<Button label="Submit" onPress={onPress} />);
-  fireEvent.press(screen.getByText('Submit'));
-  expect(onPress).toHaveBeenCalledTimes(1);
-});
-```
-
-### Async State
-
-```tsx
-import { render, screen, waitFor } from '@testing-library/react-native';
-
-it('loads user data', async () => {
-  render(<UserProfile userId="1" />);
-  expect(screen.getByTestId('skeleton')).toBeOnTheScreen();
-  await waitFor(() => expect(screen.getByText('Alice')).toBeOnTheScreen());
-});
-```
-
-### Forms
-
-```tsx
-it('validates empty email', async () => {
-  render(<LoginForm onSubmit={jest.fn()} />);
-  fireEvent.press(screen.getByText('Log In'));
-  await waitFor(() => expect(screen.getByText('Email is required')).toBeOnTheScreen());
-});
-```
-
-## Testing Navigation
-
-```tsx
-import { useRouter } from 'expo-router';
-jest.mock('expo-router');
-
-it('navigates on tap', () => {
-  const push = jest.fn();
-  (useRouter as jest.Mock).mockReturnValue({ push });
-  render(<HomeScreen />);
-  fireEvent.press(screen.getByText('View Product'));
-  expect(push).toHaveBeenCalledWith('/product/1');
-});
-```
-
-## Mocking Native Modules
-
-```typescript
-// __mocks__/expo-haptics.ts
-export const impactAsync = jest.fn();
-export const ImpactFeedbackStyle = { Light: 'light', Medium: 'medium', Heavy: 'heavy' };
-```
-
-```typescript
-// expo-camera mock
-jest.mock('expo-camera', () => ({
-  Camera: ({ children }: any) => children,
-  useCameraPermissions: () => [{ granted: true }, jest.fn()],
-}));
-```
-
-## E2E Testing -- Maestro
-
-```yaml
-# .maestro/login.yaml
-appId: com.myapp
----
-- launchApp
-- tapOn: "Email"
-- inputText: "alice@example.com"
-- tapOn: "Password"
-- inputText: "secure123"
-- tapOn: "Log In"
-- assertVisible: "Welcome, Alice"
-```
-
-```bash
-maestro test .maestro/login.yaml
-```
-
-## E2E Testing -- Detox
-
-```typescript
-import { by, device, element, expect } from 'detox';
-
-describe('Login', () => {
-  beforeAll(async () => { await device.launchApp({ newInstance: true }); });
-
-  it('logs in with valid credentials', async () => {
-    await element(by.id('email-input')).typeText('alice@example.com');
-    await element(by.id('password-input')).typeText('secure123');
-    await element(by.id('login-button')).tap();
-    await expect(element(by.text('Welcome, Alice'))).toBeVisible();
-  });
-});
-```
-
-## Common Pitfalls
-
-1. **Missing transforms** -- add RN packages to `transformIgnorePatterns`
-2. **Async act warnings** -- wrap state updates in `waitFor` or `act()`
-3. **Platform mocks** -- native modules need Jest mocks in the test environment
-4. **Navigation context** -- mock Expo Router hooks or wrap in test navigator

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/react-native-callstack/SKILL.md

@@ -1,99 +0,0 @@
----
-name: react-native-callstack
-description: "Use when building React Native apps with Callstack patterns: performance profiling and optimization, Turbo Module and Fabric native module development, brownfield integration into existing iOS and Android apps, and mobile CI/CD pipelines."
-license: MIT
-metadata:
-  author: cubis-foundry
-  version: "3.0"
-compatibility: Claude Code, Codex, GitHub Copilot
----
-# React Native with Callstack Patterns
-
-## Purpose
-
-Guide the design and implementation of high-performance React Native applications following Callstack engineering patterns, covering render performance profiling and optimization, Turbo Module and Fabric component development, brownfield integration into existing native iOS and Android codebases, and CI/CD pipeline configuration for mobile builds and releases.
-
-## When to Use
-
-- Profiling and optimizing React Native app performance (JS thread, UI thread, bridge overhead).
-- Building Turbo Modules or Fabric components for custom native functionality.
-- Integrating React Native screens into an existing native iOS or Android application.
-- Setting up CI/CD pipelines for mobile builds, code signing, and store distribution.
-- Reviewing React Native code for performance regressions, memory leaks, or thread-safety issues.
-- Migrating from the old architecture (Bridge) to the new architecture (Fabric + Turbo Modules).
-
-## Instructions
-
-1. **Profile before optimizing by using Flipper, React DevTools, and systrace** because intuition about performance bottlenecks is unreliable. Measure JS frame time, UI thread utilization, and bridge serialization overhead before making changes.
-
-2. **Eliminate unnecessary re-renders with `React.memo`, `useMemo`, and `useCallback`** because React Native's reconciler triggers native view updates on every re-render, and excessive re-renders cause dropped frames that are visible to users.
-
-3. **Use `FlashList` instead of `FlatList` for long scrollable lists** because FlashList recycles native views using cell recycling, reducing memory allocation and improving scroll performance by up to 5x on large datasets.
-
-4. **Move expensive computations off the JS thread with `InteractionManager` or worklets** because the JS thread is single-threaded, and long-running computations block input handling and animations.
-
-5. **Build Turbo Modules instead of legacy Native Modules** because Turbo Modules use JSI for synchronous, zero-copy communication between JavaScript and native code, eliminating the JSON serialization overhead of the old Bridge.
-
-6. **Implement Fabric components for custom native views** because Fabric renders directly through C++ and the platform's rendering pipeline, enabling synchronous layout and reducing the time-to-first-paint compared to the old Paper renderer.
-
-7. **Define native module interfaces with TypeScript codegen specs** because the React Native codegen generates type-safe C++, Objective-C++, and Java/Kotlin bindings from the spec, preventing type mismatches between JS and native code.
-
-8. **Integrate React Native into brownfield apps by embedding `RCTRootView` (iOS) or `ReactActivity` (Android)** because many organizations cannot rewrite entire apps in React Native. Brownfield integration lets teams adopt React Native incrementally, one screen at a time.
-
-9. **Isolate the React Native runtime from the host app's lifecycle** because brownfield integration requires careful management of the bridge/runtime lifecycle to avoid crashes when the host app backgrounds, resumes, or navigates away from React Native screens.
-
-10. **Pre-warm the React Native bundle for brownfield screens** because cold-starting the JavaScript runtime adds 500ms-2s of latency before the screen is interactive. Pre-loading the bundle on app launch or previous screen transition hides this cost.
-
-11. **Configure CI/CD with Fastlane for iOS and Gradle tasks for Android** because mobile builds require code signing, provisioning profiles, keystore management, and store metadata that general-purpose CI tools do not handle natively.
-
-12. **Cache `node_modules`, Gradle dependencies, and CocoaPods in CI** because React Native builds install hundreds of megabytes of dependencies, and caching reduces build times from 20+ minutes to under 5 minutes.
-
-13. **Run Detox or Maestro E2E tests on CI with device farms** because React Native apps have platform-specific behavior that unit tests cannot catch, and E2E tests on real devices or emulators surface rendering and interaction bugs.
-
-14. **Implement code push or OTA updates for JavaScript-only changes** because app store review cycles are 1-7 days, and critical bug fixes in JavaScript logic can be delivered instantly through OTA without binary releases.
-
-15. **Monitor production performance with `react-native-performance` or custom marks** because development profiling does not reflect production behavior on low-end devices, and continuous monitoring catches regressions before user complaints.
-
-16. **Use Hermes as the JavaScript engine for all platforms** because Hermes provides faster startup through bytecode precompilation, lower memory consumption, and better garbage collection behavior compared to JavaScriptCore.
-
-## Output Format
-
-```
-## Performance Analysis
-[Profiling results, bottleneck identification, optimization plan]
-
-## Native Module Design
-[Interface spec, platform implementations, type-safe bindings]
-
-## Integration Architecture
-[Brownfield embedding strategy, lifecycle management, pre-warming]
-
-## CI/CD Pipeline
-[Build stages, signing, testing, distribution configuration]
-```
-
-## References
-
-| File                           | Load when                                                                                    |
-| ------------------------------ | -------------------------------------------------------------------------------------------- |
-| `references/performance-optimization.md` | Profiling render performance, optimizing lists, or reducing bridge overhead.        |
-| `references/native-bridge.md` | Building Turbo Modules, Fabric components, or wiring native interfaces into JavaScript.      |
-| `references/navigation-patterns.md` | Coordinating application flow, integration boundaries, and production delivery patterns. |
-
-## Examples
-
-- "Profile and optimize a React Native list screen that drops frames during fast scroll."
-- "Build a Turbo Module for a custom camera feature with TypeScript codegen spec."
-- "Embed a React Native checkout flow into an existing native iOS banking app."
-
-## Copilot Platform Notes
-
-- Custom agents are defined in `.github/agents/*.md` with YAML frontmatter: `name`, `description`, `tools`, `model`, `handoffs`.
-- Agent `handoffs` field enables guided workflow transitions (e.g., `@project-planner` → `@orchestrator`).
-- Skill files are stored under `.github/skills/` (skill markdown) and `.github/prompts/` (prompt files).
-- Path-scoped instructions in `.github/instructions/*.instructions.md` provide file-pattern-targeted guidance via `applyTo` frontmatter.
-- User arguments are provided as natural language input in the prompt, not through a `$ARGUMENTS` variable.
-- Frontmatter keys `context: fork` and `allowed-tools` are not natively supported; guidance is advisory.
-- Reference files can be included via `#file:references/<name>.md` syntax in Copilot Chat.
-- MCP configuration lives in `.vscode/mcp.json`. MCP skill tools are available when configured.
-- Rules file: `.github/copilot-instructions.md` — broad and stable, not task-specific.

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/react-native-callstack/evals/assertions.md

@@ -1,47 +0,0 @@
-# React Native Callstack Eval Assertions
-
-## Eval 1: Native Module Bridge (Turbo Module)
-
-This eval tests Turbo Module development: TypeScript codegen spec, platform-specific native implementations, JSI integration, and proper error handling.
-
-### Assertions
-
-| # | Type     | What it checks                                  | Why it matters                                                                                       |
-|---|----------|-------------------------------------------------|------------------------------------------------------------------------------------------------------|
-| 1 | contains | `TurboModule` — New architecture module type     | Turbo Modules use JSI for synchronous, zero-copy JS-to-native communication, replacing the slow JSON-serialized Bridge of the old architecture. |
-| 2 | contains | `codegenNativeComponent` — Codegen integration   | The codegen generates type-safe C++, Objective-C++, and Java/Kotlin bindings from the TypeScript spec, preventing type mismatches between JS and native. |
-| 3 | contains | `getEnforcing` — Module registry lookup          | `TurboModuleRegistry.getEnforcing` retrieves the module and throws immediately if not registered, catching configuration errors at call site instead of producing undefined. |
-| 4 | contains | `Promise` — Async native operations              | Biometric operations require OS-level UI (fingerprint/face prompt) and must return Promises. Synchronous calls would block the JS thread and freeze the UI. |
-| 5 | contains | `ReactContextBaseJavaModule` — Android base class | The Android implementation must extend the correct base class for React Native lifecycle integration, native method exposure, and bridge event emission. |
-
-### What a passing response looks like
-
-- TypeScript spec file (`NativeBiometricAuth.ts`) defining the module interface with typed method signatures.
-- iOS implementation in Swift or Objective-C++ using the generated C++ spec for type conformance.
-- Android implementation in Kotlin extending `ReactContextBaseJavaModule` with `@ReactMethod` annotations.
-- Promise-based async methods for `authenticate()` and `getAvailableBiometrics()`.
-- Typed error codes (e.g., `BIOMETRIC_NOT_AVAILABLE`, `AUTHENTICATION_FAILED`) in rejection callbacks.
-
----
-
-## Eval 2: Performance Optimization
-
-This eval tests React Native performance optimization: profiling methodology, list optimization with FlashList, re-render prevention, and measurable targets.
-
-### Assertions
-
-| # | Type     | What it checks                                  | Why it matters                                                                                       |
-|---|----------|-------------------------------------------------|------------------------------------------------------------------------------------------------------|
-| 1 | contains | `FlashList` — High-performance list component    | FlashList's cell recycling reduces memory allocation during scroll by reusing native views, achieving up to 5x better performance than FlatList on large datasets. |
-| 2 | contains | `React.memo` — Re-render prevention              | List items wrapped in React.memo skip re-rendering when props are unchanged, which is critical when the parent list re-renders due to filter changes or new data. |
-| 3 | contains | `useCallback` — Callback stabilization           | Unstable callback references (created on every render) break React.memo's shallow comparison, causing every item to re-render even when data is unchanged. |
-| 4 | contains | `getItemType` — FlashList recycling configuration | FlashList needs getItemType for heterogeneous lists to recycle cells correctly. Without it, recycled cells may have mismatched layouts causing visual glitches. |
-| 5 | contains | `Hermes` — JavaScript engine recommendation      | Hermes provides bytecode precompilation for faster startup and improved GC behavior during scroll, directly addressing the 3-second initial render and scroll jank. |
-
-### What a passing response looks like
-
-- Profiling steps using Flipper Performance plugin, React DevTools Profiler, and systrace to identify bottlenecks.
-- Migration from FlatList to FlashList with `estimatedItemSize` and `getItemType` configuration.
-- Item component wrapped in `React.memo` with extracted `useCallback` handlers.
-- Image optimization using `expo-image` or `FastImage` with proper caching and placeholder support.
-- Hermes verification and configuration, with before/after metrics targeting 60 FPS and under 500ms render.

package/workflows/workflows/agent-environment-setup/platforms/copilot/skills/react-native-callstack/evals/evals.json

@@ -1,66 +0,0 @@
-[
-  {
-    "name": "native-module-bridge-turbo",
-    "description": "Validate that the skill produces a correct Turbo Module implementation with TypeScript codegen spec, native platform implementations, and proper JSI integration following the new architecture patterns.",
-    "input": "Build a Turbo Module for a custom biometric authentication feature in React Native. Create the TypeScript codegen spec with methods for checking biometric availability, authenticating with biometrics, and retrieving supported biometric types. Implement the native module for both iOS (Swift/Objective-C++) and Android (Kotlin). Use the new architecture with JSI for synchronous calls. Include proper error handling with typed error codes.",
-    "assertions": [
-      {
-        "type": "contains",
-        "value": "TurboModule",
-        "description": "Must use the TurboModule interface for the native module specification, as this is the new architecture replacement for the legacy Bridge-based NativeModule."
-      },
-      {
-        "type": "contains",
-        "value": "codegenNativeComponent",
-        "description": "Must use React Native's codegen system (codegenNativeComponent or codegenNativeCommands) to generate type-safe native bindings from the TypeScript spec."
-      },
-      {
-        "type": "contains",
-        "value": "getEnforcing",
-        "description": "Must retrieve the native module using TurboModuleRegistry.getEnforcing to ensure the module is available and throw early if registration failed."
-      },
-      {
-        "type": "contains",
-        "value": "Promise",
-        "description": "Biometric authentication methods must return Promises for async operations, as biometric prompts require user interaction and OS-level dialog presentation."
-      },
-      {
-        "type": "contains",
-        "value": "ReactContextBaseJavaModule",
-        "description": "Android implementation must extend ReactContextBaseJavaModule or implement TurboModule interface for proper lifecycle management and React Native integration."
-      }
-    ]
-  },
-  {
-    "name": "performance-optimization",
-    "description": "Validate that the skill produces a comprehensive performance optimization plan with profiling steps, specific optimizations for list rendering, and measurable performance targets.",
-    "input": "Our React Native app has a product catalog screen with 2000+ items that drops to 15 FPS during fast scroll and takes 3 seconds for initial render. Profile and optimize this screen. The current implementation uses FlatList with complex item components that include images, price formatting, and rating stars. Each item has an onPress handler. The screen re-renders entirely when the search filter changes. Target 60 FPS scroll and under 500ms initial render.",
-    "assertions": [
-      {
-        "type": "contains",
-        "value": "FlashList",
-        "description": "Must recommend replacing FlatList with FlashList for large lists, as FlashList uses cell recycling to dramatically reduce memory allocation and improve scroll FPS."
-      },
-      {
-        "type": "contains",
-        "value": "React.memo",
-        "description": "Must wrap list item components with React.memo to prevent re-rendering unchanged items when the parent list re-renders due to data or filter changes."
-      },
-      {
-        "type": "contains",
-        "value": "useCallback",
-        "description": "Must stabilize onPress and other callback props with useCallback to prevent them from breaking React.memo's shallow comparison on every parent render."
-      },
-      {
-        "type": "contains",
-        "value": "getItemType",
-        "description": "Must configure FlashList's estimatedItemSize and getItemType for heterogeneous lists to enable accurate cell recycling and layout estimation."
-      },
-      {
-        "type": "contains",
-        "value": "Hermes",
-        "description": "Must verify or recommend Hermes as the JavaScript engine for faster startup via bytecode precompilation and improved garbage collection during scroll."
-      }
-    ]
-  }
-]