claudeinone-cli 1.0.1 → 1.0.3

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

@@ -0,0 +1,96 @@
+# User Onboarding
+
+## Overview
+Guide new users to their first value moment with checklists, product tours, and progressive disclosure.
+
+## Onboarding Checklist Component
+
+```tsx
+interface OnboardingStep {
+  id: string;
+  title: string;
+  description: string;
+  completed: boolean;
+  action?: { label: string; href: string };
+}
+
+export function OnboardingChecklist({ steps }: { steps: OnboardingStep[] }) {
+  const completed = steps.filter(s => s.completed).length;
+  const progress = (completed / steps.length) * 100;
+
+  return (
+    <div className="border rounded-lg p-4">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="font-semibold">Get started ({completed}/{steps.length})</h3>
+        <span className="text-sm text-gray-500">{Math.round(progress)}%</span>
+      </div>
+      <div className="w-full bg-gray-200 rounded-full h-2 mb-4">
+        <div className="bg-blue-600 h-2 rounded-full transition-all" style={{ width: `${progress}%` }} />
+      </div>
+      <ul className="space-y-3">
+        {steps.map(step => (
+          <li key={step.id} className="flex items-start gap-3">
+            <div className={`mt-0.5 flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center
+              ${step.completed ? 'bg-blue-600 border-blue-600' : 'border-gray-300'}`}>
+              {step.completed && <span className="text-white text-xs">✓</span>}
+            </div>
+            <div>
+              <p className={`font-medium ${step.completed ? 'line-through text-gray-400' : ''}`}>{step.title}</p>
+              {!step.completed && step.action && (
+                <a href={step.action.href} className="text-sm text-blue-600 hover:underline">{step.action.label}</a>
+              )}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+## Track Onboarding Progress in DB
+
+```typescript
+// Track completion of each step
+async function markStepComplete(userId: string, step: string) {
+  await prisma.onboardingProgress.upsert({
+    where: { userId_step: { userId, step } },
+    create: { userId, step, completedAt: new Date() },
+    update: { completedAt: new Date() },
+  });
+}
+
+// Check if onboarding is complete
+async function getOnboardingStatus(userId: string) {
+  const REQUIRED_STEPS = ['profile_completed', 'first_project', 'team_invited'];
+  const completed = await prisma.onboardingProgress.findMany({ where: { userId } });
+  const completedSteps = new Set(completed.map(c => c.step));
+  return {
+    steps: REQUIRED_STEPS.map(step => ({ step, completed: completedSteps.has(step) })),
+    isComplete: REQUIRED_STEPS.every(step => completedSteps.has(step)),
+  };
+}
+```
+
+## Send Activation Email Sequence
+
+```typescript
+// lib/onboarding.ts - trigger drip emails
+async function handleUserSignup(user: User) {
+  await sendWelcomeEmail(user);
+
+  // Day 1: if not activated, send tips email
+  await addToEmailQueue({ userId: user.id, template: 'activation-tips', delayMs: 24 * 60 * 60 * 1000 });
+  // Day 3: check-in email
+  await addToEmailQueue({ userId: user.id, template: 'day3-checkin', delayMs: 3 * 24 * 60 * 60 * 1000 });
+}
+```
+
+## Best Practices
+- Show checklist on dashboard (not in a modal that gets dismissed)
+- Auto-detect and pre-complete steps when possible
+- Define your activation event (e.g., "created first project") and optimize for it
+- Remove the checklist once all steps are done
+
+## Resources
+- [Intercom onboarding](https://www.intercom.com/blog/onboarding-saas/)

package/kit/.claude/skills/saas-user-onboarding.md

@@ -0,0 +1,207 @@
+# SaaS User Onboarding
+
+Implementing effective user onboarding flows.
+
+## Onboarding Checklist
+
+```typescript
+interface OnboardingStep {
+  id: string;
+  title: string;
+  description: string;
+  completed: boolean;
+  required: boolean;
+  action?: () => Promise<void>;
+}
+
+interface OnboardingProgress {
+  userId: string;
+  steps: OnboardingStep[];
+  completedAt?: Date;
+  completionPercentage: number;
+}
+
+async function createOnboardingFlow(userId: string) {
+  const steps: OnboardingStep[] = [
+    {
+      id: 'profile',
+      title: 'Complete Profile',
+      description: 'Add name and avatar',
+      completed: false,
+      required: true
+    },
+    {
+      id: 'payment',
+      title: 'Add Payment Method',
+      description: 'Set up billing',
+      completed: false,
+      required: true
+    },
+    {
+      id: 'workspace',
+      title: 'Create First Workspace',
+      description: 'Organize your work',
+      completed: false,
+      required: false
+    },
+    {
+      id: 'invite',
+      title: 'Invite Team Members',
+      description: 'Collaborate with others',
+      completed: false,
+      required: false
+    }
+  ];
+
+  await db.onboarding.create({
+    userId,
+    steps,
+    completionPercentage: 0
+  });
+}
+
+async function completeStep(userId: string, stepId: string) {
+  const progress = await db.onboarding.findByUserId(userId);
+  const step = progress.steps.find(s => s.id === stepId);
+
+  if (step) {
+    step.completed = true;
+
+    const completed = progress.steps.filter(s => s.completed).length;
+    progress.completionPercentage = (completed / progress.steps.length) * 100;
+
+    if (progress.completionPercentage === 100) {
+      progress.completedAt = new Date();
+    }
+
+    await db.onboarding.update(userId, progress);
+  }
+}
+```
+
+## Progress Tracking
+
+```typescript
+// Track engagement metrics
+interface OnboardingMetrics {
+  userId: string;
+  startDate: Date;
+  timeToCompletion?: number;
+  stepsCompleted: number;
+  totalSteps: number;
+  conversionRate: number;
+  churnRisk: boolean;
+}
+
+async function analyzeOnboardingHealth(userId: string) {
+  const progress = await db.onboarding.findByUserId(userId);
+  const user = await db.users.findById(userId);
+
+  const timeToCompletion = progress.completedAt
+    ? progress.completedAt.getTime() - user.createdAt.getTime()
+    : null;
+
+  const metrics: OnboardingMetrics = {
+    userId,
+    startDate: user.createdAt,
+    timeToCompletion: timeToCompletion ? timeToCompletion / 1000 / 60 : undefined, // minutes
+    stepsCompleted: progress.steps.filter(s => s.completed).length,
+    totalSteps: progress.steps.length,
+    conversionRate: progress.completionPercentage,
+    churnRisk: !progress.completedAt && timeToCompletion > 7 * 24 * 60 * 60 * 1000
+  };
+
+  return metrics;
+}
+```
+
+## Interactive Tours
+
+```typescript
+// Using shepherd.js
+import Shepherd from 'shepherd.js';
+
+function initializeProductTour() {
+  const tour = new Shepherd.Tour({
+    useModalOverlay: true,
+    defaultStepOptions: {
+      classes: 'shadow-md bg-white rounded-lg p-4'
+    }
+  });
+
+  tour.addStep({
+    id: 'welcome',
+    title: 'Welcome!',
+    text: 'Let\'s get you started with our platform',
+    buttons: [
+      { action: tour.next, text: 'Next' }
+    ]
+  });
+
+  tour.addStep({
+    id: 'dashboard',
+    attachTo: { element: '.dashboard-nav', on: 'right' },
+    title: 'Dashboard',
+    text: 'View your overview and key metrics',
+    buttons: [
+      { action: tour.back, text: 'Back' },
+      { action: tour.next, text: 'Next' }
+    ]
+  });
+
+  tour.start();
+
+  // Save progress
+  tour.on('complete', () => {
+    completeStep(userId, 'tour');
+  });
+}
+```
+
+## Email Onboarding
+
+```typescript
+// Drip email campaign
+async function startOnboardingEmails(userId: string) {
+  const user = await db.users.findById(userId);
+
+  // Day 0: Welcome
+  await emailService.send(user.email, 'welcome', {
+    name: user.name,
+    dashboardUrl: `https://app.example.com/dashboard`
+  });
+
+  // Day 1: Getting started
+  setTimeout(() => {
+    emailService.send(user.email, 'getting-started', {
+      docsUrl: 'https://docs.example.com'
+    });
+  }, 24 * 60 * 60 * 1000);
+
+  // Day 3: Explore features
+  setTimeout(() => {
+    emailService.send(user.email, 'explore-features');
+  }, 3 * 24 * 60 * 60 * 1000);
+
+  // Day 7: Re-engagement
+  const progress = await db.onboarding.findByUserId(userId);
+  if (progress.completionPercentage < 100) {
+    setTimeout(() => {
+      emailService.send(user.email, 're-engagement');
+    }, 7 * 24 * 60 * 60 * 1000);
+  }
+}
+```
+
+## Best Practices
+
+✅ **Keep it simple** - Minimum required steps
+✅ **Progress visibility** - Show completion percentage
+✅ **Optional tasks** - Don't require all steps
+✅ **Contextual help** - Tips at right moments
+✅ **Track metrics** - Monitor completion rates
+
+## Resources
+
+- [Onboarding Best Practices](https://www.useronboard.com/)
+- [Shepherd.js](https://shepherdjs.dev/)

package/kit/.claude/skills/security-encryption.md

@@ -0,0 +1,216 @@
+# Encryption & Security
+
+Data encryption, hashing, and secure communication.
+
+## Password Hashing
+
+```typescript
+import bcrypt from 'bcrypt';
+
+// Hash password
+async function hashPassword(password: string) {
+  const salt = await bcrypt.genSalt(10);
+  return await bcrypt.hash(password, salt);
+}
+
+// Verify password
+async function verifyPassword(password: string, hash: string) {
+  return await bcrypt.compare(password, hash);
+}
+
+// Usage
+async function registerUser(email: string, password: string) {
+  const hashedPassword = await hashPassword(password);
+  
+  return await db.users.create({
+    email,
+    password: hashedPassword
+  });
+}
+
+async function login(email: string, password: string) {
+  const user = await db.users.findByEmail(email);
+  
+  if (!user) throw new Error('User not found');
+  
+  const valid = await verifyPassword(password, user.password);
+  
+  if (!valid) throw new Error('Invalid password');
+  
+  return user;
+}
+```
+
+## JWT Tokens
+
+```typescript
+import jwt from 'jsonwebtoken';
+
+// Create token
+function createToken(userId: string) {
+  return jwt.sign(
+    { userId, role: 'user' },
+    process.env.JWT_SECRET,
+    { expiresIn: '24h' }
+  );
+}
+
+// Verify token
+function verifyToken(token: string) {
+  try {
+    return jwt.verify(token, process.env.JWT_SECRET);
+  } catch (error) {
+    throw new Error('Invalid token');
+  }
+}
+
+// Middleware
+const authMiddleware = (req: any, res: any, next: any) => {
+  const token = req.headers.authorization?.split(' ')[1];
+  
+  if (!token) {
+    return res.status(401).json({ error: 'No token' });
+  }
+
+  try {
+    req.user = verifyToken(token);
+    next();
+  } catch (error) {
+    res.status(401).json({ error: 'Invalid token' });
+  }
+};
+```
+
+## Data Encryption
+
+```typescript
+import crypto from 'crypto';
+
+// Encrypt sensitive data
+function encryptData(data: string, key: string) {
+  const iv = crypto.randomBytes(16);
+  const cipher = crypto.createCipheriv('aes-256-gcm', Buffer.from(key), iv);
+
+  let encrypted = cipher.update(data, 'utf8', 'hex');
+  encrypted += cipher.final('hex');
+
+  const authTag = cipher.getAuthTag();
+
+  return {
+    iv: iv.toString('hex'),
+    data: encrypted,
+    tag: authTag.toString('hex')
+  };
+}
+
+// Decrypt data
+function decryptData(encrypted: any, key: string) {
+  const decipher = crypto.createDecipheriv(
+    'aes-256-gcm',
+    Buffer.from(key),
+    Buffer.from(encrypted.iv, 'hex')
+  );
+
+  decipher.setAuthTag(Buffer.from(encrypted.tag, 'hex'));
+
+  let decrypted = decipher.update(encrypted.data, 'hex', 'utf8');
+  decrypted += decipher.final('utf8');
+
+  return decrypted;
+}
+```
+
+## HTTPS & TLS
+
+```typescript
+import https from 'https';
+import fs from 'fs';
+
+const options = {
+  key: fs.readFileSync('private-key.pem'),
+  cert: fs.readFileSync('certificate.pem')
+};
+
+https.createServer(options, app).listen(443);
+```
+
+## CORS & CSRF Protection
+
+```typescript
+import cors from 'cors';
+import csrf from 'csurf';
+
+app.use(cors({
+  origin: process.env.ALLOWED_ORIGINS?.split(','),
+  credentials: true
+}));
+
+app.use(csrf({ cookie: false }));
+
+// Include token in forms
+app.get('/form', (req, res) => {
+  res.send(`
+    <form action="/submit" method="POST">
+      <input type="hidden" name="_csrf" value="${req.csrfToken()}">
+      <input type="email" name="email">
+      <button type="submit">Submit</button>
+    </form>
+  `);
+});
+```
+
+## Rate Limiting
+
+```typescript
+import rateLimit from 'express-rate-limit';
+
+const limiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // 100 requests per windowMs
+  message: 'Too many requests',
+  standardHeaders: true,
+  legacyHeaders: false
+});
+
+app.use('/api/', limiter);
+
+// Strict limiter for auth
+const authLimiter = rateLimit({
+  windowMs: 60 * 1000, // 1 minute
+  max: 5 // 5 requests per minute
+});
+
+app.post('/login', authLimiter, (req, res) => {
+  // Handle login
+});
+```
+
+## SQL Injection Prevention
+
+```typescript
+// SAFE: Parameterized queries
+const user = await db.query(
+  'SELECT * FROM users WHERE email = $1',
+  ['user@example.com']
+);
+
+// SAFE: ORM usage
+const user = await User.findOne({ email: 'user@example.com' });
+
+// UNSAFE: String concatenation (never do this!)
+// const user = await db.query(`SELECT * FROM users WHERE email = '${email}'`);
+```
+
+## Best Practices
+
+✅ **Never log passwords** - Remove from logs
+✅ **Use HTTPS** - Always encrypt in transit
+✅ **Rotate secrets** - Update API keys regularly
+✅ **Input validation** - Sanitize all user input
+✅ **Principle of least privilege** - Grant minimal permissions
+
+## Resources
+
+- [OWASP Top 10](https://owasp.org/www-project-top-ten/)
+- [bcrypt Documentation](https://github.com/kelektiv/node.bcrypt.js)
+- [JWT Best Practices](https://tools.ietf.org/html/rfc8725)