opencode-skills-collection 3.1.12 → 3.1.14

package/bundled-skills/bug-hunt-swarm/SKILL.md

@@ -0,0 +1,189 @@
+---
+name: bug-hunt-swarm
+description: Parallel read-only multi-agent root-cause investigation for bugs, regressions, crashes, flaky behavior, or unexplained failures. Use when the user asks to investigate a bug, find the root cause, trace a regression, understand why something broke, or wants a ranked diagnosis with the...
+risk: unknown
+source: https://github.com/Dimillian/Skills/tree/main/bug-hunt-swarm
+source_repo: Dimillian/Skills
+source_type: community
+date_added: 2026-07-01
+license: MIT
+license_source: https://github.com/Dimillian/Skills/blob/main/LICENSE
+---
+
+# Bug Hunt Swarm
+## When to Use
+
+Use this skill when you need parallel read-only multi-agent root-cause investigation for bugs, regressions, crashes, flaky behavior, or unexplained failures. Use when the user asks to investigate a bug, find the root cause, trace a regression, understand why something broke, or wants a ranked diagnosis with the...
+
+
+Investigate a bug with four read-only sub-agents in parallel, then have the main agent rank the likely causes and recommend the fastest path to prove or fix the issue. This skill is diagnosis-first: do not edit files or implement fixes as part of this workflow.
+
+## Step 1: Build the Bug Packet
+
+Start by collecting the smallest useful investigation packet:
+
+1. Symptom
+2. Expected behavior
+3. Actual behavior
+4. Reproduction steps, if known
+5. Scope of impact
+6. Relevant evidence, such as logs, stack traces, failing tests, screenshots, recent diffs, or environment details
+
+Prefer this source order:
+
+1. Direct user description
+2. Explicit files, stack traces, logs, tests, or screenshots provided by the user
+3. Current git changes or recent repo history when the bug appears regression-like
+4. The smallest relevant code path or subsystem surrounding the failure
+
+If the bug report is underspecified, infer a minimal problem statement and say what is still unknown.
+
+Before launching sub-agents, read the closest project instructions and relevant docs for the touched area, such as:
+
+- `AGENTS.md`
+- repo workflow docs
+- architecture, state, routing, schema, or runtime docs for the affected subsystem
+
+## Step 2: Bound the Investigation
+
+Write a short investigation brief for the swarm:
+
+1. What appears broken
+2. What is not yet proven
+3. What part of the system is most likely involved
+4. What evidence already exists
+5. What kind of proof would count as confirmation
+
+Use read-only evidence gathering where useful:
+
+- `rg`, `git diff`, `git log`, `git show`
+- reading logs, crash traces, and config
+- existing test runs or the smallest safe reproduction command
+
+Do not edit files, inject new instrumentation, or implement fixes as part of this skill.
+
+## Step 3: Launch Four Read-Only Investigators in Parallel
+
+Launch four sub-agents when the problem is large or ambiguous enough that parallel investigation helps. For a tiny and obvious issue, it is acceptable to investigate locally instead.
+
+For every sub-agent:
+
+- give the same bug packet and investigation brief
+- state that the sub-agent is read-only
+- do not let the sub-agent edit files, run `apply_patch`, stage changes, commit, or perform any other state-mutating action
+- ask for concise investigation output only
+- ask for: hypothesis, supporting evidence, missing evidence, smallest proof step, and confidence
+- tell the sub-agent to avoid generic code quality feedback, nits, or speculative guesses without evidence
+- tell the sub-agent to send findings back to the main agent only
+
+Use these four investigation roles.
+
+### Sub-Agent 1: Reproduction and Scope Investigation
+
+Clarify the exact failure shape and its boundaries.
+
+Check for:
+
+1. The narrowest reliable trigger
+2. Conditions that make the bug appear or disappear
+3. Expected versus actual behavior at the failure boundary
+4. Whether the impact is local, cross-cutting, deterministic, or flaky
+
+This sub-agent is read-only. It must not edit files, apply patches, or make any other workspace changes.
+
+Recommended sub-agent role: `reviewer`
+
+### Sub-Agent 2: Code Path and Failure Seam Investigation
+
+Trace the most likely execution path and identify the seam where behavior diverges.
+
+Check for:
+
+1. State transitions, lifecycle edges, or ordering problems
+2. Mismatched assumptions between caller and callee
+3. Data-flow or control-flow breaks
+4. The smallest code region most likely responsible for the failure
+
+This sub-agent is read-only. It must not edit files, apply patches, or make any other workspace changes.
+
+Recommended sub-agent role: `explorer` for broad tracing, or `reviewer` when a stronger local reasoning pass is more useful
+
+### Sub-Agent 3: Recent Change and Regression Investigation
+
+Look for likely regressors in nearby history or changed contracts.
+
+Check for:
+
+1. Recent diffs that correlate with the symptom
+2. Config, flag, dependency, schema, or migration drift
+3. Partial updates where several entry points should have changed together
+4. Behavior changes that fit the timing of the bug report
+
+This sub-agent is read-only. It must not edit files, apply patches, or make any other workspace changes.
+
+Recommended sub-agent role: `reviewer`
+
+### Sub-Agent 4: Proof Plan and Observability Investigation
+
+Determine the fastest way to confirm or reject the leading hypotheses.
+
+Check for:
+
+1. The smallest existing test or reproduction that should fail
+2. The most useful current logs, traces, metrics, or assertions
+3. A minimal non-mutating command that could raise confidence quickly
+4. What evidence is missing and how to collect it without broad churn
+
+This sub-agent is read-only. It must not edit files, apply patches, or make any other workspace changes.
+
+Recommended sub-agent role: `reviewer`
+
+Report only hypotheses that materially improve the odds of finding the real cause. It is better to return two evidence-backed theories than six vague guesses.
+
+## Step 4: Synthesize Ranked Hypotheses
+
+The main agent owns synthesis. Treat sub-agent output as raw investigation input, not final output.
+
+Merge and rank the hypotheses:
+
+- combine duplicates
+- discard weak speculation
+- prefer evidence over elegance
+- separate likely root causes from mere contributing factors
+- keep alternate theories only when they remain plausible
+
+Normalize the surviving hypotheses into this shape:
+
+1. Hypothesis
+2. Supporting evidence
+3. Missing or conflicting evidence
+4. Smallest proof step
+5. Confidence: high, medium, or low
+
+If the evidence is too weak for a real ranking, say so directly and present the leading open questions instead.
+
+## Step 5: Output a Clear Diagnosis Path
+
+Present the result in this order:
+
+1. Most likely root cause
+2. Plausible alternate causes, if any
+3. Fastest proof step
+4. Recommended fix path
+5. Open questions or blockers
+
+When the fix is not yet clear, recommend the next proving step instead of pretending the diagnosis is complete.
+
+When helpful, group actions into:
+
+- `prove now`
+- `fix next`
+- `follow up later`
+
+Do not implement fixes as part of this skill. The output is a read-only diagnosis with a prioritized path forward.
+
+## Limitations
+
+- Use this skill only when the task clearly matches its upstream source and local project context.
+- Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
+- Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

package/bundled-skills/bug-hunt-swarm/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Bug Hunt Swarm"
+  short_description: "Parallel multi-agent root cause hunt"
+  default_prompt: "Use $bug-hunt-swarm to investigate this bug with four read-only lanes and return the most likely root cause plus the fastest proof path."

package/bundled-skills/building-native-ui/SKILL.md

@@ -2,17 +2,19 @@
 name: building-native-ui
 description: Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
 risk: unknown
-source: community
-version: 1.0.1
+source: https://github.com/expo/skills/tree/main/plugins/expo/skills/building-native-ui
+source_repo: expo/skills
+source_type: official
+date_added: 2026-07-01
 license: MIT
+license_source: https://github.com/expo/skills/blob/main/LICENSE
 ---
 
 # Expo UI Guidelines
-
 ## When to Use
-- You are building a native-feeling Expo Router application and need guidance on navigation, controls, effects, or platform-specific UI.
-- You need to decide whether Expo Go is sufficient or a custom native build is actually required.
-- The task involves modern Expo UI patterns across animations, tabs, headers, storage, media, or visual effects.
+
+Use this skill when you need complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
+
 
 ## References
 
@@ -22,7 +24,7 @@ Consult these resources as needed:
 references/
   animations.md          Reanimated: entering, exiting, layout, scroll-driven, gestures
   controls.md            Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker
-  form-sheet.md          Form sheets in expo-router: configuration, footers and background interaction. 
+  form-sheet.md          Form sheets in expo-router: configuration, footers and background interaction.
   gradients.md           CSS gradients via experimental_backgroundImage (New Arch only)
   icons.md               SF Symbols via expo-image (sf: source), names, animations, weights
   media.md               Camera, audio, video, and file saving
@@ -95,6 +97,8 @@ See `./references/route-structure.md` for detailed route conventions.
 - `React.use` not `React.useContext`
 - `expo-image` Image component instead of intrinsic element `img`
 - `expo-glass-effect` for liquid glass backdrops
+- `Color` from `expo-router` for native semantic colors, not raw `PlatformColor` (type-safe, auto-adapts to light/dark)
+- In SDK 56+, never import from `@react-navigation/*` directly — use `expo-router/react-navigation` instead (covers `@react-navigation/native`, `/core`, `/elements`, `/routers`)
 
 ## Responsiveness
 
@@ -132,6 +136,58 @@ Follow Apple Human Interface Guidelines.
 - When padding a ScrollView, use `contentContainerStyle` padding and gap instead of padding on the ScrollView itself (reduces clipping)
 - CSS and Tailwind are not supported - use inline styles
 
+## Colors
+
+Use the `Color` API from `expo-router` for native semantic colors. It is a type-safe wrapper over `PlatformColor` that exposes iOS UIKit colors through `Color.ios.*` and Android Material 3 colors through `Color.android.material.*` (static) or `Color.android.dynamic.*` (adapts to the user's wallpaper on Android 12+). These resolve on-device and automatically adapt to light/dark mode and accessibility settings, so you no longer maintain separate light/dark hex tables or a `colors.web.ts` file.
+
+`Color` is platform-specific, so wrap each value in `Platform.select` with a `default` hex fallback for web. Centralize the palette in `theme/colors.ts` and import `colors` everywhere:
+
+```tsx
+// theme/colors.ts
+import { Platform } from "react-native";
+import { Color } from "expo-router";
+
+export const colors = {
+  label: Platform.select({
+    ios: Color.ios.label,
+    android: Color.android.dynamic.onSurface,
+    default: "#000000",
+  })!,
+  secondaryLabel: Platform.select({
+    ios: Color.ios.secondaryLabel,
+    android: Color.android.dynamic.onSurfaceVariant,
+    default: "#3c3c43",
+  })!,
+  separator: Platform.select({
+    ios: Color.ios.separator,
+    android: Color.android.dynamic.outlineVariant,
+    default: "#c6c6c8",
+  })!,
+  systemBackground: Platform.select({
+    ios: Color.ios.systemBackground,
+    android: Color.android.dynamic.surface,
+    default: "#ffffff",
+  })!,
+  systemBlue: Platform.select({
+    ios: Color.ios.systemBlue,
+    android: Color.android.dynamic.primary,
+    default: "#007aff",
+  })!,
+};
+```
+
+```tsx
+import { colors } from "@/theme/colors";
+
+<View style={{ backgroundColor: colors.systemBackground }}>
+  <Text style={{ color: colors.label }}>Title</Text>
+</View>;
+```
+
+- iOS re-resolves these colors automatically when the system theme changes. On Android, call `useColorScheme()` inside any component that renders them so it re-renders when the theme flips (required when React Compiler memoizes the component).
+- Don't pass `Color` / `PlatformColor` values into Reanimated styles — use static colors there (see `references/animations.md`).
+- `Platform.select({...})!` returns `string | OpaqueColorValue`. Most React Native style props accept `ColorValue` (`string | OpaqueColorValue`) so this works fine. But some third-party props only accept `string` (e.g. `tintColor` on `expo-image`). Cast when needed: `colors.label as string`.
+
 ## Text Styling
 
 - Add the `selectable` prop to every `<Text/>` element displaying important data or error messages
@@ -278,20 +334,22 @@ app/
 
 ```tsx
 // app/_layout.tsx
-import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs";
-import { Theme } from "../components/theme";
+import { NativeTabs } from "expo-router/unstable-native-tabs";
+import { ThemeProvider, DarkTheme, DefaultTheme } from "expo-router/react-navigation";
+import { useColorScheme } from "react-native";
 
 export default function Layout() {
+  const colorScheme = useColorScheme();
   return (
-    <Theme>
+    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
       <NativeTabs>
         <NativeTabs.Trigger name="(index)">
-          <Icon sf="list.dash" />
-          <Label>Items</Label>
+          <NativeTabs.Trigger.Icon sf="list.dash" md="list" />
+          <NativeTabs.Trigger.Label>Items</NativeTabs.Trigger.Label>
         </NativeTabs.Trigger>
         <NativeTabs.Trigger name="(search)" role="search" />
       </NativeTabs>
-    </Theme>
+    </ThemeProvider>
   );
 }
 ```
@@ -301,7 +359,7 @@ Create a shared group route so both tabs can push common screens:
 ```tsx
 // app/(index,search)/_layout.tsx
 import { Stack } from "expo-router/stack";
-import { PlatformColor } from "react-native";
+import { colors } from "@/theme/colors";
 
 export default function Layout({ segment }) {
   const screen = segment.match(/\((.*)\)/)?.[1]!;
@@ -314,7 +372,7 @@ export default function Layout({ segment }) {
         headerShadowVisible: false,
         headerLargeTitleShadowVisible: false,
         headerLargeStyle: { backgroundColor: "transparent" },
-        headerTitleStyle: { color: PlatformColor("label") },
+        headerTitleStyle: { color: colors.label },
         headerLargeTitle: true,
         headerBlurEffect: "none",
         headerBackButtonDisplayMode: "minimal",
@@ -328,6 +386,7 @@ export default function Layout({ segment }) {
 ```
 
 ## Limitations
-- Use this skill only when the task clearly matches the scope described above.
-- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
-- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
+
+- Use this skill only when the task clearly matches its upstream product or API scope.
+- Verify commands, API behavior, pricing, quotas, credentials, and deployment effects against current official documentation before making changes.
+- Do not treat generated examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

package/bundled-skills/building-native-ui/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Building Native UI"
+  short_description: "Build beautiful Expo Router UI with native-feeling navigation, controls, media, animation, and visual effects"
+  default_prompt: "Use $building-native-ui to build or refactor Expo Router UI, choose native-feeling navigation and controls, structure routes, style screens, and decide when Expo Go is enough before creating native builds."

package/bundled-skills/building-native-ui/references/animations.md

@@ -0,0 +1,220 @@
+# Animations
+
+Use Reanimated v4. Avoid React Native's built-in Animated API.
+
+## Entering and Exiting Animations
+
+Use Animated.View with entering and exiting animations. Layout animations can animate state changes.
+
+```tsx
+import Animated, {
+  FadeIn,
+  FadeOut,
+  LinearTransition,
+} from "react-native-reanimated";
+
+function App() {
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      layout={LinearTransition}
+    />
+  );
+}
+```
+
+## On-Scroll Animations
+
+Create high-performance scroll animations using Reanimated's hooks:
+
+```tsx
+import Animated, {
+  useAnimatedRef,
+  useScrollViewOffset,
+  useAnimatedStyle,
+  interpolate,
+} from "react-native-reanimated";
+
+function Page() {
+  const ref = useAnimatedRef();
+  const scroll = useScrollViewOffset(ref);
+
+  const style = useAnimatedStyle(() => ({
+    opacity: interpolate(scroll.value, [0, 30], [0, 1], "clamp"),
+  }));
+
+  return (
+    <Animated.ScrollView ref={ref}>
+      <Animated.View style={style} />
+    </Animated.ScrollView>
+  );
+}
+```
+
+## Common Animation Presets
+
+### Entering Animations
+
+- `FadeIn`, `FadeInUp`, `FadeInDown`, `FadeInLeft`, `FadeInRight`
+- `SlideInUp`, `SlideInDown`, `SlideInLeft`, `SlideInRight`
+- `ZoomIn`, `ZoomInUp`, `ZoomInDown`
+- `BounceIn`, `BounceInUp`, `BounceInDown`
+
+### Exiting Animations
+
+- `FadeOut`, `FadeOutUp`, `FadeOutDown`, `FadeOutLeft`, `FadeOutRight`
+- `SlideOutUp`, `SlideOutDown`, `SlideOutLeft`, `SlideOutRight`
+- `ZoomOut`, `ZoomOutUp`, `ZoomOutDown`
+- `BounceOut`, `BounceOutUp`, `BounceOutDown`
+
+### Layout Animations
+
+- `LinearTransition` — Smooth linear interpolation
+- `SequencedTransition` — Sequenced property changes
+- `FadingTransition` — Fade between states
+
+## Customizing Animations
+
+```tsx
+<Animated.View
+  entering={FadeInDown.duration(500).delay(200)}
+  exiting={FadeOut.duration(300)}
+/>
+```
+
+### Modifiers
+
+```tsx
+// Duration in milliseconds
+FadeIn.duration(300);
+
+// Delay before starting
+FadeIn.delay(100);
+
+// Spring physics
+FadeIn.springify();
+FadeIn.springify().damping(15).stiffness(100);
+
+// Easing curves
+FadeIn.easing(Easing.bezier(0.25, 0.1, 0.25, 1));
+
+// Chaining
+FadeInDown.duration(400).delay(200).springify();
+```
+
+## Shared Value Animations
+
+For imperative control over animations:
+
+```tsx
+import {
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+
+const offset = useSharedValue(0);
+
+// Spring animation
+offset.value = withSpring(100);
+
+// Timing animation
+offset.value = withTiming(100, { duration: 300 });
+
+// Use in styles
+const style = useAnimatedStyle(() => ({
+  transform: [{ translateX: offset.value }],
+}));
+```
+
+## Gesture Animations
+
+Combine with React Native Gesture Handler:
+
+```tsx
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withSpring,
+} from "react-native-reanimated";
+
+function DraggableBox() {
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const gesture = Gesture.Pan()
+    .onUpdate((e) => {
+      translateX.value = e.translationX;
+      translateY.value = e.translationY;
+    })
+    .onEnd(() => {
+      translateX.value = withSpring(0);
+      translateY.value = withSpring(0);
+    });
+
+  const style = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+    ],
+  }));
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.box, style]} />
+    </GestureDetector>
+  );
+}
+```
+
+## Keyboard Animations
+
+Animate with keyboard height changes:
+
+```tsx
+import Animated, {
+  useAnimatedKeyboard,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+
+function KeyboardAwareView() {
+  const keyboard = useAnimatedKeyboard();
+
+  const style = useAnimatedStyle(() => ({
+    paddingBottom: keyboard.height.value,
+  }));
+
+  return <Animated.View style={style}>{/* content */}</Animated.View>;
+}
+```
+
+## Staggered List Animations
+
+Animate list items with delays:
+
+```tsx
+{
+  items.map((item, index) => (
+    <Animated.View
+      key={item.id}
+      entering={FadeInUp.delay(index * 50)}
+      exiting={FadeOutUp}
+    >
+      <ListItem item={item} />
+    </Animated.View>
+  ));
+}
+```
+
+## Best Practices
+
+- Add entering and exiting animations for state changes
+- Use layout animations when items are added/removed from lists
+- Use `useAnimatedStyle` for scroll-driven animations
+- Prefer `interpolate` with "clamp" for bounded values
+- You can't pass `Color` (from expo-router) or `PlatformColor` values to reanimated views or styles; use static colors instead
+- Keep animations under 300ms for responsive feel
+- Use spring animations for natural movement
+- Avoid animating layout properties (width, height) when possible — prefer transforms