superkit-mcp-server 1.0.2 → 1.1.0

package/skills/meta/performance/SKILL.md

@@ -1,130 +1,130 @@
-# Performance Optimization Skill
-
-## Overview
-Performance profiling, optimization techniques, and caching strategies.
-
-## Core Web Vitals
-
-### LCP (Largest Contentful Paint) < 2.5s
-```typescript
-// Optimize images
-<Image
-  src="/hero.jpg"
-  alt="Hero"
-  priority  // Preload
-  sizes="100vw"
-  placeholder="blur"
-/>
-
-// Preload critical resources
-<link rel="preload" href="/fonts/inter.woff2" as="font" crossOrigin="" />
-```
-
-### CLS (Cumulative Layout Shift) < 0.1
-```css
-/* Reserve space for images */
-img {
-  aspect-ratio: 16 / 9;
-  width: 100%;
-  height: auto;
-}
-
-/* Skeleton loaders */
-.skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  animation: shimmer 1.5s infinite;
-}
-```
-
-### INP (Interaction to Next Paint) < 200ms
-```typescript
-// Defer non-critical work
-import { startTransition } from 'react';
-
-startTransition(() => {
-  setExpensiveState(newValue);
-});
-
-// Use web workers for heavy computation
-const worker = new Worker('/heavy-task.js');
-worker.postMessage(data);
-```
-
-## JavaScript Optimization
-
-### Code Splitting
-```typescript
-// Dynamic imports
-const HeavyComponent = lazy(() => import('./HeavyComponent'));
-
-// Route-based splitting (Next.js does this automatically)
-import dynamic from 'next/dynamic';
-const Chart = dynamic(() => import('./Chart'), { ssr: false });
-```
-
-### Bundle Analysis
-```bash
-# Next.js
-npx @next/bundle-analyzer
-
-# Webpack
-npx webpack-bundle-analyzer stats.json
-```
-
-### Tree Shaking
-```typescript
-// ❌ Import entire library
-import _ from 'lodash';
-_.debounce(fn, 300);
-
-// ✅ Import specific function
-import debounce from 'lodash/debounce';
-debounce(fn, 300);
-```
-
-## Caching Strategies
-
-### HTTP Caching
-```typescript
-// Static assets (1 year)
-Cache-Control: public, max-age=31536000, immutable
-
-// API responses (5 minutes with revalidation)
-Cache-Control: public, max-age=300, stale-while-revalidate=60
-```
-
-### React Query / SWR
-```typescript
-const { data } = useQuery({
-  queryKey: ['users'],
-  queryFn: fetchUsers,
-  staleTime: 5 * 60 * 1000, // 5 minutes
-  cacheTime: 30 * 60 * 1000, // 30 minutes
-});
-```
-
-### Service Worker
-```typescript
-// Cache-first strategy for static assets
-self.addEventListener('fetch', (event) => {
-  event.respondWith(
-    caches.match(event.request).then((cached) => {
-      return cached || fetch(event.request);
-    })
-  );
-});
-```
-
-## Database Query Optimization
-```sql
--- Add indexes
-CREATE INDEX idx_posts_user_date ON posts(user_id, created_at DESC);
-
--- Avoid N+1
-SELECT posts.*, users.name 
-FROM posts 
-JOIN users ON posts.user_id = users.id;
-
--- Use EXPLAIN ANALYZE
-EXPLAIN ANALYZE SELECT * FROM posts WHERE user_id = 123;
-```
+# Performance Optimization Skill
+
+## Overview
+Performance profiling, optimization techniques, and caching strategies.
+
+## Core Web Vitals
+
+### LCP (Largest Contentful Paint) < 2.5s
+```typescript
+// Optimize images
+<Image
+  src="/hero.jpg"
+  alt="Hero"
+  priority  // Preload
+  sizes="100vw"
+  placeholder="blur"
+/>
+
+// Preload critical resources
+<link rel="preload" href="/fonts/inter.woff2" as="font" crossOrigin="" />
+```
+
+### CLS (Cumulative Layout Shift) < 0.1
+```css
+/* Reserve space for images */
+img {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  height: auto;
+}
+
+/* Skeleton loaders */
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  animation: shimmer 1.5s infinite;
+}
+```
+
+### INP (Interaction to Next Paint) < 200ms
+```typescript
+// Defer non-critical work
+import { startTransition } from 'react';
+
+startTransition(() => {
+  setExpensiveState(newValue);
+});
+
+// Use web workers for heavy computation
+const worker = new Worker('/heavy-task.js');
+worker.postMessage(data);
+```
+
+## JavaScript Optimization
+
+### Code Splitting
+```typescript
+// Dynamic imports
+const HeavyComponent = lazy(() => import('./HeavyComponent'));
+
+// Route-based splitting (Next.js does this automatically)
+import dynamic from 'next/dynamic';
+const Chart = dynamic(() => import('./Chart'), { ssr: false });
+```
+
+### Bundle Analysis
+```bash
+# Next.js
+npx @next/bundle-analyzer
+
+# Webpack
+npx webpack-bundle-analyzer stats.json
+```
+
+### Tree Shaking
+```typescript
+// ❌ Import entire library
+import _ from 'lodash';
+_.debounce(fn, 300);
+
+// ✅ Import specific function
+import debounce from 'lodash/debounce';
+debounce(fn, 300);
+```
+
+## Caching Strategies
+
+### HTTP Caching
+```typescript
+// Static assets (1 year)
+Cache-Control: public, max-age=31536000, immutable
+
+// API responses (5 minutes with revalidation)
+Cache-Control: public, max-age=300, stale-while-revalidate=60
+```
+
+### React Query / SWR
+```typescript
+const { data } = useQuery({
+  queryKey: ['users'],
+  queryFn: fetchUsers,
+  staleTime: 5 * 60 * 1000, // 5 minutes
+  cacheTime: 30 * 60 * 1000, // 30 minutes
+});
+```
+
+### Service Worker
+```typescript
+// Cache-first strategy for static assets
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((cached) => {
+      return cached || fetch(event.request);
+    })
+  );
+});
+```
+
+## Database Query Optimization
+```sql
+-- Add indexes
+CREATE INDEX idx_posts_user_date ON posts(user_id, created_at DESC);
+
+-- Avoid N+1
+SELECT posts.*, users.name 
+FROM posts 
+JOIN users ON posts.user_id = users.id;
+
+-- Use EXPLAIN ANALYZE
+EXPLAIN ANALYZE SELECT * FROM posts WHERE user_id = 123;
+```

package/skills/meta/react-patterns/SKILL.md

@@ -1,83 +1,83 @@
-# React Patterns Skill
-
-## Overview
-Modern React patterns, hooks, and state management principles.
-
-## Core Principles
-
-### 1. Component Composition
-- Prefer composition over inheritance
-- Use children prop for flexibility
-- Create compound components for related UI
-
-### 2. Hooks Best Practices
-```tsx
-// Custom hook pattern
-function useUser(userId: string) {
-  const [user, setUser] = useState<User | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    fetchUser(userId)
-      .then(setUser)
-      .catch(setError)
-      .finally(() => setLoading(false));
-  }, [userId]);
-
-  return { user, loading, error };
-}
-```
-
-### 3. State Management
-- **Local state:** useState for component-level
-- **Shared state:** Context + useReducer
-- **Server state:** React Query, SWR
-- **Global state:** Zustand, Jotai
-
-### 4. Performance Patterns
-```tsx
-// Memoization
-const MemoizedComponent = React.memo(({ data }) => {
-  return <div>{data.name}</div>;
-});
-
-// useMemo for expensive computations
-const sortedItems = useMemo(() => {
-  return items.sort((a, b) => a.name.localeCompare(b.name));
-}, [items]);
-
-// useCallback for stable references
-const handleClick = useCallback(() => {
-  doSomething(id);
-}, [id]);
-```
-
-### 5. Error Boundaries
-```tsx
-class ErrorBoundary extends React.Component {
-  state = { hasError: false };
-
-  static getDerivedStateFromError(error) {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error, errorInfo) {
-    logError(error, errorInfo);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return <FallbackUI />;
-    }
-    return this.props.children;
-  }
-}
-```
-
-## Anti-Patterns to Avoid
-- ❌ Prop drilling (use Context instead)
-- ❌ Mutating state directly
-- ❌ Missing dependency arrays
-- ❌ Over-using useEffect
-- ❌ Inline function definitions in render
+# React Patterns Skill
+
+## Overview
+Modern React patterns, hooks, and state management principles.
+
+## Core Principles
+
+### 1. Component Composition
+- Prefer composition over inheritance
+- Use children prop for flexibility
+- Create compound components for related UI
+
+### 2. Hooks Best Practices
+```tsx
+// Custom hook pattern
+function useUser(userId: string) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    fetchUser(userId)
+      .then(setUser)
+      .catch(setError)
+      .finally(() => setLoading(false));
+  }, [userId]);
+
+  return { user, loading, error };
+}
+```
+
+### 3. State Management
+- **Local state:** useState for component-level
+- **Shared state:** Context + useReducer
+- **Server state:** React Query, SWR
+- **Global state:** Zustand, Jotai
+
+### 4. Performance Patterns
+```tsx
+// Memoization
+const MemoizedComponent = React.memo(({ data }) => {
+  return <div>{data.name}</div>;
+});
+
+// useMemo for expensive computations
+const sortedItems = useMemo(() => {
+  return items.sort((a, b) => a.name.localeCompare(b.name));
+}, [items]);
+
+// useCallback for stable references
+const handleClick = useCallback(() => {
+  doSomething(id);
+}, [id]);
+```
+
+### 5. Error Boundaries
+```tsx
+class ErrorBoundary extends React.Component {
+  state = { hasError: false };
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    logError(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <FallbackUI />;
+    }
+    return this.props.children;
+  }
+}
+```
+
+## Anti-Patterns to Avoid
+- ❌ Prop drilling (use Context instead)
+- ❌ Mutating state directly
+- ❌ Missing dependency arrays
+- ❌ Over-using useEffect
+- ❌ Inline function definitions in render

package/skills/meta/security/SKILL.md

@@ -1,114 +1,114 @@
-# Security Skill
-
-## Overview
-Security audit, vulnerability scanning, and secure coding practices.
-
-## OWASP Top 10 Checks
-
-### 1. Injection (SQL, NoSQL, Command)
-```typescript
-// ❌ Vulnerable
-const query = `SELECT * FROM users WHERE id = ${userId}`;
-
-// ✅ Safe - Parameterized query
-const query = 'SELECT * FROM users WHERE id = $1';
-await db.query(query, [userId]);
-```
-
-### 2. Authentication Flaws
-```typescript
-// Password hashing
-import bcrypt from 'bcrypt';
-
-async function hashPassword(password: string) {
-  return bcrypt.hash(password, 12);
-}
-
-async function verifyPassword(password: string, hash: string) {
-  return bcrypt.compare(password, hash);
-}
-```
-
-### 3. XSS Prevention
-```typescript
-// ❌ Dangerous
-element.innerHTML = userInput;
-
-// ✅ Safe - Escape output
-element.textContent = userInput;
-
-// React auto-escapes, but avoid dangerouslySetInnerHTML
-```
-
-### 4. CSRF Protection
-```typescript
-// Use CSRF tokens
-import csrf from 'csurf';
-const csrfProtection = csrf({ cookie: true });
-
-app.use(csrfProtection);
-
-// In form
-<input type="hidden" name="_csrf" value={csrfToken} />
-```
-
-### 5. Security Headers
-```typescript
-// helmet middleware
-import helmet from 'helmet';
-
-app.use(helmet({
-  contentSecurityPolicy: {
-    directives: {
-      defaultSrc: ["'self'"],
-      scriptSrc: ["'self'", "'unsafe-inline'"],
-      styleSrc: ["'self'", "'unsafe-inline'"],
-    },
-  },
-}));
-```
-
-## JWT Security
-
-```typescript
-import jwt from 'jsonwebtoken';
-
-// ✅ Best practices
-const token = jwt.sign(
-  { userId: user.id },
-  process.env.JWT_SECRET,
-  {
-    algorithm: 'HS256',
-    expiresIn: '15m',  // Short expiry
-    issuer: 'my-app',
-    audience: 'my-app-users',
-  }
-);
-
-// Verify with options
-jwt.verify(token, process.env.JWT_SECRET, {
-  algorithms: ['HS256'],  // Prevent algorithm switching
-  issuer: 'my-app',
-});
-```
-
-## Secrets Management
-```bash
-# Never commit secrets
-.env
-.env.local
-*.pem
-*.key
-```
-
-## Security Audit Commands
-```bash
-# NPM audit
-npm audit --audit-level=high
-
-# Check for leaked secrets
-npx secretlint "**/*"
-
-# Dependency vulnerabilities
-npx snyk test
-```
+# Security Skill
+
+## Overview
+Security audit, vulnerability scanning, and secure coding practices.
+
+## OWASP Top 10 Checks
+
+### 1. Injection (SQL, NoSQL, Command)
+```typescript
+// ❌ Vulnerable
+const query = `SELECT * FROM users WHERE id = ${userId}`;
+
+// ✅ Safe - Parameterized query
+const query = 'SELECT * FROM users WHERE id = $1';
+await db.query(query, [userId]);
+```
+
+### 2. Authentication Flaws
+```typescript
+// Password hashing
+import bcrypt from 'bcrypt';
+
+async function hashPassword(password: string) {
+  return bcrypt.hash(password, 12);
+}
+
+async function verifyPassword(password: string, hash: string) {
+  return bcrypt.compare(password, hash);
+}
+```
+
+### 3. XSS Prevention
+```typescript
+// ❌ Dangerous
+element.innerHTML = userInput;
+
+// ✅ Safe - Escape output
+element.textContent = userInput;
+
+// React auto-escapes, but avoid dangerouslySetInnerHTML
+```
+
+### 4. CSRF Protection
+```typescript
+// Use CSRF tokens
+import csrf from 'csurf';
+const csrfProtection = csrf({ cookie: true });
+
+app.use(csrfProtection);
+
+// In form
+<input type="hidden" name="_csrf" value={csrfToken} />
+```
+
+### 5. Security Headers
+```typescript
+// helmet middleware
+import helmet from 'helmet';
+
+app.use(helmet({
+  contentSecurityPolicy: {
+    directives: {
+      defaultSrc: ["'self'"],
+      scriptSrc: ["'self'", "'unsafe-inline'"],
+      styleSrc: ["'self'", "'unsafe-inline'"],
+    },
+  },
+}));
+```
+
+## JWT Security
+
+```typescript
+import jwt from 'jsonwebtoken';
+
+// ✅ Best practices
+const token = jwt.sign(
+  { userId: user.id },
+  process.env.JWT_SECRET,
+  {
+    algorithm: 'HS256',
+    expiresIn: '15m',  // Short expiry
+    issuer: 'my-app',
+    audience: 'my-app-users',
+  }
+);
+
+// Verify with options
+jwt.verify(token, process.env.JWT_SECRET, {
+  algorithms: ['HS256'],  // Prevent algorithm switching
+  issuer: 'my-app',
+});
+```
+
+## Secrets Management
+```bash
+# Never commit secrets
+.env
+.env.local
+*.pem
+*.key
+```
+
+## Security Audit Commands
+```bash
+# NPM audit
+npm audit --audit-level=high
+
+# Check for leaked secrets
+npx secretlint "**/*"
+
+# Dependency vulnerabilities
+npx snyk test
+```