start-vibing 4.0.2 → 4.1.1

package/template/.claude/skills/react-best-practices/SKILL.md

@@ -0,0 +1,146 @@
+---
+name: vercel-react-best-practices
+description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
+license: MIT
+metadata:
+  author: vercel
+  version: "1.0.0"
+---
+
+# Vercel React Best Practices
+
+Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 67 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
+
+## When to Apply
+
+Reference these guidelines when:
+- Writing new React components or Next.js pages
+- Implementing data fetching (client or server-side)
+- Reviewing code for performance issues
+- Refactoring existing React/Next.js code
+- Optimizing bundle size or load times
+
+## Rule Categories by Priority
+
+| Priority | Category | Impact | Prefix |
+|----------|----------|--------|--------|
+| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
+| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
+| 3 | Server-Side Performance | HIGH | `server-` |
+| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
+| 5 | Re-render Optimization | MEDIUM | `rerender-` |
+| 6 | Rendering Performance | MEDIUM | `rendering-` |
+| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
+| 8 | Advanced Patterns | LOW | `advanced-` |
+
+## Quick Reference
+
+### 1. Eliminating Waterfalls (CRITICAL)
+
+- `async-cheap-condition-before-await` - Check cheap sync conditions before awaiting flags or remote values
+- `async-defer-await` - Move await into branches where actually used
+- `async-parallel` - Use Promise.all() for independent operations
+- `async-dependencies` - Use better-all for partial dependencies
+- `async-api-routes` - Start promises early, await late in API routes
+- `async-suspense-boundaries` - Use Suspense to stream content
+
+### 2. Bundle Size Optimization (CRITICAL)
+
+- `bundle-barrel-imports` - Import directly, avoid barrel files
+- `bundle-dynamic-imports` - Use next/dynamic for heavy components
+- `bundle-defer-third-party` - Load analytics/logging after hydration
+- `bundle-conditional` - Load modules only when feature is activated
+- `bundle-preload` - Preload on hover/focus for perceived speed
+
+### 3. Server-Side Performance (HIGH)
+
+- `server-auth-actions` - Authenticate server actions like API routes
+- `server-cache-react` - Use React.cache() for per-request deduplication
+- `server-cache-lru` - Use LRU cache for cross-request caching
+- `server-dedup-props` - Avoid duplicate serialization in RSC props
+- `server-hoist-static-io` - Hoist static I/O (fonts, logos) to module level
+- `server-serialization` - Minimize data passed to client components
+- `server-parallel-fetching` - Restructure components to parallelize fetches
+- `server-parallel-nested-fetching` - Chain nested fetches per item in Promise.all
+- `server-after-nonblocking` - Use after() for non-blocking operations
+
+### 4. Client-Side Data Fetching (MEDIUM-HIGH)
+
+- `client-swr-dedup` - Use SWR for automatic request deduplication
+- `client-event-listeners` - Deduplicate global event listeners
+- `client-passive-event-listeners` - Use passive listeners for scroll
+- `client-localstorage-schema` - Version and minimize localStorage data
+
+### 5. Re-render Optimization (MEDIUM)
+
+- `rerender-defer-reads` - Don't subscribe to state only used in callbacks
+- `rerender-memo` - Extract expensive work into memoized components
+- `rerender-memo-with-default-value` - Hoist default non-primitive props
+- `rerender-dependencies` - Use primitive dependencies in effects
+- `rerender-derived-state` - Subscribe to derived booleans, not raw values
+- `rerender-derived-state-no-effect` - Derive state during render, not effects
+- `rerender-functional-setstate` - Use functional setState for stable callbacks
+- `rerender-lazy-state-init` - Pass function to useState for expensive values
+- `rerender-simple-expression-in-memo` - Avoid memo for simple primitives
+- `rerender-split-combined-hooks` - Split hooks with independent dependencies
+- `rerender-move-effect-to-event` - Put interaction logic in event handlers
+- `rerender-transitions` - Use startTransition for non-urgent updates
+- `rerender-use-deferred-value` - Defer expensive renders to keep input responsive
+- `rerender-use-ref-transient-values` - Use refs for transient frequent values
+- `rerender-no-inline-components` - Don't define components inside components
+
+### 6. Rendering Performance (MEDIUM)
+
+- `rendering-animate-svg-wrapper` - Animate div wrapper, not SVG element
+- `rendering-content-visibility` - Use content-visibility for long lists
+- `rendering-hoist-jsx` - Extract static JSX outside components
+- `rendering-svg-precision` - Reduce SVG coordinate precision
+- `rendering-hydration-no-flicker` - Use inline script for client-only data
+- `rendering-hydration-suppress-warning` - Suppress expected mismatches
+- `rendering-activity` - Use Activity component for show/hide
+- `rendering-conditional-render` - Use ternary, not && for conditionals
+- `rendering-usetransition-loading` - Prefer useTransition for loading state
+- `rendering-resource-hints` - Use React DOM resource hints for preloading
+- `rendering-script-defer-async` - Use defer or async on script tags
+
+### 7. JavaScript Performance (LOW-MEDIUM)
+
+- `js-batch-dom-css` - Group CSS changes via classes or cssText
+- `js-index-maps` - Build Map for repeated lookups
+- `js-cache-property-access` - Cache object properties in loops
+- `js-cache-function-results` - Cache function results in module-level Map
+- `js-cache-storage` - Cache localStorage/sessionStorage reads
+- `js-combine-iterations` - Combine multiple filter/map into one loop
+- `js-length-check-first` - Check array length before expensive comparison
+- `js-early-exit` - Return early from functions
+- `js-hoist-regexp` - Hoist RegExp creation outside loops
+- `js-min-max-loop` - Use loop for min/max instead of sort
+- `js-set-map-lookups` - Use Set/Map for O(1) lookups
+- `js-tosorted-immutable` - Use toSorted() for immutability
+- `js-flatmap-filter` - Use flatMap to map and filter in one pass
+- `js-request-idle-callback` - Defer non-critical work to browser idle time
+
+### 8. Advanced Patterns (LOW)
+
+- `advanced-event-handler-refs` - Store event handlers in refs
+- `advanced-init-once` - Initialize app once per app load
+- `advanced-use-latest` - useLatest for stable callback refs
+
+## How to Use
+
+Read individual rule files for detailed explanations and code examples:
+
+```
+rules/async-parallel.md
+rules/bundle-barrel-imports.md
+```
+
+Each rule file contains:
+- Brief explanation of why it matters
+- Incorrect code example with explanation
+- Correct code example with explanation
+- Additional context and references
+
+## Full Compiled Document
+
+For the complete guide with all rules expanded: `AGENTS.md`

package/template/.claude/skills/security-scan/reference/owasp-top-10.md

@@ -0,0 +1,257 @@
+# OWASP Top 10 (2021) - Detailed Checklist
+
+## A01:2021 - Broken Access Control
+
+### What to Check
+
+- [ ] All protected routes use authentication middleware
+- [ ] User ID always comes from session, never from input
+- [ ] Resources filtered by user/tenant before returning
+- [ ] Admin routes check admin role explicitly
+- [ ] CORS configured correctly (not `*` in production)
+- [ ] Directory listing disabled
+- [ ] Rate limiting on sensitive endpoints
+
+### Detection Patterns
+
+```bash
+# Find routes without auth middleware
+grep -r "router\." --include="*.ts" | grep -v "auth\|middleware"
+
+# Find user ID from input
+grep -rn "userId.*req\.(body\|params\|query)" --include="*.ts"
+```
+
+### Fix Examples
+
+```typescript
+// BAD
+router.get('/users/:userId', async (req, res) => {
+	const user = await User.findById(req.params.userId);
+});
+
+// GOOD
+router.get('/users/:userId', authMiddleware, async (req, res) => {
+	if (req.user._id.toString() !== req.params.userId) {
+		return res.status(403).json({ error: 'Forbidden' });
+	}
+	const user = await User.findById(req.params.userId);
+});
+```
+
+---
+
+## A02:2021 - Cryptographic Failures
+
+### What to Check
+
+- [ ] Passwords hashed with bcrypt/argon2 (not MD5/SHA1)
+- [ ] Tokens generated with crypto.randomBytes
+- [ ] HTTPS enforced in production
+- [ ] Sensitive data not in URLs
+- [ ] Cookies have Secure, HttpOnly, SameSite flags
+- [ ] No secrets in code or logs
+
+### Detection Patterns
+
+```bash
+# Find weak hashing
+grep -rn "md5\|sha1\|createHash" --include="*.ts"
+
+# Find hardcoded secrets
+grep -rn "password\s*=\s*[\"']" --include="*.ts"
+grep -rn "secret\s*=\s*[\"']" --include="*.ts"
+```
+
+### Fix Examples
+
+```typescript
+// BAD
+const hash = crypto.createHash('md5').update(password).digest('hex');
+
+// GOOD
+import bcrypt from 'bcrypt';
+const hash = await bcrypt.hash(password, 12);
+```
+
+---
+
+## A03:2021 - Injection
+
+### What to Check
+
+- [ ] SQL queries use parameterized statements
+- [ ] MongoDB queries use Mongoose (not raw)
+- [ ] User input never concatenated into queries
+- [ ] Command execution avoids user input
+- [ ] LDAP/XML queries sanitized
+
+### Detection Patterns
+
+```bash
+# Find raw query concatenation
+grep -rn "\$where\|eval\|exec(" --include="*.ts"
+
+# Find string concatenation in queries
+grep -rn "find.*\+" --include="*.ts"
+```
+
+### Fix Examples
+
+```typescript
+// BAD - NoSQL injection
+User.find({ username: req.body.username });
+// Attacker sends: { "$gt": "" }
+
+// GOOD - Validate type
+const username = z.string().parse(req.body.username);
+User.find({ username });
+```
+
+---
+
+## A04:2021 - Insecure Design
+
+### What to Check
+
+- [ ] Business logic validated server-side
+- [ ] Multi-step processes maintain state
+- [ ] Resource limits enforced
+- [ ] Rate limiting on expensive operations
+- [ ] Threat modeling performed
+
+---
+
+## A05:2021 - Security Misconfiguration
+
+### What to Check
+
+- [ ] Error messages don't leak stack traces
+- [ ] Default credentials changed
+- [ ] Unnecessary features disabled
+- [ ] Security headers set (CSP, HSTS, etc.)
+- [ ] Dependencies updated regularly
+
+### Security Headers
+
+```typescript
+app.use(
+	helmet({
+		contentSecurityPolicy: true,
+		crossOriginEmbedderPolicy: true,
+		crossOriginOpenerPolicy: true,
+		crossOriginResourcePolicy: true,
+		dnsPrefetchControl: true,
+		frameguard: true,
+		hidePoweredBy: true,
+		hsts: true,
+		ieNoOpen: true,
+		noSniff: true,
+		originAgentCluster: true,
+		permittedCrossDomainPolicies: true,
+		referrerPolicy: true,
+		xssFilter: true,
+	})
+);
+```
+
+---
+
+## A06:2021 - Vulnerable Components
+
+### What to Check
+
+- [ ] Dependencies audited regularly
+- [ ] No known CVEs in dependencies
+- [ ] Outdated packages updated
+- [ ] Lock file committed
+
+### Commands
+
+```bash
+# Check for vulnerabilities
+bun audit
+
+# Update dependencies
+bun update --latest
+```
+
+---
+
+## A07:2021 - Authentication Failures
+
+### What to Check
+
+- [ ] Passwords have minimum requirements
+- [ ] Brute force protection (rate limiting)
+- [ ] Sessions invalidated on logout
+- [ ] Session timeout implemented
+- [ ] MFA available for sensitive ops
+- [ ] Password reset tokens expire
+
+### Detection Patterns
+
+```bash
+# Find login without rate limiting
+grep -rn "login\|signin" --include="*.ts" | grep -v "rateLimit"
+```
+
+---
+
+## A08:2021 - Software and Data Integrity
+
+### What to Check
+
+- [ ] CI/CD pipeline secured
+- [ ] Dependencies from trusted sources
+- [ ] Code signing for releases
+- [ ] Integrity checks on downloads
+
+---
+
+## A09:2021 - Security Logging and Monitoring
+
+### What to Check
+
+- [ ] Authentication attempts logged
+- [ ] Access control failures logged
+- [ ] Input validation failures logged
+- [ ] Logs don't contain sensitive data
+- [ ] Alerting configured for anomalies
+
+### What to Log
+
+```typescript
+logger.warn('Failed login attempt', {
+	ip: req.ip,
+	username: req.body.username,
+	timestamp: new Date().toISOString(),
+	// Never log password!
+});
+```
+
+---
+
+## A10:2021 - Server-Side Request Forgery (SSRF)
+
+### What to Check
+
+- [ ] URLs validated before fetching
+- [ ] Internal networks blocked
+- [ ] Allowlist for external services
+- [ ] Response type validated
+
+### Fix Examples
+
+```typescript
+// BAD - SSRF vulnerable
+const response = await fetch(req.body.url);
+
+// GOOD - Validate URL
+const allowedHosts = ['api.example.com'];
+const url = new URL(req.body.url);
+if (!allowedHosts.includes(url.hostname)) {
+	throw new Error('Host not allowed');
+}
+const response = await fetch(url.toString());
+```

package/template/.claude/skills/security-scan/scripts/scan.py

@@ -0,0 +1,190 @@
+#!/usr/bin/env python3
+"""
+Security Scanner Script
+Scans codebase for common security vulnerabilities.
+
+Usage:
+    python .claude/skills/security-scan/scripts/scan.py [path]
+
+Returns JSON with findings.
+"""
+
+import os
+import re
+import json
+import sys
+from pathlib import Path
+from typing import List, Dict, Any
+
+# Patterns to detect vulnerabilities
+VULNERABILITY_PATTERNS = {
+    "user_id_from_input": {
+        "pattern": r"userId.*req\.(body|params|query)",
+        "severity": "CRITICAL",
+        "message": "User ID from request input - use session instead",
+        "owasp": "A01"
+    },
+    "password_in_response": {
+        "pattern": r"(password|senha).*res\.(json|send)",
+        "severity": "CRITICAL",
+        "message": "Password may be sent in response",
+        "owasp": "A02"
+    },
+    "weak_hash": {
+        "pattern": r"createHash\(['\"]md5['\"]\)|createHash\(['\"]sha1['\"]\)",
+        "severity": "HIGH",
+        "message": "Weak hashing algorithm - use bcrypt or argon2",
+        "owasp": "A02"
+    },
+    "hardcoded_secret": {
+        "pattern": r"(password|secret|api_key)\s*=\s*['\"][^'\"]+['\"]",
+        "severity": "HIGH",
+        "message": "Hardcoded secret detected",
+        "owasp": "A02"
+    },
+    "no_input_validation": {
+        "pattern": r"\.mutation\(\s*async\s*\(\s*\{\s*input\s*\}\s*\)",
+        "severity": "MEDIUM",
+        "message": "Mutation without .input() validation",
+        "owasp": "A03"
+    },
+    "eval_usage": {
+        "pattern": r"\beval\s*\(|new\s+Function\s*\(",
+        "severity": "CRITICAL",
+        "message": "Dangerous eval() or Function() usage",
+        "owasp": "A03"
+    },
+    "sql_concatenation": {
+        "pattern": r"(SELECT|INSERT|UPDATE|DELETE).*\+.*req\.",
+        "severity": "CRITICAL",
+        "message": "SQL query with string concatenation",
+        "owasp": "A03"
+    },
+    "missing_auth_check": {
+        "pattern": r"router\.(get|post|put|delete)\s*\([^,]+,\s*async",
+        "severity": "MEDIUM",
+        "message": "Route may be missing auth middleware",
+        "owasp": "A01"
+    },
+    "cors_wildcard": {
+        "pattern": r"cors\(\s*\{\s*origin:\s*['\"]?\*['\"]?\s*\}",
+        "severity": "MEDIUM",
+        "message": "CORS with wildcard origin",
+        "owasp": "A05"
+    },
+    "stack_trace_leak": {
+        "pattern": r"res\.(json|send)\s*\(\s*\{[^}]*error\.stack",
+        "severity": "MEDIUM",
+        "message": "Stack trace may be leaked in response",
+        "owasp": "A05"
+    }
+}
+
+# File extensions to scan
+SCAN_EXTENSIONS = {'.ts', '.tsx', '.js', '.jsx'}
+
+# Directories to skip
+SKIP_DIRS = {
+    'node_modules', '.next', 'dist', 'build',
+    '.git', '__pycache__', 'coverage'
+}
+
+
+def should_scan_file(path: Path) -> bool:
+    """Check if file should be scanned."""
+    # Skip directories
+    for skip in SKIP_DIRS:
+        if skip in path.parts:
+            return False
+
+    # Check extension
+    return path.suffix in SCAN_EXTENSIONS
+
+
+def scan_file(file_path: Path) -> List[Dict[str, Any]]:
+    """Scan a single file for vulnerabilities."""
+    findings = []
+
+    try:
+        content = file_path.read_text(encoding='utf-8', errors='ignore')
+        lines = content.split('\n')
+
+        for vuln_name, vuln_info in VULNERABILITY_PATTERNS.items():
+            pattern = re.compile(vuln_info['pattern'], re.IGNORECASE)
+
+            for line_num, line in enumerate(lines, 1):
+                if pattern.search(line):
+                    findings.append({
+                        "file": str(file_path),
+                        "line": line_num,
+                        "vulnerability": vuln_name,
+                        "severity": vuln_info['severity'],
+                        "message": vuln_info['message'],
+                        "owasp": vuln_info['owasp'],
+                        "code": line.strip()[:100]
+                    })
+    except Exception as e:
+        pass  # Skip unreadable files
+
+    return findings
+
+
+def scan_directory(path: str) -> Dict[str, Any]:
+    """Scan directory for vulnerabilities."""
+    root = Path(path)
+    all_findings = []
+    files_scanned = 0
+
+    for file_path in root.rglob('*'):
+        if file_path.is_file() and should_scan_file(file_path):
+            files_scanned += 1
+            findings = scan_file(file_path)
+            all_findings.extend(findings)
+
+    # Group by severity
+    by_severity = {
+        "CRITICAL": [],
+        "HIGH": [],
+        "MEDIUM": [],
+        "LOW": []
+    }
+
+    for finding in all_findings:
+        severity = finding['severity']
+        if severity in by_severity:
+            by_severity[severity].append(finding)
+
+    return {
+        "summary": {
+            "files_scanned": files_scanned,
+            "total_findings": len(all_findings),
+            "critical": len(by_severity["CRITICAL"]),
+            "high": len(by_severity["HIGH"]),
+            "medium": len(by_severity["MEDIUM"]),
+            "low": len(by_severity["LOW"])
+        },
+        "findings": by_severity,
+        "status": "FAIL" if by_severity["CRITICAL"] else "PASS"
+    }
+
+
+def main():
+    """Main entry point."""
+    scan_path = sys.argv[1] if len(sys.argv) > 1 else '.'
+
+    if not os.path.exists(scan_path):
+        print(json.dumps({"error": f"Path not found: {scan_path}"}))
+        sys.exit(1)
+
+    results = scan_directory(scan_path)
+    print(json.dumps(results, indent=2))
+
+    # Exit with error if critical findings
+    if results['status'] == 'FAIL':
+        sys.exit(1)
+
+    sys.exit(0)
+
+
+if __name__ == '__main__':
+    main()

package/template/.claude/skills/super-design/README.md

@@ -0,0 +1,37 @@
+# super-design
+
+End-to-end design audit skill for Claude Code. Produces market analysis,
+live-site UX/WCAG/CWV audit, and optional safe remediation — all with
+evidence trails and per-finding severity.
+
+## Install
+
+1. Copy this plugin to `~/.claude/plugins/super-design/` OR install via
+   `/plugin install super-design@<marketplace>`.
+2. Verify MCP: `claude mcp list` — Playwright should connect.
+3. Install browsers if missing: `npx playwright install chromium`.
+4. Invoke: "run super-design" or "audit my site with super-design".
+
+## Outputs
+
+- `docs/super-design/overview.md` — executive report (committed)
+- `docs/super-design/.audit-state.json` — re-audit state (committed)
+- `docs/super-design/findings/F-NNNN.md` — per-finding records (committed)
+- `docs/super-design/audit-history.md` — append-only log (committed)
+- `docs/super-design/baseline-screenshots/` — visual regression baselines (Git LFS)
+- `docs/super-design/.cache/` — ephemeral session artifacts (gitignored)
+
+## Commands
+
+`/super-design` — slash command. Flags: `--force-full`, `--refresh-research`,
+`--only <cat>`, `--scope <url>`, `--fix`, `--dry-run`, `--ci`.
+
+## Requirements
+
+- Node ≥18, git ≥2.30, Python ≥3.9, Claude Code ≥2.1.
+- `@playwright/mcp@0.0.70` (pinned).
+- Optional: `gh` CLI, Git LFS.
+
+## License
+
+See LICENSE (Elastic License 2.0) and EULA.md.