claudeinone-cli 1.0.1 → 1.0.3

package/kit/.claude/skills/realtime-subscriptions.md

@@ -0,0 +1,218 @@
+# Real-Time Subscriptions
+
+WebSockets and GraphQL subscriptions for live updates.
+
+## WebSockets
+
+```typescript
+import { WebSocketServer } from 'ws';
+import http from 'http';
+
+const server = http.createServer();
+const wss = new WebSocketServer({ server });
+
+const clients = new Map<string, WebSocket>();
+
+wss.on('connection', (ws: WebSocket) => {
+  const clientId = crypto.randomUUID();
+  clients.set(clientId, ws);
+
+  ws.on('message', (message: string) => {
+    const data = JSON.parse(message);
+
+    switch (data.type) {
+      case 'subscribe':
+        // Subscribe to updates
+        handleSubscribe(clientId, data.channel);
+        break;
+      case 'message':
+        // Broadcast to all connected clients
+        broadcast(data);
+        break;
+    }
+  });
+
+  ws.on('close', () => {
+    clients.delete(clientId);
+  });
+});
+
+function broadcast(message: any) {
+  clients.forEach(client => {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(JSON.stringify(message));
+    }
+  });
+}
+
+function handleSubscribe(clientId: string, channel: string) {
+  const client = clients.get(clientId);
+  if (client) {
+    client.send(JSON.stringify({
+      type: 'subscribed',
+      channel
+    }));
+  }
+}
+
+server.listen(3000);
+```
+
+## Socket.io with Rooms
+
+```typescript
+import { createServer } from 'http';
+import { Server } from 'socket.io';
+
+const server = createServer();
+const io = new Server(server, {
+  cors: { origin: '*' }
+});
+
+io.on('connection', (socket) => {
+  console.log(`User connected: ${socket.id}`);
+
+  // Join room
+  socket.on('join-conversation', (conversationId) => {
+    socket.join(`conversation:${conversationId}`);
+  });
+
+  // Send message to room
+  socket.on('message', (data) => {
+    io.to(`conversation:${data.conversationId}`).emit('new-message', {
+      userId: socket.id,
+      ...data
+    });
+  });
+
+  // Leave room
+  socket.on('leave-conversation', (conversationId) => {
+    socket.leave(`conversation:${conversationId}`);
+  });
+
+  socket.on('disconnect', () => {
+    console.log(`User disconnected: ${socket.id}`);
+  });
+});
+
+server.listen(3000);
+```
+
+## GraphQL Subscriptions
+
+```typescript
+import { gql } from 'apollo-server';
+
+const typeDefs = gql`
+  type Subscription {
+    messageAdded(conversationId: ID!): Message!
+    userStatusChanged: User!
+  }
+`;
+
+const resolvers = {
+  Subscription: {
+    messageAdded: {
+      subscribe: (_, { conversationId }) => {
+        return pubSub.asyncIterator([`MESSAGE_ADDED_${conversationId}`]);
+      }
+    },
+    userStatusChanged: {
+      subscribe: () => {
+        return pubSub.asyncIterator(['USER_STATUS_CHANGED']);
+      }
+    }
+  }
+};
+
+// Publish events
+import { PubSub } from 'apollo-server';
+
+const pubSub = new PubSub();
+
+async function createMessage(conversationId: string, message: any) {
+  const newMessage = await db.messages.create(message);
+
+  pubSub.publish(`MESSAGE_ADDED_${conversationId}`, {
+    messageAdded: newMessage
+  });
+
+  return newMessage;
+}
+
+async function updateUserStatus(userId: string, status: string) {
+  const user = await db.users.update(userId, { status });
+
+  pubSub.publish('USER_STATUS_CHANGED', {
+    userStatusChanged: user
+  });
+
+  return user;
+}
+```
+
+## React Hook for Subscriptions
+
+```typescript
+import { useEffect, useState } from 'react';
+import { useSubscription, gql } from '@apollo/client';
+
+const MESSAGE_SUBSCRIPTION = gql`
+  subscription OnMessageAdded($conversationId: ID!) {
+    messageAdded(conversationId: $conversationId) {
+      id
+      content
+      sender {
+        id
+        name
+      }
+      createdAt
+    }
+  }
+`;
+
+export function useConversationMessages(conversationId: string) {
+  const { data, error, loading } = useSubscription(MESSAGE_SUBSCRIPTION, {
+    variables: { conversationId }
+  });
+
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  useEffect(() => {
+    if (data?.messageAdded) {
+      setMessages(prev => [...prev, data.messageAdded]);
+    }
+  }, [data]);
+
+  return { messages, loading, error };
+}
+
+// Usage
+export function ConversationView({ conversationId }: any) {
+  const { messages } = useConversationMessages(conversationId);
+
+  return (
+    <div>
+      {messages.map(msg => (
+        <div key={msg.id}>
+          <strong>{msg.sender.name}:</strong> {msg.content}
+        </div>
+      ))}
+    </div>
+  );
+}
+```
+
+## Best Practices
+
+✅ **Heartbeat** - Send ping/pong to detect disconnects
+✅ **Reconnection** - Auto-reconnect with exponential backoff
+✅ **Room management** - Use rooms for efficient broadcasting
+✅ **Message compression** - Reduce bandwidth usage
+✅ **Error handling** - Graceful degradation
+
+## Resources
+
+- [Socket.io Documentation](https://socket.io/docs/)
+- [GraphQL Subscriptions](https://www.apollographql.com/docs/apollo-server/data/subscriptions/)
+- [WebSocket API](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)

package/kit/.claude/skills/saas-ab-testing.md

@@ -0,0 +1,90 @@
+# A/B Testing
+
+## Overview
+Run controlled experiments to validate product decisions with statistical confidence.
+
+## PostHog Feature Flags (Self-hosted / Cloud)
+
+```bash
+npm install posthog-js posthog-node
+```
+
+```typescript
+// client-side
+import posthog from 'posthog-js';
+
+posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+  api_host: 'https://app.posthog.com',
+});
+
+// Get experiment variant
+const variant = posthog.getFeatureFlag('checkout-button-color');
+// Returns: 'control', 'variant-blue', 'variant-green'
+```
+
+```typescript
+// server-side (Next.js API route)
+import { PostHog } from 'posthog-node';
+const client = new PostHog(process.env.POSTHOG_API_KEY!);
+
+export async function GET(req: Request) {
+  const userId = await getUserId(req);
+  const variant = await client.getFeatureFlag('new-onboarding', userId);
+  return Response.json({ variant });
+}
+```
+
+## Simple In-House A/B Test
+
+```typescript
+// Deterministic assignment by user ID (consistent across sessions)
+function getVariant(userId: string, experimentId: string, variants: string[]): string {
+  const hash = require('crypto')
+    .createHash('md5')
+    .update(`${userId}:${experimentId}`)
+    .digest('hex');
+  const index = parseInt(hash.slice(0, 8), 16) % variants.length;
+  return variants[index];
+}
+
+// Usage
+const variant = getVariant(user.id, 'checkout-cta', ['control', 'treatment']);
+```
+
+## Track Conversion Events
+
+```typescript
+// Track experiment exposure
+posthog.capture('$experiment_started', {
+  '$experiment_name': 'checkout-cta',
+  '$variant': variant,
+});
+
+// Track goal
+posthog.capture('checkout_completed', { variant, revenue: 49 });
+```
+
+## Statistical Significance (Basic)
+
+```typescript
+function zScore(control: { conversions: number; visitors: number }, 
+                treatment: { conversions: number; visitors: number }): number {
+  const p1 = control.conversions / control.visitors;
+  const p2 = treatment.conversions / treatment.visitors;
+  const pooled = (control.conversions + treatment.conversions) / (control.visitors + treatment.visitors);
+  return (p2 - p1) / Math.sqrt(pooled * (1 - pooled) * (1 / control.visitors + 1 / treatment.visitors));
+}
+
+const z = zScore({ conversions: 120, visitors: 1000 }, { conversions: 145, visitors: 1000 });
+const significant = Math.abs(z) > 1.96; // 95% confidence
+```
+
+## Best Practices
+- Run tests for at least 2 weeks to account for day-of-week effects
+- Only test one change per experiment
+- Pre-determine sample size before starting (avoid stopping early)
+- Use server-side assignment to prevent flicker
+
+## Resources
+- [PostHog experiments](https://posthog.com/docs/experiments/manual)
+- [Evan Miller A/B calculator](https://www.evanmiller.org/ab-testing/sample-size.html)

package/kit/.claude/skills/saas-analytics.md

@@ -0,0 +1,113 @@
+# SaaS Analytics
+
+## Overview
+Track user behavior, product usage, and business metrics to drive data-informed decisions.
+
+## PostHog Integration
+
+```bash
+npm install posthog-js posthog-node
+```
+
+```tsx
+// app/layout.tsx — client-side tracking
+'use client';
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+import { useEffect } from 'react';
+
+posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, { api_host: 'https://app.posthog.com' });
+
+export function PHProvider({ children }: { children: React.ReactNode }) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
+```
+
+## Track Events
+
+```typescript
+import { usePostHog } from 'posthog-js/react';
+
+function CheckoutButton({ price }: { price: number }) {
+  const posthog = usePostHog();
+
+  return (
+    <button onClick={() => {
+      posthog.capture('checkout_initiated', {
+        plan: 'pro',
+        price,
+        source: 'pricing_page',
+      });
+    }}>
+      Upgrade to Pro
+    </button>
+  );
+}
+```
+
+## Identify Users
+
+```typescript
+// After login — tie events to user
+posthog.identify(user.id, {
+  email: user.email,
+  name: user.name,
+  plan: user.plan,
+  createdAt: user.createdAt,
+  company: user.company,
+});
+
+// Reset on logout
+posthog.reset();
+```
+
+## Server-Side Event Tracking
+
+```typescript
+import { PostHog } from 'posthog-node';
+const analytics = new PostHog(process.env.POSTHOG_API_KEY!);
+
+// Track subscription upgrade
+await analytics.capture({
+  distinctId: userId,
+  event: 'subscription_upgraded',
+  properties: { from_plan: 'free', to_plan: 'pro', revenue: 49 }
+});
+
+// Flush before serverless function exits
+await analytics.shutdown();
+```
+
+## Key SaaS Metrics to Track
+
+```typescript
+// Events to capture
+const EVENTS = {
+  // Acquisition
+  SIGNUP: 'user_signed_up',
+  FIRST_LOGIN: 'user_first_login',
+
+  // Activation
+  ONBOARDING_COMPLETED: 'onboarding_completed',
+  FIRST_VALUE_ACTION: 'first_project_created',
+
+  // Retention
+  FEATURE_USED: 'feature_used',
+  SESSION_STARTED: '$pageview',
+
+  // Revenue
+  UPGRADE_CLICKED: 'upgrade_clicked',
+  CHECKOUT_COMPLETED: 'subscription_created',
+  CHURNED: 'subscription_cancelled',
+};
+```
+
+## Best Practices
+- Identify users right after authentication
+- Track activation event (when user gets first value)
+- Use `$set` properties for persistent user attributes
+- Group users by organization for B2B analytics
+
+## Resources
+- [PostHog docs](https://posthog.com/docs)
+- [Mixpanel](https://developer.mixpanel.com/docs)

package/kit/.claude/skills/saas-billing.md

@@ -0,0 +1,106 @@
+# SaaS Billing with Stripe
+
+## Overview
+Implement subscription billing with Stripe: pricing plans, checkout, webhooks, and customer portal.
+
+## Setup
+
+```bash
+npm install stripe @stripe/stripe-js
+```
+
+```env
+STRIPE_SECRET_KEY=sk_live_...
+STRIPE_WEBHOOK_SECRET=whsec_...
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...
+```
+
+## Create Checkout Session
+
+```typescript
+// app/api/checkout/route.ts
+import Stripe from 'stripe';
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
+
+export async function POST(req: Request) {
+  const { userId, priceId, email } = await req.json();
+
+  const session = await stripe.checkout.sessions.create({
+    customer_email: email,
+    mode: 'subscription',
+    line_items: [{ price: priceId, quantity: 1 }],
+    success_url: `${process.env.NEXT_PUBLIC_URL}/dashboard?success=true`,
+    cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing`,
+    metadata: { userId },
+    subscription_data: { metadata: { userId } },
+  });
+
+  return Response.json({ url: session.url });
+}
+```
+
+## Webhook Handler
+
+```typescript
+// app/api/webhooks/stripe/route.ts
+import Stripe from 'stripe';
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
+
+export async function POST(req: Request) {
+  const sig = req.headers.get('stripe-signature')!;
+  const body = await req.text();
+
+  let event: Stripe.Event;
+  try {
+    event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!);
+  } catch {
+    return Response.json({ error: 'Invalid signature' }, { status: 400 });
+  }
+
+  const userId = (event.data.object as any).metadata?.userId;
+
+  switch (event.type) {
+    case 'customer.subscription.created':
+    case 'customer.subscription.updated': {
+      const sub = event.data.object as Stripe.Subscription;
+      await prisma.user.update({
+        where: { id: userId },
+        data: {
+          stripeCustomerId: sub.customer as string,
+          stripeSubscriptionId: sub.id,
+          plan: sub.status === 'active' ? 'pro' : 'free',
+          planExpiresAt: new Date(sub.current_period_end * 1000),
+        }
+      });
+      break;
+    }
+    case 'customer.subscription.deleted':
+      await prisma.user.update({ where: { id: userId }, data: { plan: 'free' } });
+      break;
+  }
+
+  return Response.json({ received: true });
+}
+```
+
+## Customer Portal
+
+```typescript
+export async function POST(req: Request) {
+  const user = await getCurrentUser(req);
+  const session = await stripe.billingPortal.sessions.create({
+    customer: user.stripeCustomerId,
+    return_url: `${process.env.NEXT_PUBLIC_URL}/dashboard`,
+  });
+  return Response.json({ url: session.url });
+}
+```
+
+## Best Practices
+- Always verify webhook signatures
+- Store `stripeCustomerId` in your DB — never recreate customers
+- Use `idempotency_key` for retry-safe checkout session creation
+- Handle `payment_intent.payment_failed` to notify users of failed renewals
+
+## Resources
+- [Stripe Billing docs](https://stripe.com/docs/billing)

package/kit/.claude/skills/saas-email.md

@@ -0,0 +1,88 @@
+# Transactional Email
+
+## Overview
+Send reliable transactional emails (welcome, password reset, receipts) using Resend with React Email templates.
+
+## Setup
+
+```bash
+npm install resend @react-email/components
+```
+
+```env
+RESEND_API_KEY=re_...
+FROM_EMAIL=noreply@yourdomain.com
+```
+
+## React Email Template
+
+```tsx
+// emails/WelcomeEmail.tsx
+import { Html, Head, Body, Container, Heading, Text, Button, Hr } from '@react-email/components';
+
+export function WelcomeEmail({ name, confirmUrl }: { name: string; confirmUrl: string }) {
+  return (
+    <Html>
+      <Head />
+      <Body style={{ fontFamily: 'sans-serif', backgroundColor: '#f4f4f5' }}>
+        <Container style={{ maxWidth: '580px', margin: '0 auto', padding: '20px' }}>
+          <Heading>Welcome to MyApp, {name}!</Heading>
+          <Text>Thanks for signing up. Confirm your email to get started.</Text>
+          <Button href={confirmUrl}
+            style={{ backgroundColor: '#0070f3', color: '#fff', padding: '12px 24px', borderRadius: '6px' }}>
+            Confirm Email
+          </Button>
+          <Hr />
+          <Text style={{ color: '#888', fontSize: '12px' }}>
+            If you didn&#39;t sign up, ignore this email.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+```
+
+## Send Email
+
+```typescript
+// lib/email.ts
+import { Resend } from 'resend';
+import { WelcomeEmail } from '@/emails/WelcomeEmail';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export async function sendWelcomeEmail(user: { email: string; name: string; confirmUrl: string }) {
+  return resend.emails.send({
+    from: process.env.FROM_EMAIL!,
+    to: user.email,
+    subject: `Welcome to MyApp, ${user.name}!`,
+    react: WelcomeEmail({ name: user.name, confirmUrl: user.confirmUrl }),
+  });
+}
+
+export async function sendPasswordReset(email: string, resetUrl: string) {
+  return resend.emails.send({
+    from: process.env.FROM_EMAIL!,
+    to: email,
+    subject: 'Reset your password',
+    html: `<p>Reset your password: <a href="${resetUrl}">Click here</a></p>`,
+  });
+}
+```
+
+## Preview Emails in Development
+
+```bash
+npx email dev --dir emails --port 3001
+```
+
+## Best Practices
+- Preview emails at `localhost:3001` with `@react-email/components` dev server
+- Set SPF, DKIM, DMARC DNS records for deliverability
+- Use `Resend.batch.send()` for bulk sends
+- Store email send records in DB for debugging delivery issues
+
+## Resources
+- [Resend docs](https://resend.com/docs)
+- [React Email](https://react.email/docs/introduction)

package/kit/.claude/skills/saas-feature-flags.md

@@ -0,0 +1,83 @@
+# Feature Flags
+
+## Overview
+Control feature rollouts, kill switches, and A/B tests without code deployments.
+
+## PostHog Feature Flags
+
+```typescript
+// Server-side flag check
+import { PostHog } from 'posthog-node';
+const posthog = new PostHog(process.env.POSTHOG_API_KEY!);
+
+export async function isFeatureEnabled(flag: string, userId: string): Promise<boolean> {
+  return !!(await posthog.isFeatureEnabled(flag, userId));
+}
+
+// In API route
+const canUseNewEditor = await isFeatureEnabled('new-editor', userId);
+if (canUseNewEditor) return newEditorResponse();
+```
+
+## Simple Database-Driven Flags
+
+```typescript
+// Simple flag system without third-party
+const FLAGS_CACHE = new Map<string, { value: boolean; expiry: number }>();
+
+async function getFlag(name: string): Promise<boolean> {
+  const cached = FLAGS_CACHE.get(name);
+  if (cached && cached.expiry > Date.now()) return cached.value;
+
+  const flag = await prisma.featureFlag.findUnique({ where: { name } });
+  const value = flag?.enabled ?? false;
+  FLAGS_CACHE.set(name, { value, expiry: Date.now() + 60_000 }); // 60s cache
+  return value;
+}
+
+// Schema
+// model FeatureFlag { name String @id; enabled Boolean @default(false); }
+```
+
+## Percentage Rollout
+
+```typescript
+function isInRollout(userId: string, percentage: number): boolean {
+  const hash = parseInt(
+    require('crypto').createHash('sha256').update(userId).digest('hex').slice(0, 4),
+    16
+  );
+  return (hash % 100) < percentage;
+}
+
+// Enable for 10% of users
+const showBetaFeature = isInRollout(userId, 10);
+```
+
+## Next.js Middleware with Flags
+
+```typescript
+// middleware.ts
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function middleware(req: NextRequest) {
+  const userId = req.cookies.get('userId')?.value;
+  if (!userId) return NextResponse.next();
+
+  // Redirect new-checkout test group
+  if (req.nextUrl.pathname === '/checkout' && await isFeatureEnabled('new-checkout', userId)) {
+    return NextResponse.rewrite(new URL('/checkout-v2', req.url));
+  }
+  return NextResponse.next();
+}
+```
+
+## Best Practices
+- Clean up flags after full rollout — avoid flag debt
+- Name flags with intent: `new-checkout-flow` not `experiment-123`
+- Add an emergency kill switch for every major feature
+- Log flag evaluations for debugging unexpected behavior
+
+## Resources
+- [PostHog feature flags](https://posthog.com/docs/feature-flags)
+- [Unleash](https://www.getunleash.io) — open-source alternative