opencode-skills-collection 3.1.12 → 3.1.13

package/bundled-skills/use-dom/SKILL.md

@@ -0,0 +1,428 @@
+---
+name: use-dom
+description: Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
+risk: unknown
+source: https://github.com/expo/skills/tree/main/plugins/expo/skills/use-dom
+source_repo: expo/skills
+source_type: official
+date_added: 2026-07-01
+license: MIT
+license_source: https://github.com/expo/skills/blob/main/LICENSE
+---
+
+## What are DOM Components?
+
+DOM components allow web code to run verbatim in a webview on native platforms while rendering as-is on web. This enables using web-only libraries like `recharts`, `react-syntax-highlighter`, or any React web library in your Expo app without modification.
+
+## When to Use DOM Components
+
+Use DOM components when you need:
+
+- **Web-only libraries** — Charts (recharts, chart.js), syntax highlighters, rich text editors, or any library that depends on DOM APIs
+- **Migrating web code** — Bring existing React web components to native without rewriting
+- **Complex HTML/CSS layouts** — When CSS features aren't available in React Native
+- **iframes or embeds** — Embedding external content that requires a browser context
+- **Canvas or WebGL** — Web graphics APIs not available natively
+
+## When NOT to Use DOM Components
+
+Avoid DOM components when:
+
+- **Native performance is critical** — Webviews add overhead
+- **Simple UI** — React Native components are more efficient for basic layouts
+- **Deep native integration** — Use local modules instead for native APIs
+- **Layout routes** — `_layout` files cannot be DOM components
+
+## Basic DOM Component
+
+Create a new file with the `'use dom';` directive at the top:
+
+```tsx
+// components/WebChart.tsx
+"use dom";
+
+export default function WebChart({
+  data,
+}: {
+  data: number[];
+  dom: import("expo/dom").DOMProps;
+}) {
+  return (
+    <div style={{ padding: 20 }}>
+      <h2>Chart Data</h2>
+      <ul>
+        {data.map((value, i) => (
+          <li key={i}>{value}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+## Rules for DOM Components
+
+1. **Must have `'use dom';` directive** at the top of the file
+2. **Single default export** — One React component per file
+3. **Own file** — Cannot be defined inline or combined with native components
+4. **Serializable props only** — Strings, numbers, booleans, arrays, plain objects
+5. **Include CSS in the component file** — DOM components run in isolated context
+
+## The `dom` Prop
+
+Every DOM component receives a special `dom` prop for webview configuration. Always type it in your props:
+
+```tsx
+"use dom";
+
+interface Props {
+  content: string;
+  dom: import("expo/dom").DOMProps;
+}
+
+export default function MyComponent({ content }: Props) {
+  return <div>{content}</div>;
+}
+```
+
+### Common `dom` Prop Options
+
+```tsx
+// Disable body scrolling
+<DOMComponent dom={{ scrollEnabled: false }} />
+
+// Flow under the notch (disable safe area insets)
+<DOMComponent dom={{ contentInsetAdjustmentBehavior: "never" }} />
+
+// Control size manually
+<DOMComponent dom={{ style: { width: 300, height: 400 } }} />
+
+// Combine options
+<DOMComponent
+  dom={{
+    scrollEnabled: false,
+    contentInsetAdjustmentBehavior: "never",
+    style: { width: '100%', height: 500 }
+  }}
+/>
+```
+
+## Exposing Native Actions to the Webview
+
+Pass async functions as props to expose native functionality to the DOM component:
+
+```tsx
+// app/index.tsx (native)
+import { Alert } from "react-native";
+import DOMComponent from "@/components/dom-component";
+
+export default function Screen() {
+  return (
+    <DOMComponent
+      showAlert={async (message: string) => {
+        Alert.alert("From Web", message);
+      }}
+      saveData={async (data: { name: string; value: number }) => {
+        // Save to native storage, database, etc.
+        console.log("Saving:", data);
+        return { success: true };
+      }}
+    />
+  );
+}
+```
+
+```tsx
+// components/dom-component.tsx
+"use dom";
+
+interface Props {
+  showAlert: (message: string) => Promise<void>;
+  saveData: (data: {
+    name: string;
+    value: number;
+  }) => Promise<{ success: boolean }>;
+  dom?: import("expo/dom").DOMProps;
+}
+
+export default function DOMComponent({ showAlert, saveData }: Props) {
+  const handleClick = async () => {
+    await showAlert("Hello from the webview!");
+    const result = await saveData({ name: "test", value: 42 });
+    console.log("Save result:", result);
+  };
+
+  return <button onClick={handleClick}>Trigger Native Action</button>;
+}
+```
+
+## Using Web Libraries
+
+DOM components can use any web library:
+
+```tsx
+// components/syntax-highlight.tsx
+"use dom";
+
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { docco } from "react-syntax-highlighter/dist/esm/styles/hljs";
+
+interface Props {
+  code: string;
+  language: string;
+  dom?: import("expo/dom").DOMProps;
+}
+
+export default function SyntaxHighlight({ code, language }: Props) {
+  return (
+    <SyntaxHighlighter language={language} style={docco}>
+      {code}
+    </SyntaxHighlighter>
+  );
+}
+```
+
+```tsx
+// components/chart.tsx
+"use dom";
+
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+} from "recharts";
+
+interface Props {
+  data: Array<{ name: string; value: number }>;
+  dom: import("expo/dom").DOMProps;
+}
+
+export default function Chart({ data }: Props) {
+  return (
+    <LineChart width={400} height={300} data={data}>
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis dataKey="name" />
+      <YAxis />
+      <Tooltip />
+      <Line type="monotone" dataKey="value" stroke="#8884d8" />
+    </LineChart>
+  );
+}
+```
+
+## CSS in DOM Components
+
+CSS imports must be in the DOM component file since they run in isolated context:
+
+```tsx
+// components/styled-component.tsx
+"use dom";
+
+import "@/styles.css"; // CSS file in same directory
+
+export default function StyledComponent({
+  dom,
+}: {
+  dom: import("expo/dom").DOMProps;
+}) {
+  return (
+    <div className="container">
+      <h1 className="title">Styled Content</h1>
+    </div>
+  );
+}
+```
+
+Or use inline styles / CSS-in-JS:
+
+```tsx
+"use dom";
+
+const styles = {
+  container: {
+    padding: 20,
+    backgroundColor: "#f0f0f0",
+  },
+  title: {
+    fontSize: 24,
+    color: "#333",
+  },
+};
+
+export default function StyledComponent({
+  dom,
+}: {
+  dom: import("expo/dom").DOMProps;
+}) {
+  return (
+    <div style={styles.container}>
+      <h1 style={styles.title}>Styled Content</h1>
+    </div>
+  );
+}
+```
+
+## Expo Router in DOM Components
+
+The expo-router `<Link />` component and router API work inside DOM components:
+
+```tsx
+"use dom";
+
+import { Link, useRouter } from "expo-router";
+
+export default function Navigation({
+  dom,
+}: {
+  dom: import("expo/dom").DOMProps;
+}) {
+  const router = useRouter();
+
+  return (
+    <nav>
+      <Link href="/about">About</Link>
+      <button onClick={() => router.push("/settings")}>Settings</button>
+    </nav>
+  );
+}
+```
+
+### Router APIs That Require Props
+
+These hooks don't work directly in DOM components because they need synchronous access to native routing state:
+
+- `useLocalSearchParams()`
+- `useGlobalSearchParams()`
+- `usePathname()`
+- `useSegments()`
+- `useRootNavigation()`
+- `useRootNavigationState()`
+
+**Solution:** Read these values in the native parent and pass as props:
+
+```tsx
+// app/[id].tsx (native)
+import { useLocalSearchParams, usePathname } from "expo-router";
+import DOMComponent from "@/components/dom-component";
+
+export default function Screen() {
+  const { id } = useLocalSearchParams();
+  const pathname = usePathname();
+
+  return <DOMComponent id={id as string} pathname={pathname} />;
+}
+```
+
+```tsx
+// components/dom-component.tsx
+"use dom";
+
+interface Props {
+  id: string;
+  pathname: string;
+  dom?: import("expo/dom").DOMProps;
+}
+
+export default function DOMComponent({ id, pathname }: Props) {
+  return (
+    <div>
+      <p>Current ID: {id}</p>
+      <p>Current Path: {pathname}</p>
+    </div>
+  );
+}
+```
+
+## Detecting DOM Environment
+
+Check if code is running in a DOM component:
+
+```tsx
+"use dom";
+
+import { IS_DOM } from "expo/dom";
+
+export default function Component({
+  dom,
+}: {
+  dom?: import("expo/dom").DOMProps;
+}) {
+  return <div>{IS_DOM ? "Running in DOM component" : "Running natively"}</div>;
+}
+```
+
+## Assets
+
+Prefer requiring assets instead of using the public directory:
+
+```tsx
+"use dom";
+
+// Good - bundled with the component
+const logo = require("../assets/logo.png");
+
+export default function Component({
+  dom,
+}: {
+  dom: import("expo/dom").DOMProps;
+}) {
+  return <img src={logo} alt="Logo" />;
+}
+```
+
+## Usage from Native Components
+
+Import and use DOM components like regular components:
+
+```tsx
+// app/index.tsx
+import { View, Text } from "react-native";
+import WebChart from "@/components/web-chart";
+import CodeBlock from "@/components/code-block";
+
+export default function HomeScreen() {
+  return (
+    <View style={{ flex: 1 }}>
+      <Text>Native content above</Text>
+
+      <WebChart data={[10, 20, 30, 40, 50]} dom={{ style: { height: 300 } }} />
+
+      <CodeBlock
+        code="const x = 1;"
+        language="javascript"
+        dom={{ scrollEnabled: true }}
+      />
+
+      <Text>Native content below</Text>
+    </View>
+  );
+}
+```
+
+## Platform Behavior
+
+| Platform | Behavior                            |
+| -------- | ----------------------------------- |
+| iOS      | Rendered in WKWebView               |
+| Android  | Rendered in WebView                 |
+| Web      | Rendered as-is (no webview wrapper) |
+
+On web, the `dom` prop is ignored since no webview is needed.
+
+## Tips
+
+- DOM components hot reload during development
+- Keep DOM components focused — don't put entire screens in webviews
+- Use native components for navigation chrome, DOM components for specialized content
+- Test on all platforms — web rendering may differ slightly from native webviews
+- Large DOM components may impact performance — profile if needed
+- The webview has its own JavaScript context — cannot directly share state with native
+
+## Limitations
+
+- 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/use-dom/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Use DOM"
+  short_description: "Use Expo DOM components to run web React code in native webviews and unchanged on web"
+  default_prompt: "Use $use-dom to migrate web components into Expo via 'use dom', configure DOM props, expose native actions safely, use web-only libraries, and keep DOM components separate from native routes."

package/bundled-skills/ux-audit/SKILL.md

@@ -1,66 +1,134 @@
 ---
 name: ux-audit
-description: "Audit screens against Nielsen's heuristics and mobile UX best practices using the StyleSeed Toss design language as the implementation context."
-category: design
-risk: safe
-source: community
+description: Audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices
+risk: unknown
+source: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-audit
 source_repo: bitjaru/styleseed
 source_type: community
-date_added: "2026-04-08"
-author: bitjaru
-tags: [ux, audit, usability, mobile, styleseed]
-tools: [claude, cursor, codex, gemini]
+date_added: 2026-07-01
+license: MIT
+license_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE
 ---
 
 # UX Audit
+## When to Use
 
-## Overview
+Use this skill when you need audit screens for UX issues using Nielsen's heuristics and modern mobile UX best practices.
 
-Part of [StyleSeed](https://github.com/bitjaru/styleseed), this skill audits usability rather than just visuals. It uses Nielsen's 10 heuristics plus modern mobile UX expectations to find issues in navigation, feedback, recovery, hierarchy, and cognitive load.
 
-## When to Use
-- Use when a screen feels awkward even though the code and styling seem correct
-- Use when evaluating a flow before or after implementation
-- Use when reviewing a mobile-first product for usability regressions
-- Use when you want findings framed as user experience problems with remediation
+## When NOT to use
+
+- For accessibility-only issues → use `/ss-a11y`
+- For design system token/golden-rule compliance → use `/ss-review`
+- For copy/microcopy quality → use `/ss-copy`
+- For brand new screens that don't exist yet — design first with `/ss-page` or `/ss-flow`
+
+Target: **$ARGUMENTS**
 
 ## Audit Framework
 
-Review the target against:
-- visibility of system status
-- match between system and real-world language
-- user control and freedom
-- consistency and standards
-- error prevention
-- recognition rather than recall
-- flexibility and efficiency
-- aesthetic and minimalist design
-- recovery from errors
-- help, onboarding, and empty-state guidance
+### Nielsen's 10 Usability Heuristics
+
+#### 1. Visibility of System Status
+- [ ] Loading states present (skeleton screens, not spinners)
+- [ ] Success/error feedback after actions (toast notifications)
+- [ ] Progress indicators for multi-step flows
+- [ ] Active state clearly shown on navigation items
+- [ ] Real-time data has timestamp showing freshness
+
+#### 2. Match Between System and Real World
+- [ ] Labels use user's language, not technical jargon
+- [ ] Icons are universally recognizable (Lucide standard set)
+- [ ] Number formats match user expectations (comma separators, currency symbols)
+- [ ] Date formats are locale-appropriate
+
+#### 3. User Control and Freedom
+- [ ] Back navigation available on all non-root screens
+- [ ] Destructive actions have confirmation dialogs
+- [ ] Undo available for reversible actions (toast with undo)
+- [ ] Bottom sheet/modal can be dismissed (backdrop tap, swipe down, X button)
+- [ ] No dark patterns (no forced actions, always a way to dismiss)
+
+#### 4. Consistency and Standards
+- [ ] Same action = same appearance everywhere
+- [ ] Color meanings are consistent (green=success, red=error, brand=active)
+- [ ] Text hierarchy follows the 5-level grayscale system
+- [ ] All cards use the same shadow, radius, padding
+- [ ] Spacing follows the 6px grid system
 
-Add mobile-specific checks for reachability, touch ergonomics, input burden, and thumb-friendly action placement.
+#### 5. Error Prevention
+- [ ] Destructive buttons are visually distinct (destructive variant)
+- [ ] Form validation happens on blur (not while typing)
+- [ ] Dangerous actions require explicit confirmation
+- [ ] Input constraints are visible before errors occur (character limits, format hints)
 
-## Output
+#### 6. Recognition Rather Than Recall
+- [ ] Labels on all icons (especially BottomNav)
+- [ ] Current state visible without memorization (active tab highlighted)
+- [ ] Recent/frequent items shown for quick access
+- [ ] Placeholder text shows expected format
 
-Return:
-1. A prioritized issue list
-2. The heuristic violated by each issue
-3. Why the issue matters to real users
-4. Specific remediation suggestions for the page, component, or flow
+#### 7. Flexibility and Efficiency
+- [ ] Key actions reachable within 3 taps from home
+- [ ] Pull-to-refresh on data screens
+- [ ] Touch targets >= 44x44px (no tiny tap areas)
+- [ ] Frequently used actions in easy-to-reach zones (bottom of screen)
 
-## Best Practices
+#### 8. Aesthetic and Minimalist Design
+- [ ] Each screen focuses on ONE primary task
+- [ ] No decorative elements that don't serve a purpose
+- [ ] Information pyramid respected (most important = biggest)
+- [ ] Card density follows the max-4-items rule
+- [ ] No competing visual elements (one hero metric per page)
 
-- Judge the experience from the user's point of view, not the implementer's
-- Separate high-severity flow blockers from minor polish issues
-- Include recovery and state-management guidance, not only layout comments
-- Tie recommendations back to concrete UI changes
+#### 9. Help Users Recover from Errors
+- [ ] Error messages explain what went wrong in plain language
+- [ ] Error messages suggest how to fix the problem
+- [ ] Partial failures don't break the whole page (one card fails, others load)
+- [ ] Network errors show retry button
+- [ ] Form errors highlight the specific field
 
-## Additional Resources
+#### 10. Help and Documentation
+- [ ] Empty states guide users to take action
+- [ ] Onboarding for first-time features (if applicable)
+- [ ] Tooltips for complex metrics (if applicable)
 
-- [StyleSeed repository](https://github.com/bitjaru/styleseed)
-- [Source skill](https://github.com/bitjaru/styleseed/blob/main/seeds/toss/.claude/skills/ux-audit/SKILL.md)
+### Mobile-Specific UX Checks
+
+#### Touch & Gesture
+- [ ] Touch targets minimum 44x44px
+- [ ] Minimum 8px between adjacent touch targets
+- [ ] No hover-dependent interactions (mobile has no hover)
+- [ ] Swipe gestures have visible affordances (carousel indicators)
+
+#### Performance Perception
+- [ ] Skeleton screens appear within 300ms
+- [ ] Optimistic updates for user actions
+- [ ] Above-the-fold content loads first
+- [ ] No layout shift after content loads
+
+#### Safe Areas
+- [ ] Content not hidden behind notch/Dynamic Island
+- [ ] Bottom content not behind home indicator
+- [ ] BottomNav has `pb-safe` padding
+
+### Dark Pattern Prevention
+- [ ] No forced bottom sheets on entry
+- [ ] No exit-prevention dialogs
+- [ ] Every screen has a way to go back/dismiss
+- [ ] CTA labels clearly describe the action
+- [ ] No manipulative graphics (begging, urgency)
+
+## Output Format
+
+1. **Score**: A+ to F rating with breakdown
+2. **Critical Issues**: Must fix (blocks usability)
+3. **Major Issues**: Should fix (degrades experience)
+4. **Minor Issues**: Nice to fix (polish)
+5. **Recommendations**: Specific code changes for each issue
 
 ## 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 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.