Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub Β· AI
Outlit SDK
Integrate Outlit SDK for customer context for agents. Triggers when users need to add Outlit to any web framework (React, Next.js, Vue, Nuxt, Svelte, Angular...
skill openclawclawhub Free
Integrate Outlit SDK for customer context for agents. Triggers when users need to add Outlit to any web framework (React, Next.js, Vue, Nuxt, Svelte, Angular...
β¬ 0 downloads β
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- leo-paz
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
Outlit SDK Integration
Decision-tree-driven guide for integrating Outlit customer journey tracking. Detects what it can from the codebase, asks only what it must, and links to official docs for implementation details.
Branching Check
Before anything else, check if Outlit is already installed: Look for @outlit/browser, @outlit/node, or outlit (Rust crate) in package.json or Cargo.toml If not installed -> go to Phase 1: Quick Connect If already installed -> go to Already Installed
Already Installed
Ask the user what they need help with: Add event tracking -> Run detection, then go to Decision 7: Event Tracking. Fetch the relevant framework doc from the Doc URL Map for implementation patterns. Add/change auth integration -> Run detection, then go to Decision 3: Auth & Identity. Fetch the framework doc and identity resolution doc. Add consent management -> Go to Decision 2: Consent Stance. Fetch the framework doc's consent section. Add server-side tracking -> Go to Decision 1: App Type & SDK for the server package, then fetch the Node.js or Rust doc. Add billing/Stripe integration -> Go to Decision 6: Billing Integration. Fetch the customer journey doc. Add activation tracking -> Go to Decision 5: Activation Event. Fetch the customer journey doc. Migrate from other analytics -> Run detection, then go to Decision 4: Existing Analytics. Debug/troubleshoot -> Go to Troubleshooting.
Phase 1: Quick Connect
Goal: get events flowing in ~2 minutes so the user sees "Connected" on their Outlit onboarding screen. Zero user decisions required.
Step 1: Detect Framework & Package Manager
Use glob/grep to check: Framework: Check package.json dependencies for next, vue, nuxt, react, svelte, @sveltejs/kit, @angular/core, astro, express, fastify. Check for Cargo.toml with tauri or outlit. Package manager: Check for bun.lockb (bun), pnpm-lock.yaml (pnpm), yarn.lock (yarn), package-lock.json (npm). Use the first match found.
Step 2: Install SDK
Based on detected framework: Browser app (React, Next.js, Vue, Nuxt, Svelte, Angular, Astro) -> @outlit/browser Server app (Express, Fastify, Node.js) -> @outlit/node Tauri -> outlit Rust crate via cargo add outlit Electron -> @outlit/browser Install using the detected package manager.
Step 3: Add Public Key
Ask the user for their Outlit public key. They get it from Outlit dashboard -> Settings -> Website Tracking or from the onboarding screen. Add to environment variables with the correct framework prefix: FrameworkEnv varNext.jsNEXT_PUBLIC_OUTLIT_KEYVite (Vue, Svelte, React+Vite)VITE_OUTLIT_KEYCreate React AppREACT_APP_OUTLIT_KEYNuxtNUXT_PUBLIC_OUTLIT_KEYAngularAdd to environment.tsAstroPUBLIC_OUTLIT_KEYServer appsOUTLIT_KEY
Step 4: Minimal Setup
Fetch the framework-specific doc from the Doc URL Map and implement only the minimal setup β provider/init with just the publicKey, no auth, no consent, no custom events. For React-based frameworks this means wrapping the app with OutlitProvider. For Vue it means installing the OutlitPlugin. For server apps it means creating an Outlit instance.
Step 5: Verify Connection
Tell the user to: Run their dev server Open the app in a browser Check the Outlit onboarding screen for the "Connected" badge Or check DevTools -> Network for requests to app.outlit.ai/api/i/v1/... returning 200 Once connected, ask: "Events are flowing. Ready to set up the full integration?" If yes -> continue to Phase 2. If no -> they can come back later (the skill will detect the existing install).
Phase 2: Full Integration
Run the full detection first, then walk through each decision.
Full Detection
Use grep/glob to detect all of the following before starting the decision tree: SignalHow to detectAuth providerDeps: @clerk/nextjs, @clerk/clerk-react, next-auth, @auth/core, @supabase/auth-helpers-nextjs, @supabase/ssr, @auth0/auth0-react, @auth0/nextjs-auth0, firebase, @firebase/authBilling providerDeps: stripe, @stripe/stripe-js, @paddle/paddle-js, chargebeeExisting analyticsDeps: posthog-js, @posthog/node, @amplitude/analytics-browser, @amplitude/analytics-node, mixpanel-browser, @segment/analytics-next, @segment/analytics-nodeAnalytics abstractionGrep for files named analytics.ts, analytics.js, tracking.ts, tracking.js in lib/, utils/, helpers/, services/ that import 2+ analytics librariesEU/consent signalsDeps: cookiebot, @onetrust/*, cookie-consent, or grep for existing consent/cookie banner componentsApp typeDeps: @tauri-apps/api, electron, react-nativeActivation patternsGrep for onboarding routes/components, "first" resource creation handlers, invite flows Present a summary of what was detected to the user before proceeding.
Decision 1: App Type & SDK Package
Auto-resolved from Phase 1 detection. If hybrid (e.g., Next.js with API routes that need server tracking), install both @outlit/browser and @outlit/node. Electron -> @outlit/browser Tauri -> outlit Rust crate React Native -> @outlit/browser (uses fingerprint instead of cookies)
Decision 2: Consent Stance
DetectionRecommendationExisting CMP/cookie banner libraryautoTrack: false, integrate with their existing CMP's consent callback to call enableTracking()EU signals but no CMPautoTrack: false, mention they need a consent solution but don't build one unless askedNo EU signalsautoTrack: true β simpler, uses cookies immediately Always explain the tradeoff: autoTrack: true starts tracking with cookies immediately. autoTrack: false waits until enableTracking() is called after user consent. Fetch the relevant framework doc for consent implementation patterns.
Decision 3: Auth & Identity
DetectionRecommendationReact/Vue with OutlitProvider/OutlitPluginPass user prop with { email, userId } after auth resolves. No manual identify() needed.Vanilla JS / script tagCall outlit.identify({ email, userId }) client-side right after auth completesServer-only (Node/Rust)Call outlit.identify() server-side for event attribution Critical: Client-side identify() (or the user prop) links the anonymous cookie/visitorId to a real person. This must happen after the auth flow completes. Server-side identify() is for attributing server events to a known user, but doesn't link browsing history. If an auth provider was detected, fetch the framework doc and the identity resolution doc for the specific auth provider pattern.
Decision 4: Existing Analytics Strategy
DetectionRecommendationExisting analytics abstraction (e.g., lib/analytics.ts wrapping PostHog + Amplitude)Add Outlit as another provider inside the existing abstractionScattered direct calls (e.g., posthog.capture() in 15 files)Tell the user: "I found [N] direct [PostHog/Amplitude] calls across [N] files. Want me to create an analytics wrapper that calls both, or add Outlit calls alongside the existing ones?"No existing analyticsAdd Outlit directly, no wrapper needed The goal is minimal code changes. Don't reorganize their project.
Decision 5: Activation Event
The activation event marks when a user first gets real value from the product. This is NOT just completing onboarding. Scan the codebase for value-moment patterns: First resource/project/item created First core feature used (e.g., first message sent, first report generated) First invite to a teammate First successful integration/connection If a clear value moment is found -> suggest it: "It looks like creating their first [X] could be your activation event β is that where users first get value?" If only an onboarding flow is found -> mention it as a fallback: "I see an onboarding flow, but activation usually maps to when users get real value, not just completing setup. What action means a user has truly gotten value from your product?" If nothing obvious -> ask: "What action means a user has gotten real value from your product? That's where user.activate() should go." Fetch the customer journey doc for user.activate() implementation.
Decision 6: Billing Integration
DetectionRecommendationStripe in dependenciesRecommend the Stripe webhook integration β it automatically handles customer.paid(), customer.trialing(), customer.churned() based on Stripe events. Fetch the customer journey doc for webhook setup.Other billing provider (Paddle, Chargebee)Guide manual customer.paid() / customer.trialing() / customer.churned() calls in their existing webhook handlersNo billing provider detectedSkip. Mention it's available when they add billing.
Decision 7: Event Tracking
Pageviews are tracked automatically by default. For custom events: Scan the codebase for existing analytics calls, user action handlers, form submissions, key button clicks Suggest a list of events based on what the codebase reveals (e.g., form_submitted, feature_used, item_created, search_performed) Ask the user to confirm, modify, or add to the list before implementing Use snake_case for all event names Fetch the framework doc for the track() API pattern.
Doc URL Map
Fetch these docs as needed for implementation details. Always prefer linking to docs over hardcoding patterns. TopicURLQuickstarthttps://docs.outlit.ai/tracking/quickstartHow tracking workshttps://docs.outlit.ai/tracking/how-it-worksNPM packagehttps://docs.outlit.ai/tracking/browser/npmReacthttps://docs.outlit.ai/tracking/browser/reactNext.jshttps://docs.outlit.ai/tracking/browser/nextjsVue 3https://docs.outlit.ai/tracking/browser/vueNuxthttps://docs.outlit.ai/tracking/browser/nuxtSvelteKithttps://docs.outlit.ai/tracking/browser/sveltekitAngularhttps://docs.outlit.ai/tracking/browser/angularAstrohttps://docs.outlit.ai/tracking/browser/astroScript taghttps://docs.outlit.ai/tracking/browser/scriptCalendar embedshttps://docs.outlit.ai/tracking/browser/calendar-embedsNode.jshttps://docs.outlit.ai/tracking/server/nodejsRust / Taurihttps://docs.outlit.ai/tracking/server/rustIdentity resolutionhttps://docs.outlit.ai/concepts/identity-resolutionAnonymous trackinghttps://docs.outlit.ai/concepts/anonymous-trackingCustomer journeyhttps://docs.outlit.ai/concepts/customer-journeyMCP integrationhttps://docs.outlit.ai/ai-integrations/mcpIngest APIhttps://docs.outlit.ai/api-reference/ingestAPI introductionhttps://docs.outlit.ai/api-reference/introductionFull docs indexhttps://docs.outlit.ai/llms.txt
No events in dashboard
Verify the public key env var has the correct framework prefix (NEXT_PUBLIC_, VITE_, REACT_APP_, etc.) Confirm the provider/init wraps the entire app or runs at startup Check autoTrack setting β if false, enableTracking() must be called after consent Check DevTools -> Network for requests to app.outlit.ai/api/i/v1/... β look for 200 responses If requests are missing entirely, the SDK isn't initializing β check for errors in the console
Events not linked to users
identify() or the user prop must be called/set after the auth flow resolves Include both email and userId for reliable identity resolution Client-side identify links browsing history; server-side identify attributes server events
Server-side events missing
Always await outlit.flush() before the function returns, especially in serverless environments Verify OUTLIT_KEY env var is set in the server environment
Race condition with async auth
Auth providers like Clerk and Auth0 load asynchronously. If user.activate() or identify() is called before the auth provider resolves, events get silently dropped. Ensure auth state is fully loaded before calling identity or stage methods.
Key Principles
Minimal changes β touch as few files as possible, add alongside existing code Detect first, ask second β auto-resolve what you can, only prompt for genuine decisions Recommendations have reasoning β when presenting a choice, lead with the recommendation and explain why Client-side identify is critical β this links anonymous browsing to a real user Flush in serverless β always await outlit.flush() before function exits snake_case events β subscription_created not SubscriptionCreated Both IDs β always provide both email and userId for identity resolution
Installation
To add this skill to your Claude Code environment: npx add-skill outlitai/outlit-agent-skills # or bunx add-skill outlitai/outlit-agent-skills
Category context
Agent frameworks, memory systems, reasoning layers, and model-native orchestration.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
1 Docs
- SKILL.md