opencode-skills-collection 3.1.12 → 3.1.13

package/bundled-skills/upgrading-expo/references/new-architecture.md

@@ -0,0 +1,79 @@
+# New Architecture
+
+The New Architecture is enabled by default in Expo SDK 53+. It replaces the legacy bridge with a faster, synchronous communication layer between JavaScript and native code.
+
+## Documentation
+
+Full guide: https://docs.expo.dev/guides/new-architecture/
+
+## What Changed
+
+- **JSI (JavaScript Interface)** — Direct synchronous calls between JS and native
+- **Fabric** — New rendering system with concurrent features
+- **TurboModules** — Lazy-loaded native modules with type safety
+
+## SDK Compatibility
+
+| SDK Version | New Architecture Status |
+| ----------- | ----------------------- |
+| SDK 53+     | Enabled by default      |
+| SDK 52      | Opt-in via app.json     |
+| SDK 51-     | Experimental            |
+
+## Configuration
+
+New Architecture is enabled by default. To explicitly disable (not recommended):
+
+```json
+{
+  "expo": {
+    "newArchEnabled": false
+  }
+}
+```
+
+## Expo Go
+
+Expo Go only supports the New Architecture as of SDK 53. Apps using the old architecture must use development builds.
+
+## Common Migration Issues
+
+### Native Module Compatibility
+
+Some older native modules may not support the New Architecture. Check:
+
+1. Module documentation for New Architecture support
+2. GitHub issues for compatibility discussions
+3. Consider alternatives if module is unmaintained
+
+### Reanimated
+
+React Native Reanimated requires `react-native-worklets` in SDK 54+:
+
+```bash
+npx expo install react-native-worklets
+```
+
+### Layout Animations
+
+Some layout animations behave differently. Test thoroughly after upgrading.
+
+## Verifying New Architecture
+
+Check if New Architecture is active:
+
+```tsx
+import { Platform } from "react-native";
+
+// Returns true if Fabric is enabled
+const isNewArch = global._IS_FABRIC !== undefined;
+```
+
+Verify from the command line if the currently running app uses the New Architecture: `bunx xcobra expo eval "_IS_FABRIC"` -> `true`
+
+## Troubleshooting
+
+1. **Clear caches** — `npx expo start --clear`
+2. **Clean prebuild** — `npx expo prebuild --clean`
+3. **Check native modules** — Ensure all dependencies support New Architecture
+4. **Review console warnings** — Legacy modules log compatibility warnings

package/bundled-skills/upgrading-expo/references/react-19.md

@@ -0,0 +1,79 @@
+# React 19
+
+React 19 is included in Expo SDK 54. This release simplifies several common patterns.
+
+## Context Changes
+
+### useContext → use
+
+The `use` hook replaces `useContext`:
+
+```tsx
+// Before (React 18)
+import { useContext } from "react";
+const value = useContext(MyContext);
+
+// After (React 19)
+import { use } from "react";
+const value = use(MyContext);
+```
+
+- The `use` hook can also read promises, enabling Suspense-based data fetching.
+- `use` can be called conditionally, this simplifies components that consume multiple contexts.
+
+### Context.Provider → Context
+
+Context providers no longer need the `.Provider` suffix:
+
+```tsx
+// Before (React 18)
+<ThemeContext.Provider value={theme}>
+  {children}
+</ThemeContext.Provider>
+
+// After (React 19)
+<ThemeContext value={theme}>
+  {children}
+</ThemeContext>
+```
+
+## ref as a Prop
+
+### Removing forwardRef
+
+Components can now receive `ref` as a regular prop. `forwardRef` is no longer needed:
+
+```tsx
+// Before (React 18)
+import { forwardRef } from "react";
+
+const Input = forwardRef<TextInput, Props>((props, ref) => {
+  return <TextInput ref={ref} {...props} />;
+});
+
+// After (React 19)
+function Input({ ref, ...props }: Props & { ref?: React.Ref<TextInput> }) {
+  return <TextInput ref={ref} {...props} />;
+}
+```
+
+### Migration Steps
+
+1. Remove `forwardRef` wrapper
+2. Add `ref` to the props destructuring
+3. Update the type to include `ref?: React.Ref<T>`
+
+## Other React 19 Features
+
+- **Actions** — Functions that handle async transitions
+- **useOptimistic** — Optimistic UI updates
+- **useFormStatus** — Form submission state (web)
+- **Document Metadata** — Native `<title>` and `<meta>` support (web)
+
+## Cleanup Checklist
+
+When upgrading to SDK 54:
+
+- [ ] Replace `useContext` with `use`
+- [ ] Remove `.Provider` from Context components
+- [ ] Remove `forwardRef` wrappers, use `ref` prop instead

package/bundled-skills/upgrading-expo/references/react-compiler.md

@@ -0,0 +1,59 @@
+# React Compiler
+
+React Compiler is stable in Expo SDK 54 and later. It automatically memoizes components and hooks, eliminating the need for manual `useMemo`, `useCallback`, and `React.memo`.
+
+## Enabling React Compiler
+
+Add to `app.json`:
+
+```json
+{
+  "expo": {
+    "experiments": {
+      "reactCompiler": true
+    }
+  }
+}
+```
+
+## What React Compiler Does
+
+- Automatically memoizes components and values
+- Eliminates unnecessary re-renders
+- Removes the need for manual `useMemo` and `useCallback`
+- Works with existing code without modifications
+
+## Cleanup After Enabling
+
+Once React Compiler is enabled, you can remove manual memoization:
+
+```tsx
+// Before (manual memoization)
+const memoizedValue = useMemo(() => computeExpensive(a, b), [a, b]);
+const memoizedCallback = useCallback(() => doSomething(a), [a]);
+const MemoizedComponent = React.memo(MyComponent);
+
+// After (React Compiler handles it)
+const value = computeExpensive(a, b);
+const callback = () => doSomething(a);
+// Just use MyComponent directly
+```
+
+## Requirements
+
+- Expo SDK 54 or later
+- New Architecture enabled (default in SDK 54+)
+
+## Verifying It's Working
+
+React Compiler runs at build time. Check the Metro bundler output for compilation messages. You can also use React DevTools to verify components are being optimized.
+
+## Troubleshooting
+
+If you encounter issues:
+
+1. Ensure New Architecture is enabled
+2. Clear Metro cache: `npx expo start --clear`
+3. Check for incompatible patterns in your code (rare)
+
+React Compiler is designed to work with idiomatic React code. If it can't safely optimize a component, it skips that component without breaking your app.

package/bundled-skills/upgrading-expo/references/react-navigation-to-expo-router.md

@@ -0,0 +1,61 @@
+# Migrating from react-navigation to expo-router
+
+In SDK 56+, application code must not import from `@react-navigation/*` directly. Repoint those imports to the matching `expo-router` entry points. Runtime API is unchanged — only the module specifiers move.
+
+## Steps
+
+1. Prefer the automated codemod (see below). If it is not viable, fall back to the manual mapping.
+2. Replace imports using the table. Use the entry point that matches the `@react-navigation/*` source.
+3. After rewriting, check whether any of the rewritten imports are deprecated in `expo-router` (see [Check for deprecated imports](#check-for-deprecated-imports)). If so, surface the deprecation reason and the suggested replacement to the user before continuing.
+4. Validate: search for remaining `@react-navigation/` references in source files, then run typecheck/build/start.
+5. Remove `@react-navigation/*` packages that are no longer imported from `package.json` and reinstall (delete `node_modules` if needed).
+
+## Automated migration (preferred)
+
+Run from the project root over your application code (replace `src` with the actual directory or glob):
+
+```sh
+npx expo-codemod sdk-56-expo-router-react-navigation-replace src
+```
+
+```sh
+npx expo-codemod sdk-56-expo-router-react-navigation-replace '**/*.{ts,tsx,js,jsx}'
+```
+
+## Manual API mapping
+
+| React Navigation source               | Expo Router target                                                       |
+| ------------------------------------- | ------------------------------------------------------------------------ |
+| `@react-navigation/native`            | `expo-router/react-navigation`                                           |
+| `@react-navigation/core`              | `expo-router/react-navigation`                                           |
+| `@react-navigation/elements`          | `expo-router/react-navigation`                                           |
+| `@react-navigation/routers`           | `expo-router/react-navigation`                                           |
+| `@react-navigation/stack`             | `expo-router/js-stack`                                                   |
+| `@react-navigation/bottom-tabs`       | `expo-router/js-tabs`                                                    |
+| `@react-navigation/material-top-tabs` | `expo-router/js-top-tabs`                                                |
+| `@react-navigation/native-stack`      | No direct equivalent. Use the `Stack` layout from `expo-router` instead. |
+
+**Stack caveat:** Do NOT rewrite `import { Stack } from "expo-router"` to `expo-router/js-stack`. The root `Stack` is the Expo Router layout component used in route files; only use `expo-router/js-stack` when replacing a `@react-navigation/stack` JS stack navigator.
+
+If you encounter a symbol that has no replacement, ask the user to file an issue in the `expo/expo` repository describing what is needed and why.
+
+## Check for deprecated imports
+
+A successful rewrite to `expo-router/*` does not guarantee the new import is the recommended one. Some symbols are re-exported as deprecated shims and the project may need to migrate further (for example, to a different `expo-router` API or to a first-party Expo package).
+
+For each symbol rewritten in step 2:
+
+1. Resolve the rewritten module to its source in `node_modules` (e.g., `node_modules/expo-router/build/react-navigation.d.ts`, `js-stack`, `js-tabs`, `js-top-tabs`).
+2. Look for a `@deprecated` JSDoc tag on the named export, or a runtime deprecation warning in the implementation file.
+3. If deprecated, capture both the reason and the recommended replacement from the JSDoc/comment.
+4. Report each deprecated symbol to the user with: the import path, the symbol, the deprecation reason, and the suggested replacement. Wait for the user to confirm before mass-applying further changes.
+
+## Done when
+
+1. No `@react-navigation/*` imports remain in source files.
+2. No unused `@react-navigation/*` entries remain in `package.json`.
+3. Typecheck and bundler start without `@react-navigation/*` errors.
+
+## Reference
+
+- Official Expo Router SDK 55 → 56 migration guide: https://docs.expo.dev/router/migrate/sdk-55-to-56

package/bundled-skills/usage-based-pricing/README.md

@@ -0,0 +1,40 @@
+# Usage-Based Pricing
+
+Design pricing models that developers understand, accept, and can predict.
+
+## What This Skill Covers
+
+- **Usage metrics developers accept** - Good vs problematic metrics, selection framework
+- **Pricing page clarity** - Essential elements, communication principles
+- **Cost predictability and caps** - Dashboards, alerts, cap implementation
+- **Billing transparency** - Detailed invoices, usage visibility, API access
+- **Communicating value vs cost** - Alternative comparisons, ROI calculators
+- **Competitive pricing research** - Landscape mapping, position options, testing
+
+## Key Principle
+
+Developers are uniquely sensitive to pricing. They calculate unit economics, compare alternatives, and share horror stories about surprise bills. The best developer pricing is predictable, transparent, and obviously fair. Developers should estimate their bill before they commit.
+
+## Quick Reference
+
+**Good usage metrics:**
+- API calls/requests
+- Compute time (GB-seconds)
+- Storage (GB)
+- Bandwidth (GB)
+- Active users (for user-facing tools)
+
+**Avoid:**
+- Proprietary "compute units"
+- Compound metrics
+- Hidden multipliers
+- Metrics that punish success
+
+## When to Use This Skill
+
+- Designing new product pricing
+- Improving pricing page conversion
+- Reducing billing complaints
+- Adding spending caps and alerts
+- Competitive pricing analysis
+- Justifying premium pricing