claudeinone-cli 1.0.2 → 1.0.3

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

@@ -0,0 +1,208 @@
+# Performance Optimization
+
+Techniques for improving application speed and efficiency.
+
+## Code Splitting
+
+```typescript
+// Next.js dynamic imports
+import dynamic from 'next/dynamic';
+
+const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
+  loading: () => <p>Loading...</p>,
+  ssr: false
+});
+
+export default function Page() {
+  return <HeavyComponent />;
+}
+```
+
+## Image Optimization
+
+```jsx
+import Image from 'next/image';
+
+// Automatic format conversion, lazy loading, responsive
+<Image
+  src="/large-image.jpg"
+  alt="Description"
+  width={800}
+  height={600}
+  priority // Load immediately (not lazy)
+  quality={80} // Compress
+/>
+```
+
+## Database Query Optimization
+
+```typescript
+// Bad: N+1 queries
+const users = await db.users.find();
+for (const user of users) {
+  user.posts = await db.posts.find({ userId: user.id }); // Runs for each user!
+}
+
+// Good: Batch query
+const users = await db.users.find({
+  include: { posts: true }
+});
+
+// Good: Specific columns only
+const users = await db.users.find({
+  select: { id: true, email: true, name: true }
+});
+
+// Good: Pagination
+const page = 1;
+const pageSize = 20;
+const users = await db.users.find({
+  skip: (page - 1) * pageSize,
+  take: pageSize
+});
+```
+
+## Caching Strategy
+
+```typescript
+// Cache database queries
+async function getCachedUser(userId: string) {
+  const cacheKey = `user:${userId}`;
+  let user = await redis.get(cacheKey);
+  
+  if (user) {
+    return JSON.parse(user);
+  }
+
+  user = await db.users.findById(userId);
+  
+  // Cache for 1 hour
+  await redis.set(cacheKey, JSON.stringify(user), 'EX', 3600);
+  
+  return user;
+}
+
+// Invalidate on update
+async function updateUser(userId: string, data: any) {
+  const user = await db.users.update(userId, data);
+  
+  // Clear cache
+  await redis.del(`user:${userId}`);
+  
+  return user;
+}
+```
+
+## Frontend Performance
+
+```typescript
+// Use useCallback to prevent unnecessary re-renders
+import { useCallback, useMemo } from 'react';
+
+export function DataTable({ data }) {
+  const handleSort = useCallback((column) => {
+    // Only changes if data changes
+  }, [data]);
+
+  const sortedData = useMemo(() => {
+    return data.sort();
+  }, [data]);
+
+  return <Table data={sortedData} onSort={handleSort} />;
+}
+
+// Virtual scrolling for large lists
+import { FixedSizeList } from 'react-window';
+
+function VirtualList({ items }) {
+  return (
+    <FixedSizeList
+      height={600}
+      itemCount={items.length}
+      itemSize={50}
+    >
+      {({ index, style }) => (
+        <div style={style}>{items[index].name}</div>
+      )}
+    </FixedSizeList>
+  );
+}
+```
+
+## Compression
+
+```bash
+# Enable gzip compression
+# nginx.conf
+gzip on;
+gzip_types text/plain application/json application/javascript;
+gzip_min_length 1000;
+```
+
+```typescript
+// Express middleware
+import compression from 'compression';
+
+app.use(compression());
+```
+
+## Lazy Loading
+
+```jsx
+// Images
+<img src="placeholder.jpg" loading="lazy" alt="..." />
+
+// Components
+import { Suspense, lazy } from 'react';
+
+const Modal = lazy(() => import('./Modal'));
+
+export function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Modal />
+    </Suspense>
+  );
+}
+```
+
+## Monitoring Performance
+
+```typescript
+// Measure function execution
+function measurePerformance<T>(
+  fn: () => T,
+  label: string
+): T {
+  const start = performance.now();
+  const result = fn();
+  const duration = performance.now() - start;
+  
+  console.log(`${label}: ${duration.toFixed(2)}ms`);
+  
+  return result;
+}
+
+// Web Vitals
+import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
+
+getCLS(console.log);
+getFID(console.log);
+getFCP(console.log);
+getLCP(console.log);
+getTTFB(console.log);
+```
+
+## Best Practices
+
+✅ **Code splitting** - Load what you need
+✅ **Caching** - Cache database and API responses
+✅ **Database indexing** - Index frequently queried columns
+✅ **Lazy loading** - Defer non-critical resources
+✅ **Monitoring** - Track performance metrics
+
+## Resources
+
+- [Next.js Performance](https://nextjs.org/learn/seo/web-performance)
+- [Web Vitals](https://web.dev/vitals/)
+- [Chrome DevTools](https://developer.chrome.com/docs/devtools/)

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

@@ -0,0 +1,169 @@
+# Web Vitals & UX Metrics
+
+Measuring and optimizing user experience metrics.
+
+## Core Web Vitals
+
+```typescript
+// Measure Core Web Vitals
+import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
+
+// Cumulative Layout Shift
+getCLS(metric => {
+  console.log('CLS:', metric.value); // Goal: < 0.1
+});
+
+// First Input Delay
+getFID(metric => {
+  console.log('FID:', metric.value); // Goal: < 100ms
+});
+
+// First Contentful Paint
+getFCP(metric => {
+  console.log('FCP:', metric.value); // Goal: < 1.8s
+});
+
+// Largest Contentful Paint
+getLCP(metric => {
+  console.log('LCP:', metric.value); // Goal: < 2.5s
+});
+
+// Time to First Byte
+getTTFB(metric => {
+  console.log('TTFB:', metric.value); // Goal: < 600ms
+});
+```
+
+## Monitoring in Production
+
+```typescript
+// Send metrics to analytics
+import { getCLS, getFID, getLCP } from 'web-vitals';
+
+function sendMetric(metric: any) {
+  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon('/api/metrics', JSON.stringify(metric));
+  } else {
+    fetch('/api/metrics', {
+      method: 'POST',
+      body: JSON.stringify(metric),
+      keepalive: true
+    });
+  }
+}
+
+getCLS(sendMetric);
+getFID(sendMetric);
+getLCP(sendMetric);
+
+// Backend to store metrics
+app.post('/api/metrics', async (req, res) => {
+  const metric = req.body;
+
+  await db.metrics.create({
+    name: metric.name,
+    value: metric.value,
+    rating: metric.rating,
+    timestamp: new Date(),
+    url: req.headers.referer
+  });
+
+  res.json({ ok: true });
+});
+```
+
+## Performance Budgets
+
+```typescript
+// package.json
+{
+  "bundlesize": [
+    {
+      "path": "./dist/main.js",
+      "maxSize": "100 kB"
+    },
+    {
+      "path": "./dist/*.js",
+      "maxSize": "50 kB"
+    }
+  ]
+}
+```
+
+## Image Optimization
+
+```typescript
+// Next.js Image with automatic optimization
+import Image from 'next/image';
+
+<Image
+  src="/large-photo.jpg"
+  alt="Photo"
+  width={1200}
+  height={800}
+  quality={75}
+  priority={false}
+  placeholder="blur"
+/>
+
+// Manual optimization
+function optimizeImage(src: string, format: 'webp' | 'avif' = 'webp') {
+  return `${src}?fm=${format}&q=80&w=1200`;
+}
+```
+
+## Interaction to Next Paint (INP)
+
+```typescript
+import { onINP } from 'web-vitals';
+
+onINP(metric => {
+  console.log('INP:', metric.value); // Goal: < 200ms
+  
+  // Track which interactions are slow
+  if (metric.value > 200) {
+    console.warn('Slow interaction:', {
+      element: metric.attribution?.interactionTarget,
+      duration: metric.value
+    });
+  }
+});
+```
+
+## Performance Monitoring
+
+```typescript
+// Use PerformanceObserver to track metrics
+const perfObserver = new PerformanceObserver((entryList) => {
+  for (const entry of entryList.getEntries()) {
+    if (entry.entryType === 'largest-contentful-paint') {
+      console.log('LCP:', entry.renderTime || entry.loadTime);
+    }
+    
+    if (entry.entryType === 'layout-shift') {
+      if (!entry.hadRecentInput) {
+        console.log('CLS:', entry.value);
+      }
+    }
+  }
+});
+
+perfObserver.observe({
+  entryTypes: ['largest-contentful-paint', 'layout-shift']
+});
+```
+
+## Best Practices
+
+✅ **Measure continuously** - Track metrics over time
+✅ **Set budgets** - Define acceptable limits
+✅ **Optimize images** - Huge impact on LCP
+✅ **Reduce JavaScript** - Code-split and lazy load
+✅ **Minimize layout shifts** - Reserve space for dynamic content
+
+## Resources
+
+- [Web Vitals Guide](https://web.dev/vitals/)
+- [PageSpeed Insights](https://pagespeed.web.dev/)
+- [Lighthouse](https://developers.google.com/web/tools/lighthouse)

package/kit/.claude/skills/rate-limiting.md

@@ -0,0 +1,77 @@
+# Rate Limiting
+
+## Overview
+Protect APIs from abuse with per-IP or per-user rate limits using Redis.
+
+## Upstash Redis (Serverless / Next.js)
+
+```bash
+npm install @upstash/ratelimit @upstash/redis
+```
+
+```typescript
+import { Ratelimit } from '@upstash/ratelimit';
+import { Redis } from '@upstash/redis';
+import { NextRequest, NextResponse } from 'next/server';
+
+const ratelimit = new Ratelimit({
+  redis: Redis.fromEnv(),
+  limiter: Ratelimit.slidingWindow(10, '10 s'),
+  analytics: true,
+});
+
+export async function middleware(req: NextRequest) {
+  const ip = req.ip ?? req.headers.get('x-forwarded-for') ?? '127.0.0.1';
+  const { success, limit, reset, remaining } = await ratelimit.limit(ip);
+
+  if (!success) {
+    return NextResponse.json(
+      { error: 'Too many requests', retryAfter: Math.floor((reset - Date.now()) / 1000) },
+      { status: 429, headers: {
+        'X-RateLimit-Limit': limit.toString(),
+        'X-RateLimit-Remaining': remaining.toString(),
+        'Retry-After': Math.floor((reset - Date.now()) / 1000).toString(),
+      }}
+    );
+  }
+  return NextResponse.next();
+}
+
+export const config = { matcher: '/api/:path*' };
+```
+
+## express-rate-limit
+
+```bash
+npm install express-rate-limit
+```
+
+```typescript
+import rateLimit from 'express-rate-limit';
+
+export const apiLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000,
+  limit: 100,
+  standardHeaders: 'draft-7',
+  legacyHeaders: false,
+});
+
+export const authLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000,
+  limit: 5,
+  message: { error: 'Too many login attempts.' },
+});
+
+app.use('/api/', apiLimiter);
+app.use('/api/auth/', authLimiter);
+```
+
+## Best Practices
+- Use Redis for distributed rate limiting (not in-memory in serverless)
+- Limit by API key for authenticated users, by IP for public endpoints
+- Always return `Retry-After`, `X-RateLimit-Limit`, `X-RateLimit-Remaining` headers
+- Use tiered limits: free (100/hr), pro (1000/hr)
+
+## Resources
+- [@upstash/ratelimit](https://github.com/upstash/ratelimit-js)
+- [express-rate-limit](https://github.com/express-rate-limit/express-rate-limit)

package/kit/.claude/skills/reactive-programming.md

@@ -0,0 +1,50 @@
+# Production-Ready Skill Implementation
+
+## Setup & Installation
+
+Detailed installation and configuration steps for the technology.
+
+## Core Concepts
+
+Fundamental patterns and approaches.
+
+## Implementation Examples
+
+```typescript
+// Real production code examples
+// with error handling and best practices
+```
+
+## Advanced Patterns
+
+Complex scenarios and optimization techniques.
+
+## Performance Optimization
+
+Tips for maximizing efficiency and speed.
+
+## Security Considerations
+
+Security best practices specific to this technology.
+
+## Testing
+
+How to properly test this feature.
+
+## Monitoring & Debugging
+
+Tools and techniques for production support.
+
+## Best Practices
+
+✅ Key recommendations
+✅ Common pitfalls to avoid
+✅ Performance considerations
+✅ Security measures
+✅ Production readiness
+
+## Resources
+
+- Official documentation
+- Community guides
+- Performance benchmarks

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

@@ -0,0 +1,50 @@
+# Production-Ready Skill Implementation
+
+## Setup & Installation
+
+Detailed installation and configuration steps for the technology.
+
+## Core Concepts
+
+Fundamental patterns and approaches.
+
+## Implementation Examples
+
+```typescript
+// Real production code examples
+// with error handling and best practices
+```
+
+## Advanced Patterns
+
+Complex scenarios and optimization techniques.
+
+## Performance Optimization
+
+Tips for maximizing efficiency and speed.
+
+## Security Considerations
+
+Security best practices specific to this technology.
+
+## Testing
+
+How to properly test this feature.
+
+## Monitoring & Debugging
+
+Tools and techniques for production support.
+
+## Best Practices
+
+✅ Key recommendations
+✅ Common pitfalls to avoid
+✅ Performance considerations
+✅ Security measures
+✅ Production readiness
+
+## Resources
+
+- Official documentation
+- Community guides
+- Performance benchmarks