claudeinone-cli 1.0.1 → 1.0.3

package/kit/.claude/skills/payment-stripe.md

@@ -0,0 +1,206 @@
+# Stripe Payments
+
+Payment processing for subscriptions, charges, and invoices.
+
+## Setup
+
+```bash
+npm install stripe @stripe/react-stripe-js
+```
+
+## Server-Side Charge
+
+```typescript
+import Stripe from 'stripe';
+
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
+
+async function createPaymentIntent(amountInCents: number) {
+  const paymentIntent = await stripe.paymentIntents.create({
+    amount: amountInCents,
+    currency: 'usd',
+    description: 'Order Payment',
+    metadata: { orderId: '123' }
+  });
+
+  return paymentIntent;
+}
+
+// Express endpoint
+app.post('/api/payment-intent', async (req, res) => {
+  const { amount } = req.body;
+
+  try {
+    const intent = await createPaymentIntent(amount);
+    res.json({ clientSecret: intent.client_secret });
+  } catch (error) {
+    res.status(400).json({ error: (error as Error).message });
+  }
+});
+```
+
+## React Component
+
+```typescript
+import { Elements, CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
+import { loadStripe } from '@stripe/js';
+
+const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY);
+
+function PaymentForm() {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [clientSecret, setClientSecret] = useState('');
+
+  useEffect(() => {
+    fetchPaymentIntent();
+  }, []);
+
+  async function fetchPaymentIntent() {
+    const response = await fetch('/api/payment-intent', {
+      method: 'POST',
+      body: JSON.stringify({ amount: 9999 })
+    });
+    const { clientSecret } = await response.json();
+    setClientSecret(clientSecret);
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    if (!stripe || !elements) return;
+
+    const result = await stripe.confirmCardPayment(clientSecret, {
+      payment_method: {
+        card: elements.getElement(CardElement)!,
+        billing_details: { name: 'Customer' }
+      }
+    });
+
+    if (result.paymentIntent?.status === 'succeeded') {
+      console.log('Payment successful!');
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <CardElement />
+      <button type="submit" disabled={!stripe}>
+        Pay $99.99
+      </button>
+    </form>
+  );
+}
+
+export function CheckoutPage() {
+  return (
+    <Elements stripe={stripePromise}>
+      <PaymentForm />
+    </Elements>
+  );
+}
+```
+
+## Subscriptions
+
+```typescript
+async function createSubscription(customerId: string, priceId: string) {
+  const subscription = await stripe.subscriptions.create({
+    customer: customerId,
+    items: [{ price: priceId }],
+    payment_behavior: 'default_incomplete',
+    expand: ['latest_invoice.payment_intent']
+  });
+
+  return subscription;
+}
+
+async function cancelSubscription(subscriptionId: string) {
+  const deleted = await stripe.subscriptions.del(subscriptionId);
+  return deleted;
+}
+
+// Webhook handler
+app.post('/webhooks/stripe', express.raw({ type: 'application/json' }), async (req, res) => {
+  const sig = req.headers['stripe-signature'] as string;
+  const event = stripe.webhooks.constructEvent(
+    req.body,
+    sig,
+    process.env.STRIPE_WEBHOOK_SECRET
+  );
+
+  switch (event.type) {
+    case 'customer.subscription.created':
+      console.log('Subscription created:', event.data.object);
+      break;
+    case 'customer.subscription.deleted':
+      console.log('Subscription canceled:', event.data.object);
+      break;
+    case 'invoice.payment_succeeded':
+      console.log('Invoice paid:', event.data.object);
+      break;
+  }
+
+  res.json({ received: true });
+});
+```
+
+## Customer Management
+
+```typescript
+async function createCustomer(email: string, name: string) {
+  const customer = await stripe.customers.create({
+    email,
+    name,
+    metadata: { userId: '123' }
+  });
+
+  return customer;
+}
+
+async function updateCustomer(customerId: string, updates: any) {
+  return await stripe.customers.update(customerId, updates);
+}
+
+async function getCustomer(customerId: string) {
+  return await stripe.customers.retrieve(customerId);
+}
+```
+
+## Invoices
+
+```typescript
+async function createInvoice(customerId: string, items: any[]) {
+  const invoice = await stripe.invoices.create({
+    customer: customerId,
+    collection_method: 'charge_automatically',
+    auto_advance: false
+  });
+
+  for (const item of items) {
+    await stripe.invoiceItems.create({
+      invoice: invoice.id,
+      customer: customerId,
+      price: item.priceId,
+      quantity: item.quantity
+    });
+  }
+
+  await stripe.invoices.finalize(invoice.id);
+
+  return invoice;
+}
+```
+
+## Best Practices
+
+✅ **Use Webhooks** - Async payment event handling
+✅ **PCI Compliance** - Never handle raw card data
+✅ **Idempotency** - Use idempotency keys for retries
+✅ **Error handling** - Handle network failures gracefully
+✅ **Reconciliation** - Regularly sync with Stripe
+
+## Resources
+
+- [Stripe Documentation](https://stripe.com/docs)
+- [Stripe API Reference](https://stripe.com/docs/api)

package/kit/.claude/skills/perf-bundle.md

@@ -0,0 +1,100 @@
+# Bundle Optimization
+
+## Overview
+Reduce JavaScript bundle size with code splitting, tree shaking, lazy loading, and dependency auditing.
+
+## Analyze Bundle Size
+
+```bash
+# Vite
+npm install -D rollup-plugin-visualizer
+
+# Next.js
+npm install -D @next/bundle-analyzer
+```
+
+```typescript
+// next.config.ts
+import bundleAnalyzer from '@next/bundle-analyzer';
+const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === 'true' });
+export default withBundleAnalyzer({});
+```
+
+```bash
+ANALYZE=true npm run build
+```
+
+## Code Splitting with React.lazy
+
+```tsx
+import { lazy, Suspense } from 'react';
+
+// Load only when needed
+const Dashboard = lazy(() => import('./Dashboard'));
+const Settings = lazy(() => import('./Settings'));
+
+export function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Routes>
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/settings" element={<Settings />} />
+      </Routes>
+    </Suspense>
+  );
+}
+```
+
+## Dynamic Import with Preloading
+
+```typescript
+// Preload on hover for faster perceived navigation
+function NavLink({ to, component }: { to: string; component: () => Promise<any> }) {
+  return (
+    <Link to={to} onMouseEnter={() => component()}>
+      {/* ... */}
+    </Link>
+  );
+}
+
+<NavLink to="/dashboard" component={() => import('./Dashboard')} />
+```
+
+## Tree Shaking — Named Imports
+
+```typescript
+// BAD — imports entire lodash bundle
+import _ from 'lodash';
+_.debounce(fn, 300);
+
+// GOOD — only imports debounce
+import debounce from 'lodash/debounce';
+// or
+import { debounce } from 'lodash-es'; // ES module version
+```
+
+## Next.js Dynamic Imports
+
+```typescript
+import dynamic from 'next/dynamic';
+
+// Load heavy component only on client, not in SSR
+const HeavyChart = dynamic(() => import('./HeavyChart'), {
+  ssr: false,
+  loading: () => <p>Loading chart...</p>
+});
+
+// Load on user interaction
+const Modal = dynamic(() => import('./Modal'));
+```
+
+## Bundle Size Checklist
+- [ ] `lodash` → `lodash-es` or individual imports
+- [ ] `moment.js` → `date-fns` (60x smaller)
+- [ ] `@mui/material` → import from subpath, not root
+- [ ] Images: use `<Image>` in Next.js with proper sizing
+- [ ] Check `bundlephobia.com` before adding any dependency
+
+## Resources
+- [Bundlephobia](https://bundlephobia.com) — check package sizes
+- [Next.js bundle analysis](https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer)

package/kit/.claude/skills/perf-web-vitals.md

@@ -0,0 +1,102 @@
+# Web Vitals Optimization
+
+## Overview
+Core Web Vitals (LCP, INP, CLS) measure real-user experience. Optimize them to improve SEO and conversions.
+
+## Measure with web-vitals
+
+```bash
+npm install web-vitals
+```
+
+```typescript
+import { onCLS, onINP, onLCP, onTTFB, type Metric } from 'web-vitals';
+
+function sendToAnalytics({ name, value, id }: Metric) {
+  fetch('/api/vitals', {
+    method: 'POST',
+    body: JSON.stringify({ name, value, id, page: location.pathname }),
+    keepalive: true,
+  });
+}
+
+onCLS(sendToAnalytics);
+onINP(sendToAnalytics);
+onLCP(sendToAnalytics);
+onTTFB(sendToAnalytics);
+```
+
+## LCP — Largest Contentful Paint (target: < 2.5s)
+
+```html
+<!-- Preload the LCP image -->
+<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />
+
+<!-- Avoid lazy loading above-the-fold images -->
+<img src="/hero.webp" alt="Hero" fetchpriority="high" />
+```
+
+```tsx
+// Next.js — mark above-fold images as priority
+import Image from 'next/image';
+<Image src="/hero.webp" alt="Hero" priority width={1200} height={600} />
+```
+
+## CLS — Cumulative Layout Shift (target: < 0.1)
+
+```tsx
+// Always set width/height on images
+<Image src="/photo.jpg" width={400} height={300} alt="" />
+
+// Reserve space for dynamic content
+<div style={{ minHeight: '200px' }}>
+  {loaded ? <DynamicContent /> : <Skeleton />}
+</div>
+
+// Avoid inserting content above existing content
+// Use fixed headers, not sticky
+```
+
+## INP — Interaction to Next Paint (target: < 200ms)
+
+```typescript
+// Defer non-critical work
+button.addEventListener('click', (e) => {
+  // Critical: immediate feedback
+  setLoadingState(true);
+
+  // Defer heavy processing
+  setTimeout(() => {
+    processData(largeDataset);
+    setLoadingState(false);
+  }, 0);
+});
+
+// Use transitions API for non-urgent updates (React 18+)
+import { startTransition } from 'react';
+startTransition(() => { setFilteredResults(heavyFilter(data)); });
+```
+
+## TTFB — Time to First Byte (target: < 800ms)
+
+```typescript
+// Next.js: use ISR or SSG where possible
+export const revalidate = 60; // ISR: regenerate every 60s
+
+// Cache expensive DB queries
+const data = await unstable_cache(
+  () => prisma.post.findMany({ take: 10 }),
+  ['homepage-posts'],
+  { revalidate: 60 }
+)();
+```
+
+## Best Practices
+- LCP: Preload hero images, use CDN, avoid render-blocking resources
+- CLS: Always set dimensions on media, avoid dynamic insertions above content
+- INP: Debounce inputs, defer heavy JS, use `startTransition` for state updates
+- TTFB: Use CDN, cache at edge, reduce server processing time
+
+## Resources
+- [Core Web Vitals](https://web.dev/articles/vitals)
+- [Lighthouse](https://developer.chrome.com/docs/lighthouse/)

package/kit/.claude/skills/performance-database-connection-pooling.md

@@ -0,0 +1,67 @@
+# Database Connection Pooling
+
+Efficient database connection management.
+
+## PostgreSQL Pooling
+
+```typescript
+import { Pool } from 'pg';
+
+const pool = new Pool({
+  host: 'localhost',
+  port: 5432,
+  database: 'myapp',
+  user: 'user',
+  password: 'password',
+  max: 20,              // Maximum connections
+  min: 5,               // Minimum connections
+  idleTimeoutMillis: 30000,
+  connectionTimeoutMillis: 2000
+});
+
+pool.on('error', (err) => {
+  console.error('Unexpected error on idle client', err);
+  process.exit(-1);
+});
+
+export async function query(text: string, values?: any[]) {
+  return pool.query(text, values);
+}
+```
+
+## Connection Reuse
+
+```typescript
+// Good: Reuse connections
+const result = await pool.query('SELECT * FROM users WHERE id = $1', [1]);
+
+// Avoid: Creating new connections
+const client = new Client(); // Don't do this repeatedly
+await client.connect();
+const result = await client.query('...');
+await client.disconnect();
+```
+
+## Monitoring
+
+```typescript
+setInterval(() => {
+  console.log('Pool stats:', {
+    total: pool.totalCount,
+    idle: pool.idleCount,
+    waiting: pool.waitingCount
+  });
+}, 10000);
+```
+
+## Best Practices
+
+✅ **Size appropriately** - Not too large, not too small
+✅ **Monitor metrics** - Track usage
+✅ **Connection timeouts** - Prevent hangs
+✅ **Error handling** - Graceful degradation
+✅ **Idle timeouts** - Clean up unused connections
+
+## Resources
+
+- [PG Pool Documentation](https://node-postgres.com/api/pool)

package/kit/.claude/skills/performance-metrics.md

@@ -0,0 +1,73 @@
+# Performance Metrics
+
+## Overview
+Track Core Web Vitals and custom metrics with real-user monitoring (RUM).
+
+## web-vitals Package
+
+```bash
+npm install web-vitals
+```
+
+```typescript
+import { onCLS, onINP, onLCP, onTTFB, type Metric } from 'web-vitals';
+
+function sendToAnalytics(metric: Metric) {
+  const body = JSON.stringify({
+    name: metric.name,
+    value: metric.value,
+    page: window.location.pathname,
+  });
+  navigator.sendBeacon('/api/metrics', body);
+}
+
+onCLS(sendToAnalytics);
+onLCP(sendToAnalytics);
+onINP(sendToAnalytics);
+onTTFB(sendToAnalytics);
+```
+
+## Custom Performance Marks
+
+```typescript
+export async function measureAsync<T>(name: string, fn: () => Promise<T>): Promise<T> {
+  const start = performance.now();
+  const result = await fn();
+  const duration = performance.now() - start;
+  console.log(`${name}: ${duration.toFixed(2)}ms`);
+  return result;
+}
+
+// Usage
+const user = await measureAsync('fetchUser', () => getUser(id));
+```
+
+## API Latency Middleware (Express)
+
+```typescript
+export function metricsMiddleware(req: Request, res: Response, next: NextFunction) {
+  const start = process.hrtime.bigint();
+  res.on('finish', () => {
+    const ms = Number(process.hrtime.bigint() - start) / 1_000_000;
+    console.log({ method: req.method, path: req.path, status: res.statusCode, ms: ms.toFixed(2) });
+  });
+  next();
+}
+```
+
+## Thresholds (Core Web Vitals)
+| Metric | Good | Poor |
+|--------|------|------|
+| LCP | < 2.5s | > 4s |
+| INP | < 200ms | > 500ms |
+| CLS | < 0.1 | > 0.25 |
+| TTFB | < 800ms | > 1.8s |
+
+## Best Practices
+- Measure real users (RUM) not just Lighthouse lab scores
+- Track p75 and p95, not averages
+- Set performance budgets in CI with `bundlesize` or `lighthouse-ci`
+
+## Resources
+- [web-vitals library](https://github.com/GoogleChrome/web-vitals)
+- [Core Web Vitals](https://web.dev/explore/metrics)