opencode-skills-collection 3.1.0 → 3.1.1

package/bundled-skills/competitor-analysis/scripts/merge_partials.mjs

@@ -0,0 +1,291 @@
+#!/usr/bin/env node
+
+// Merges per-lane partial markdown files into one consolidated file per competitor.
+//
+// The 5-lane subagent fan-out writes partials to: {OUTPUT_DIR}/partials/{slug}.{lane}.md
+//   lane ∈ { marketing, discussion, social, news, technical }
+//
+// Each partial has its own YAML frontmatter + sections. The marketing partial owns
+// the canonical frontmatter (pricing, features, etc.); other lanes contribute only
+// Mentions / Benchmarks / Findings bullets. The merge:
+//   1. Starts from marketing.md's frontmatter as the canonical header
+//   2. Appends body sections in the canonical order (Product, Pricing, Features,
+//      Positioning, Comparison, Mentions, Benchmarks, Research Findings)
+//   3. Unions all Mentions bullets across lanes, dedups by URL, sorts by date desc
+//   4. Unions all Research Findings bullets across lanes
+//   5. Unions all Benchmarks bullets
+//   6. Writes the consolidated file to {OUTPUT_DIR}/{slug}.md
+//
+// Usage: node merge_partials.mjs <research-dir>
+
+import { readdirSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
+import { join } from 'path';
+import { parseFrontmatter, parseBody, parseSections } from './md_utils.mjs';
+
+const args = process.argv.slice(2);
+if (args.includes('--help') || args.includes('-h') || args.length === 0) {
+  console.error(`Usage: node merge_partials.mjs <research-dir>
+
+Reads {dir}/partials/{slug}.{lane}.md files and writes consolidated
+{dir}/{slug}.md per competitor. Lanes: marketing, discussion, social, news, technical.`);
+  process.exit(args.includes('--help') || args.includes('-h') ? 0 : 1);
+}
+
+const dir = args[0];
+const partialsDir = join(dir, 'partials');
+
+const LANES = ['marketing', 'discussion', 'social', 'news', 'technical', 'battle'];
+
+function extractBullets(sectionText) {
+  if (!sectionText) return [];
+  const out = [];
+  for (const raw of sectionText.split('\n')) {
+    const line = raw.trim();
+    // Accept either "- ..." or numbered-list "1. ..." — normalize both to "- ...".
+    if (line.startsWith('- ')) out.push(line);
+    else {
+      const m = line.match(/^\d+\.\s+(.*)$/);
+      if (m) out.push('- ' + m[1]);
+    }
+  }
+  return out;
+}
+
+// Normalize Mentions bullet lines to the canonical format that `compile_report.mjs`
+// parses: `- **[SourceType]** Title | Snippet (source: URL, YYYY-MM-DD)`.
+//
+// Lane subagents deviate in practice — we've observed at least three variants:
+//   A) discussion-style:   `- **HN** — [Title](url) — snippet`
+//   B) news-style:         `- **2025-08-06** — [News] Outlet — "title" — url`
+//   C) canonical:          `- **[SourceType]** Title | Snippet (source: URL, YYYY-MM-DD)`
+// Rather than fighting prompt drift, normalize at merge time so downstream stays clean.
+function normalizeMentionBullet(line) {
+  // Already canonical — nothing to do.
+  if (/^-\s*\*\*\[\w+\]\*\*/.test(line)) return line;
+
+  const urlMatch = line.match(/https?:\/\/\S+/);
+  const url = urlMatch ? urlMatch[0].replace(/[).,\]\s]+$/, '') : '';
+  const dateMatch = line.match(/\b(\d{4}-\d{2}-\d{2})\b/);
+  const date = dateMatch ? dateMatch[1] : '';
+
+  // Pattern A — `- **SourceType** — [Title](url) — snippet`  (e.g. discussion lane)
+  //   **SourceType** is bold but without the brackets we want in canonical form.
+  let m = line.match(/^-\s*\*\*([^*]+)\*\*\s*[—\-]\s*\[([^\]]+)\]\(([^)]+)\)\s*(?:[—\-]\s*(.*))?$/);
+  if (m) {
+    const [, rawType, title, linkUrl, snippet] = m;
+    const sourceType = rawType.trim().replace(/^\[|\]$/g, '');
+    const snippetStr = snippet && snippet.trim() ? ` | ${snippet.trim()}` : '';
+    const dateStr = date ? `, ${date}` : '';
+    return `- **[${sourceType}]** ${title.trim()}${snippetStr} (source: ${linkUrl}${dateStr})`;
+  }
+
+  // Pattern B — `- **YYYY-MM-DD** — [SourceType] Outlet — "title" — url`  (e.g. news lane)
+  m = line.match(/^-\s*\*\*(\d{4}-\d{2}-\d{2})\*\*\s*[—\-]\s*\[(\w+)\]\s+([^—]+?)\s*[—\-]\s*"?([^"]+?)"?\s*(?:[—\-]\s*(\S+))?\s*$/);
+  if (m) {
+    const [, dateStr, sourceType, outlet, title, trailingUrl] = m;
+    const finalUrl = trailingUrl && trailingUrl.startsWith('http') ? trailingUrl : url;
+    const snippet = outlet.trim();
+    return `- **[${sourceType}]** ${title.trim()}${snippet ? ` | ${snippet}` : ''} (source: ${finalUrl || ''}, ${dateStr})`;
+  }
+
+  // Pattern C — generic fallback: find any `**X**` tag + URL and format canonically.
+  m = line.match(/^-\s*\*\*([^*]+)\*\*\s*(.*)/);
+  if (m && url) {
+    const rawType = m[1].trim().replace(/^\[|\]$/g, '');
+    // If the leading token is a date, try to pull a later **type** off the rest.
+    let sourceType = rawType;
+    if (/^\d{4}-\d{2}-\d{2}$/.test(rawType)) {
+      const innerType = m[2].match(/\[(\w+)\]/);
+      if (innerType) sourceType = innerType[1];
+    }
+    const linkTextM = m[2].match(/\[([^\]]+)\]/);
+    const title = linkTextM ? linkTextM[1] : m[2].replace(url, '').replace(/[—"]+/g, '').replace(/^\W+|\W+$/g, '').slice(0, 100);
+    const dateStr = date ? `, ${date}` : '';
+    return `- **[${sourceType}]** ${title.trim()} (source: ${url}${dateStr})`;
+  }
+
+  // Last resort — leave line untouched (preserves data even if un-parseable).
+  return line;
+}
+
+function urlOf(bullet) {
+  const m = bullet.match(/\(source:\s*([^,)]+)/);
+  return m ? m[1].trim() : null;
+}
+
+function dateOf(bullet) {
+  const m = bullet.match(/\(source:\s*[^,)]+,\s*(\d{4}-\d{2}-\d{2})/);
+  return m ? m[1] : '';
+}
+
+let files;
+try { files = readdirSync(partialsDir); } catch {
+  console.error(`No partials directory at ${partialsDir} — nothing to merge.`);
+  process.exit(0);
+}
+
+// Group partials by slug
+const bySlug = new Map();
+for (const f of files) {
+  if (!f.endsWith('.md')) continue;
+  const m = f.match(/^(.+)\.([a-z]+)\.md$/);
+  if (!m) continue;
+  const slug = m[1];
+  const lane = m[2];
+  if (!LANES.includes(lane)) continue;
+  if (!bySlug.has(slug)) bySlug.set(slug, {});
+  const content = readFileSync(join(partialsDir, f), 'utf-8');
+  bySlug.get(slug)[lane] = { fm: parseFrontmatter(content), body: parseBody(content) };
+}
+
+let merged = 0;
+for (const [slug, lanes] of bySlug.entries()) {
+  const marketing = lanes.marketing;
+  if (!marketing || !marketing.fm) {
+    console.error(`[skip] ${slug}: no marketing partial — cannot form canonical frontmatter`);
+    continue;
+  }
+
+  // Union body sections
+  const allSections = {};
+  for (const lane of LANES) {
+    if (!lanes[lane]) continue;
+    const secs = parseSections(lanes[lane].body);
+    for (const [k, v] of Object.entries(secs)) {
+      if (!allSections[k]) allSections[k] = [];
+      allSections[k].push(v);
+    }
+  }
+
+  // Normalize → dedup Mentions by URL, sort by date desc
+  const rawBullets = (allSections['Mentions'] || []).flatMap(s => extractBullets(s));
+  const mentionBullets = rawBullets.map(normalizeMentionBullet);
+  const seenUrls = new Set();
+  const dedupedMentions = [];
+  for (const b of mentionBullets) {
+    const u = urlOf(b);
+    const key = u || b; // fallback to bullet text if no URL
+    if (seenUrls.has(key)) continue;
+    seenUrls.add(key);
+    dedupedMentions.push(b);
+  }
+  dedupedMentions.sort((a, b) => {
+    const da = dateOf(a), db = dateOf(b);
+    if (da && db) return db.localeCompare(da);
+    if (da) return -1;
+    if (db) return 1;
+    return 0;
+  });
+
+  // Dedup Benchmarks by URL
+  const benchmarkBullets = (allSections['Benchmarks'] || []).flatMap(s => extractBullets(s));
+  const seenBench = new Set();
+  const dedupedBench = [];
+  for (const b of benchmarkBullets) {
+    const m = b.match(/https?:\/\/\S+/);
+    const key = m ? m[0] : b;
+    if (seenBench.has(key)) continue;
+    seenBench.add(key);
+    dedupedBench.push(b);
+  }
+
+  // Dedup Findings loosely (by exact text)
+  const findingBullets = (allSections['Research Findings'] || []).flatMap(s => extractBullets(s));
+  const dedupedFindings = [...new Set(findingBullets)];
+
+  // Merge/prefer marketing for Product/Pricing/Features/Positioning/Comparison
+  function first(key) {
+    const arr = allSections[key] || [];
+    return arr.length ? arr[0] : '';
+  }
+
+  // Rebuild frontmatter — whitelist canonical fields only. Non-marketing lane subagents
+  // sometimes leak ad-hoc meta fields (notes, searches_run, lane, etc.) into their partial's
+  // frontmatter; those are debug/summary fields, not canonical data. Drop them here.
+  const CANONICAL_FIELDS = [
+    'competitor_name', 'website', 'pricing_url',
+    'tagline', 'positioning', 'product_description', 'target_customer',
+    'pricing_model', 'pricing_tiers', 'key_features', 'integrations',
+    'headquarters', 'founded', 'employee_estimate', 'funding_info',
+    'strategic_diff',
+  ];
+  // Subagents drift on canonical field names too. Common aliases observed in real runs:
+  // `competitor` → `competitor_name` (browsaur marketing subagent), `homepage` → `website`,
+  // `price_tiers` → `pricing_tiers`. Accept aliases silently.
+  //
+  // NOTE: a bare `pricing` key is mapped to `pricing_model`, NOT `pricing_tiers`. In practice
+  // subagents use `pricing` for a pricing *model* or prose summary ("usage-based", "$0.005/req")
+  // far more often than for an enumerated tier list, so routing it to `pricing_tiers` corrupted
+  // the structured tier data the overview/matrix render from. Use `price_tiers`/`pricing_tiers`
+  // explicitly for tiers.
+  const FIELD_ALIASES = {
+    'competitor': 'competitor_name',
+    'name': 'competitor_name',
+    'company': 'competitor_name',
+    'homepage': 'website',
+    'url': 'website',
+    'price_tiers': 'pricing_tiers',
+    'pricing': 'pricing_model',
+  };
+  function canonicalValue(fm, key) {
+    if (fm[key]) return fm[key];
+    for (const [alias, canonical] of Object.entries(FIELD_ALIASES)) {
+      if (canonical === key && fm[alias]) return fm[alias];
+    }
+    return undefined;
+  }
+  const mergedFm = {};
+  for (const k of CANONICAL_FIELDS) {
+    const v = canonicalValue(marketing.fm, k);
+    if (v) mergedFm[k] = v;
+  }
+  // Other lanes may fill in canonical gaps (e.g. funding_info from news, strategic_diff from technical).
+  for (const lane of LANES) {
+    if (lane === 'marketing' || !lanes[lane] || !lanes[lane].fm) continue;
+    for (const k of CANONICAL_FIELDS) {
+      if (!mergedFm[k]) {
+        const v = canonicalValue(lanes[lane].fm, k);
+        if (v) mergedFm[k] = v;
+      }
+    }
+  }
+
+  const fmLines = Object.entries(mergedFm).map(([k, v]) => `${k}: ${v}`).join('\n');
+
+  // Comparison heading may be "Comparison vs Exa" etc — find any key starting with "Comparison"
+  const comparisonKey = Object.keys(allSections).find(k => k.startsWith('Comparison'));
+  // Battle lane is format-drifty: subagents emit `## Battle Card`, `# Battle Card: X vs Y`
+  // (h1 — not picked up by parseSections), or skip the wrapper and lead with `## Landmines`.
+  // Treat the ENTIRE battle partial body as the Battle Card section regardless of heading style,
+  // so sales enablement content always lands in the merged file.
+  let battleCardBody = '';
+  if (lanes.battle && lanes.battle.body) {
+    const body = lanes.battle.body.trim();
+    // Strip the FIRST heading line if it mentions "Battle Card" — handles h1/h2/h3 and any
+    // suffix (e.g. `## Battle Card — Serper`, `# Battle Card: Tavily`). Otherwise the
+    // canonical `## Battle Card` wrapper added below produces duplicate headings.
+    battleCardBody = body.replace(/^#{1,3}\s+Battle\s*Card\b[^\n]*\n+/m, '').trim();
+  }
+
+  const out = [
+    '---',
+    fmLines,
+    '---',
+    '',
+    first('Product') ? `## Product\n${first('Product')}\n` : '',
+    first('Pricing') ? `## Pricing\n${first('Pricing')}\n` : '',
+    first('Features') ? `## Features\n${first('Features')}\n` : '',
+    first('Positioning') ? `## Positioning\n${first('Positioning')}\n` : '',
+    comparisonKey && allSections[comparisonKey].length ? `## ${comparisonKey}\n${allSections[comparisonKey][0]}\n` : '',
+    battleCardBody ? `## Battle Card\n${battleCardBody}\n` : '',
+    dedupedMentions.length ? `## Mentions\n${dedupedMentions.join('\n')}\n` : '',
+    dedupedBench.length ? `## Benchmarks\n${dedupedBench.join('\n')}\n` : '',
+    dedupedFindings.length ? `## Research Findings\n${dedupedFindings.join('\n')}\n` : '',
+  ].filter(Boolean).join('\n');
+
+  writeFileSync(join(dir, `${slug}.md`), out);
+  merged += 1;
+  console.error(`[ok]   ${slug}: ${dedupedMentions.length} mentions, ${dedupedBench.length} benchmarks, ${dedupedFindings.length} findings`);
+}
+
+console.log(JSON.stringify({ merged, competitors: bySlug.size }));

package/bundled-skills/competitor-analysis/scripts/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "competitor-analysis-scripts",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module"
+}

package/bundled-skills/design-it/3d-ui/SKILL.md

@@ -0,0 +1,259 @@
+---
+name: 3d-ui
+description: Web and App implementation guide for 3D UI. Trigger when user wants actual 3D objects, perspective effects, and spatial depth.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# 3D UI
+
+> "Breaking the plane. Interfaces that exist in a three-dimensional, rotatable space."
+
+
+## When to Use
+Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.
+
+## Core Principles
+1. **True Depth (Z-Axis Translation)**: Elements don't just have shadows; they physically move closer to or further from the camera.
+2. **Perspective**: Use CSS perspective or WebGL to create realistic vanishing points.
+3. **Interactive Rotation**: Elements should respond to mouse movement or device gyroscope by tilting or rotating in 3D space.
+
+## Visual DNA
+- **Colors**: Bold, striking palettes like **Midnight Luxury** or **Industrial Chic**. 3D elements need high contrast to show their geometry.
+- **Typography**: Bold, blocky, or extruded text.
+- **Graphics**: Instead of flat icons, use rendered 3D assets (.glb, .gltf, or high-res PNGs of 3D objects).
+
+## Web Implementation
+- Rely heavily on `perspective`, `transform-style: preserve-3d`, and `rotateX`/`rotateY`.
+- **CSS Example**:
+```css
+.perspective-container {
+  perspective: 1000px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-3d {
+  width: 300px;
+  height: 400px;
+  transform-style: preserve-3d;
+  transition: transform 0.5s ease;
+  
+  /* Initial slight rotation */
+  transform: rotateX(15deg) rotateY(-15deg);
+}
+
+.card-3d:hover {
+  /* Straighten out on hover */
+  transform: rotateX(0) rotateY(0) translateZ(50px);
+}
+
+/* Inner elements popping out */
+.card-content {
+  transform: translateZ(30px); /* Pushes content 30px closer to viewer */
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct Card3D: View {
+    @State private var dragOffset = CGSize.zero
+    
+    var body: some View {
+        VStack {
+            Text("3D Card")
+                .font(.largeTitle.bold())
+                .foregroundColor(.white)
+        }
+        .frame(width: 300, height: 400)
+        .background(
+            LinearGradient(colors: [.blue, .purple], startPoint: .topLeading, endPoint: .bottomTrailing)
+        )
+        .cornerRadius(24)
+        .shadow(radius: 20)
+        // Magic 3D effect based on drag gesture
+        .rotation3DEffect(
+            .degrees(Double(dragOffset.width / 10)),
+            axis: (x: 0, y: 1, z: 0),
+            perspective: 0.5
+        )
+        .rotation3DEffect(
+            .degrees(Double(-dragOffset.height / 10)),
+            axis: (x: 1, y: 0, z: 0),
+            perspective: 0.5
+        )
+        .gesture(
+            DragGesture()
+                .onChanged { value in
+                    withAnimation(.interactiveSpring()) {
+                        dragOffset = value.translation
+                    }
+                }
+                .onEnded { _ in
+                    withAnimation(.spring()) {
+                        dragOffset = .zero
+                    }
+                }
+        )
+    }
+}
+```
+- SwiftUI makes this incredibly easy with `.rotation3DEffect()`.
+- Use the `perspective` parameter (default 1/6, higher = more distorted) to control the camera distance.
+- Link the rotation axes (`x`, `y`) to drag gestures or CoreMotion (gyroscope) for interactive 3D UI.
+
+### Flutter
+```dart
+class Card3D extends StatefulWidget {
+  @override
+  State<Card3D> createState() => _Card3DState();
+}
+
+class _Card3DState extends State<Card3D> {
+  Offset _offset = Offset.zero;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onPanUpdate: (details) {
+        setState(() => _offset += details.delta);
+      },
+      onPanEnd: (_) {
+        setState(() => _offset = Offset.zero); // Snap back
+      },
+      child: TweenAnimationBuilder(
+        tween: Tween<Offset>(begin: Offset.zero, end: _offset),
+        duration: const Duration(milliseconds: 200),
+        curve: Curves.easeOut,
+        builder: (context, Offset offset, child) {
+          // Perspective Matrix
+          final transform = Matrix4.identity()
+            ..setEntry(3, 2, 0.001) // perspective
+            ..rotateX(-offset.dy * 0.01)
+            ..rotateY(offset.dx * 0.01);
+
+          return Transform(
+            transform: transform,
+            alignment: FractionalOffset.center,
+            child: Container(
+              width: 300,
+              height: 400,
+              decoration: BoxDecoration(
+                gradient: const LinearGradient(colors: [Colors.blue, Colors.purple]),
+                borderRadius: BorderRadius.circular(24),
+                boxShadow: const [BoxShadow(color: Colors.black45, blurRadius: 20)],
+              ),
+              alignment: Alignment.center,
+              child: const Text('3D Card', 
+                style: TextStyle(color: Colors.white, fontSize: 32, fontWeight: FontWeight.bold)),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
+```
+- The secret to perspective in Flutter is `Matrix4.identity()..setEntry(3, 2, 0.001)`.
+- Wrap the target container in a `Transform` widget and apply rotations on the X and Y axes.
+- Use `TweenAnimationBuilder` to smooth out the return-to-center physics.
+
+### React Native
+```jsx
+const Card3D = () => {
+  const pan = useRef(new Animated.ValueXY()).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], { useNativeDriver: false }),
+      onPanResponderRelease: () => {
+        Animated.spring(pan, { toValue: { x: 0, y: 0 }, useNativeDriver: false }).start();
+      },
+    })
+  ).current;
+
+  // Map drag distance to degrees
+  const rotateX = pan.y.interpolate({ inputRange: [-200, 200], outputRange: ['20deg', '-20deg'] });
+  const rotateY = pan.x.interpolate({ inputRange: [-200, 200], outputRange: ['-20deg', '20deg'] });
+
+  return (
+    <Animated.View
+      {...panResponder.panHandlers}
+      style={{
+        width: 300, height: 400,
+        backgroundColor: '#6b21a8',
+        borderRadius: 24,
+        justifyContent: 'center', alignItems: 'center',
+        // Pseudo-3D transforms
+        transform: [
+          { perspective: 1000 },
+          { rotateX },
+          { rotateY }
+        ]
+      }}
+    >
+      <Text style={{ color: '#fff', fontSize: 32, fontWeight: '700' }}>3D Card</Text>
+    </Animated.View>
+  );
+};
+```
+- True 3D models require `react-three-fiber`.
+- For UI perspective transforms, use the `transform` array: `[{ perspective: 1000 }, { rotateX: '...' }, { rotateY: '...' }]`.
+- `perspective` MUST be the first item in the transform array for the effect to render correctly.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun Card3D() {
+    var offset by remember { mutableStateOf(Offset.Zero) }
+    val animatedOffset by animateOffsetAsState(
+        targetValue = offset,
+        animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy)
+    )
+
+    Box(
+        modifier = Modifier
+            .size(300.dp, 400.dp)
+            .pointerInput(Unit) {
+                detectDragGestures(
+                    onDrag = { change, dragAmount ->
+                        change.consume()
+                        offset += dragAmount
+                    },
+                    onDragEnd = { offset = Offset.Zero },
+                    onDragCancel = { offset = Offset.Zero }
+                )
+            }
+            .graphicsLayer {
+                // Apply 3D rotation based on drag offset
+                rotationX = -animatedOffset.y * 0.1f
+                rotationY = animatedOffset.x * 0.1f
+                cameraDistance = 8f * density // Sets the perspective
+            }
+            .shadow(20.dp, RoundedCornerShape(24.dp))
+            .clip(RoundedCornerShape(24.dp))
+            .background(Brush.linearGradient(listOf(Color.Blue, Color.Magenta)))
+    ) {
+        Text("3D Card",
+            color = Color.White, fontSize = 32.sp, fontWeight = FontWeight.Bold,
+            modifier = Modifier.align(Alignment.Center))
+    }
+}
+```
+- Apply 3D transformations inside `Modifier.graphicsLayer { }`.
+- Set `rotationX` and `rotationY` for the tilt.
+- **Critical**: Set `cameraDistance` to establish the Z-axis perspective vanishing point. Usually `8f * density` is a good starting point.
+
+## Do's and Don'ts
+- **DO**: Tie 3D rotation to user input (mouse move on web, device tilt on mobile) for maximum impact.
+- **DON'T**: Make text itself 3D unless it's a massive headline. 3D text is generally unreadable at small sizes.
+
+## Limitations
+- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
+- Ensure appropriate contrast ratios and responsive behaviors are verified separately.