@tinkcarlos/skillora 0.2.0

package/.claude/skills/react-best-practices/references/rerender-optimization.md

@@ -0,0 +1,214 @@
+# Re-render Optimization
+
+**Impact: MEDIUM**
+
+Reducing unnecessary re-renders minimizes wasted computation and improves UI responsiveness.
+
+---
+
+## 1. Defer State Reads to Usage Point
+
+**Impact: MEDIUM (avoids unnecessary subscriptions)**
+
+Don't subscribe to dynamic state if you only read it inside callbacks.
+
+```tsx
+// ❌ Incorrect: subscribes to all searchParams changes
+function ShareButton({ chatId }: { chatId: string }) {
+  const searchParams = useSearchParams()
+
+  const handleShare = () => {
+    const ref = searchParams.get('ref')
+    shareChat(chatId, { ref })
+  }
+
+  return <button onClick={handleShare}>Share</button>
+}
+
+// ✅ Correct: reads on demand, no subscription
+function ShareButton({ chatId }: { chatId: string }) {
+  const handleShare = () => {
+    const params = new URLSearchParams(window.location.search)
+    const ref = params.get('ref')
+    shareChat(chatId, { ref })
+  }
+
+  return <button onClick={handleShare}>Share</button>
+}
+```
+
+---
+
+## 2. Extract to Memoized Components
+
+**Impact: MEDIUM (enables early returns)**
+
+```tsx
+// ❌ Incorrect: computes avatar even when loading
+function Profile({ user, loading }: Props) {
+  const avatar = useMemo(() => {
+    const id = computeAvatarId(user)
+    return <Avatar id={id} />
+  }, [user])
+
+  if (loading) return <Skeleton />
+  return <div>{avatar}</div>
+}
+
+// ✅ Correct: skips computation when loading
+const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
+  const id = useMemo(() => computeAvatarId(user), [user])
+  return <Avatar id={id} />
+})
+
+function Profile({ user, loading }: Props) {
+  if (loading) return <Skeleton />
+  return (
+    <div>
+      <UserAvatar user={user} />
+    </div>
+  )
+}
+```
+
+**Note:** If React Compiler is enabled, manual memoization is not necessary.
+
+---
+
+## 3. Narrow Effect Dependencies
+
+**Impact: LOW (minimizes effect re-runs)**
+
+```tsx
+// ❌ Incorrect: re-runs on any user field change
+useEffect(() => {
+  console.log(user.id)
+}, [user])
+
+// ✅ Correct: re-runs only when id changes
+useEffect(() => {
+  console.log(user.id)
+}, [user.id])
+```
+
+**For derived state:**
+
+```tsx
+// ❌ Incorrect: runs on width=767, 766, 765...
+useEffect(() => {
+  if (width < 768) {
+    enableMobileMode()
+  }
+}, [width])
+
+// ✅ Correct: runs only on boolean transition
+const isMobile = width < 768
+useEffect(() => {
+  if (isMobile) {
+    enableMobileMode()
+  }
+}, [isMobile])
+```
+
+---
+
+## 4. Subscribe to Derived State
+
+**Impact: MEDIUM (reduces re-render frequency)**
+
+```tsx
+// ❌ Incorrect: re-renders on every pixel change
+function Sidebar() {
+  const width = useWindowWidth()  // updates continuously
+  const isMobile = width < 768
+  return <nav className={isMobile ? 'mobile' : 'desktop'}>
+}
+
+// ✅ Correct: re-renders only when boolean changes
+function Sidebar() {
+  const isMobile = useMediaQuery('(max-width: 767px)')
+  return <nav className={isMobile ? 'mobile' : 'desktop'}>
+}
+```
+
+---
+
+## 5. Use Functional setState Updates
+
+**Impact: MEDIUM (prevents stale closures)**
+
+```tsx
+// ❌ Incorrect: requires state as dependency
+function TodoList() {
+  const [items, setItems] = useState(initialItems)
+
+  const addItems = useCallback((newItems: Item[]) => {
+    setItems([...items, ...newItems])
+  }, [items])  // ❌ items dependency causes recreations
+
+  return <ItemsEditor items={items} onAdd={addItems} />
+}
+
+// ✅ Correct: stable callbacks, no stale closures
+function TodoList() {
+  const [items, setItems] = useState(initialItems)
+
+  const addItems = useCallback((newItems: Item[]) => {
+    setItems(curr => [...curr, ...newItems])
+  }, [])  // ✅ No dependencies needed
+
+  return <ItemsEditor items={items} onAdd={addItems} />
+}
+```
+
+---
+
+## 6. Use Lazy State Initialization
+
+**Impact: MEDIUM (wasted computation on every render)**
+
+```tsx
+// ❌ Incorrect: runs on every render
+function FilteredList({ items }: { items: Item[] }) {
+  const [searchIndex, setSearchIndex] = useState(buildSearchIndex(items))
+  // ...
+}
+
+// ✅ Correct: runs only once
+function FilteredList({ items }: { items: Item[] }) {
+  const [searchIndex, setSearchIndex] = useState(() => buildSearchIndex(items))
+  // ...
+}
+```
+
+---
+
+## 7. Use Transitions for Non-Urgent Updates
+
+**Impact: MEDIUM (maintains UI responsiveness)**
+
+```tsx
+// ❌ Incorrect: blocks UI on every scroll
+function ScrollTracker() {
+  const [scrollY, setScrollY] = useState(0)
+  useEffect(() => {
+    const handler = () => setScrollY(window.scrollY)
+    window.addEventListener('scroll', handler, { passive: true })
+    return () => window.removeEventListener('scroll', handler)
+  }, [])
+}
+
+// ✅ Correct: non-blocking updates
+import { startTransition } from 'react'
+
+function ScrollTracker() {
+  const [scrollY, setScrollY] = useState(0)
+  useEffect(() => {
+    const handler = () => {
+      startTransition(() => setScrollY(window.scrollY))
+    }
+    window.addEventListener('scroll', handler, { passive: true })
+    return () => window.removeEventListener('scroll', handler)
+  }, [])
+}
+```

package/.claude/skills/react-best-practices/references/server-performance.md

@@ -0,0 +1,182 @@
+# Server-Side Performance
+
+**Impact: HIGH**
+
+Optimizing server-side rendering and data fetching eliminates server-side waterfalls and reduces response times.
+
+---
+
+## 1. Cross-Request LRU Caching
+
+**Impact: HIGH (caches across requests)**
+
+`React.cache()` only works within one request. For data shared across sequential requests, use an LRU cache.
+
+```typescript
+import { LRUCache } from 'lru-cache'
+
+const cache = new LRUCache<string, any>({
+  max: 1000,
+  ttl: 5 * 60 * 1000  // 5 minutes
+})
+
+export async function getUser(id: string) {
+  const cached = cache.get(id)
+  if (cached) return cached
+
+  const user = await db.user.findUnique({ where: { id } })
+  cache.set(id, user)
+  return user
+}
+
+// Request 1: DB query, result cached
+// Request 2: cache hit, no DB query
+```
+
+**With Vercel's Fluid Compute:** LRU caching is especially effective because multiple concurrent requests can share the same function instance and cache.
+
+**In traditional serverless:** Consider Redis for cross-process caching.
+
+---
+
+## 2. Minimize Serialization at RSC Boundaries
+
+**Impact: HIGH (reduces data transfer size)**
+
+Only pass fields that the client actually uses.
+
+```tsx
+// ❌ Incorrect: serializes all 50 fields
+async function Page() {
+  const user = await fetchUser()  // 50 fields
+  return <Profile user={user} />
+}
+
+'use client'
+function Profile({ user }: { user: User }) {
+  return <div>{user.name}</div>  // uses 1 field
+}
+
+// ✅ Correct: serializes only 1 field
+async function Page() {
+  const user = await fetchUser()
+  return <Profile name={user.name} />
+}
+
+'use client'
+function Profile({ name }: { name: string }) {
+  return <div>{name}</div>
+}
+```
+
+---
+
+## 3. Parallel Data Fetching with Component Composition
+
+**Impact: CRITICAL (eliminates server-side waterfalls)**
+
+React Server Components execute sequentially within a tree. Restructure with composition to parallelize.
+
+```tsx
+// ❌ Incorrect: Sidebar waits for Page's fetch to complete
+export default async function Page() {
+  const header = await fetchHeader()
+  return (
+    <div>
+      <div>{header}</div>
+      <Sidebar />
+    </div>
+  )
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+// ✅ Correct: both fetch simultaneously
+async function Header() {
+  const data = await fetchHeader()
+  return <div>{data}</div>
+}
+
+async function Sidebar() {
+  const items = await fetchSidebarItems()
+  return <nav>{items.map(renderItem)}</nav>
+}
+
+export default function Page() {
+  return (
+    <div>
+      <Header />
+      <Sidebar />
+    </div>
+  )
+}
+```
+
+---
+
+## 4. Per-Request Deduplication with React.cache()
+
+**Impact: MEDIUM (deduplicates within request)**
+
+```typescript
+import { cache } from 'react'
+
+export const getCurrentUser = cache(async () => {
+  const session = await auth()
+  if (!session?.user?.id) return null
+  return await db.user.findUnique({
+    where: { id: session.user.id }
+  })
+})
+```
+
+Within a single request, multiple calls to `getCurrentUser()` execute the query only once.
+
+---
+
+## 5. Use after() for Non-Blocking Operations
+
+**Impact: MEDIUM (faster response times)**
+
+Use Next.js's `after()` to schedule work that should execute after a response is sent.
+
+```tsx
+// ❌ Incorrect: blocks response
+export async function POST(request: Request) {
+  await updateDatabase(request)
+
+  // Logging blocks the response
+  const userAgent = request.headers.get('user-agent') || 'unknown'
+  await logUserAction({ userAgent })
+
+  return new Response(JSON.stringify({ status: 'success' }))
+}
+
+// ✅ Correct: non-blocking
+import { after } from 'next/server'
+import { headers, cookies } from 'next/headers'
+
+export async function POST(request: Request) {
+  await updateDatabase(request)
+
+  // Log after response is sent
+  after(async () => {
+    const userAgent = (await headers()).get('user-agent') || 'unknown'
+    const sessionCookie = (await cookies()).get('session-id')?.value || 'anonymous'
+
+    logUserAction({ sessionCookie, userAgent })
+  })
+
+  return new Response(JSON.stringify({ status: 'success' }))
+}
+```
+
+**Common use cases:**
+- Analytics tracking
+- Audit logging
+- Sending notifications
+- Cache invalidation
+- Cleanup tasks

package/.claude/skills/security-audit/SKILL.md

@@ -0,0 +1,226 @@
+---
+name: security-audit
+description: |
+  Security audit with OWASP Top 10, SAST/DAST, and dependency scanning.
+
+  Use when:
+  - Auditing code for security vulnerabilities
+  - Checking OWASP Top 10 compliance
+  - Scanning dependencies for CVEs
+  - Reviewing authentication/authorization logic
+
+  Key Features:
+  - OWASP Top 10 checklist
+  - SAST: Static code analysis
+  - Dependency vulnerability scanning
+  - Auth/AuthZ review patterns
+allowed-tools: [read, execute, grep, glob, mcp__serena__find_symbol, mcp__serena__get_symbols_overview]
+---
+
+# Security Audit
+
+Find vulnerabilities before attackers do.
+
+## The Iron Law
+
+```
+NO DEPLOY WITHOUT SECURITY REVIEW. NO USER INPUT WITHOUT VALIDATION. NO SECRET IN CODE.
+```
+
+---
+
+## Quick Start
+
+```
+安全审计请求
+    │
+    ▼
+┌─────────────────────────────────────────────────────────────┐
+│ Step 1: 确定审计范围                                         │
+│ ─────────────────────────────────────────────────────────── │
+│ 全量审计 → 完整 OWASP Top 10 检查                           │
+│ 增量审计 → 仅审查变更代码                                    │
+│ 专项审计 → 特定漏洞类型 (如 SQL 注入)                       │
+└─────────────────────────────────────────────────────────────┘
+    │
+    ▼
+┌─────────────────────────────────────────────────────────────┐
+│ Step 2: 执行检查                                             │
+│ ─────────────────────────────────────────────────────────── │
+│ 1. OWASP Top 10 检查清单                                    │
+│ 2. 依赖漏洞扫描                                              │
+│ 3. 敏感信息泄露检查                                          │
+│ 4. 认证/授权逻辑审查                                         │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 🔴 OWASP Top 10 (2021) 检查清单
+
+| # | 漏洞类型 | 检查要点 | 严重等级 |
+|---|----------|----------|----------|
+| A01 | Broken Access Control | 越权访问、IDOR、路径遍历 | **P0** |
+| A02 | Cryptographic Failures | 弱加密、明文传输、硬编码密钥 | **P0** |
+| A03 | Injection | SQL/NoSQL/OS/LDAP 注入 | **P0** |
+| A04 | Insecure Design | 业务逻辑漏洞、缺少威胁建模 | **P1** |
+| A05 | Security Misconfiguration | 默认配置、错误信息泄露 | **P1** |
+| A06 | Vulnerable Components | 已知漏洞依赖、过期组件 | **P0** |
+| A07 | Auth Failures | 弱密码、会话固定、暴力破解 | **P0** |
+| A08 | Data Integrity Failures | 不安全反序列化、CI/CD 污染 | **P1** |
+| A09 | Logging Failures | 日志不足、敏感信息记录 | **P2** |
+| A10 | SSRF | 服务端请求伪造 | **P1** |
+
+→ 详细检查清单: `references/owasp-top10-checklist.md`
+
+---
+
+## 🔴 代码审查模式
+
+### Injection 检查
+
+```python
+# ❌ 危险模式
+query = f"SELECT * FROM users WHERE id = {user_id}"  # SQL 注入
+os.system(f"ping {host}")  # 命令注入
+eval(user_input)  # 代码注入
+
+# ✅ 安全模式
+cursor.execute("SELECT * FROM users WHERE id = ?", (user_id,))  # 参数化
+subprocess.run(["ping", host], shell=False)  # 避免 shell
+ast.literal_eval(user_input)  # 安全解析
+```
+
+### XSS 检查
+
+```javascript
+// ❌ 危险模式
+element.innerHTML = userInput;  // DOM XSS
+document.write(data);  // 反射 XSS
+
+// ✅ 安全模式
+element.textContent = userInput;  // 自动转义
+DOMPurify.sanitize(data);  // 显式清理
+```
+
+### 认证检查
+
+| 检查项 | 通过标准 |
+|--------|----------|
+| 密码存储 | bcrypt/argon2，cost ≥ 10 |
+| 会话管理 | HttpOnly + Secure + SameSite |
+| Token | JWT 签名验证 + 过期检查 |
+| 暴力破解 | 速率限制 + 账户锁定 |
+
+---
+
+## 🔴 依赖漏洞扫描
+
+### 扫描命令
+
+```bash
+# Python
+pip-audit
+safety check
+
+# Node.js
+npm audit
+yarn audit
+
+# 通用
+snyk test
+trivy fs .
+```
+
+### 漏洞处理优先级
+
+| CVSS 分数 | 严重等级 | 处理时限 |
+|-----------|----------|----------|
+| 9.0-10.0 | Critical | 立即修复 |
+| 7.0-8.9 | High | 24 小时内 |
+| 4.0-6.9 | Medium | 1 周内 |
+| 0.1-3.9 | Low | 下个版本 |
+
+---
+
+## 🔴 敏感信息检查
+
+### 禁止出现在代码中
+
+```
+# 正则模式
+API[_-]?KEY.*=.*['"][a-zA-Z0-9]{20,}['"]
+SECRET.*=.*['"][a-zA-Z0-9]{20,}['"]
+PASSWORD.*=.*['"].+['"]
+-----BEGIN (RSA|EC|OPENSSH) PRIVATE KEY-----
+```
+
+### 检查位置
+
+| 位置 | 检查内容 |
+|------|----------|
+| 源代码 | 硬编码密钥、密码 |
+| 配置文件 | .env 是否在 .gitignore |
+| Git 历史 | 历史提交中的敏感信息 |
+| 日志 | 是否记录敏感数据 |
+
+---
+
+## 输出契约
+
+```markdown
+## Security Audit Report
+
+### 审计范围
+- 文件数: X
+- 代码行数: Y
+
+### 发现汇总
+| 严重等级 | 数量 |
+|----------|------|
+| P0 (Critical) | X |
+| P1 (High) | Y |
+| P2 (Medium) | Z |
+
+### 详细发现
+#### [SEC-001] SQL 注入 (P0)
+- **位置**: `src/api/users.py:45`
+- **问题**: 字符串拼接构造 SQL
+- **修复**: 使用参数化查询
+
+### 依赖漏洞
+| 包名 | 版本 | CVE | 严重等级 | 修复版本 |
+|------|------|-----|----------|----------|
+
+### 建议
+1. ...
+```
+
+---
+
+## 与 fullstack-developer 集成
+
+```
+fullstack-developer Phase 6 (code-review)
+    │
+    ├── 涉及安全敏感代码?
+    │       ↓
+    │   security-audit
+    │       │
+    │       ├── OWASP Top 10 检查
+    │       ├── 依赖漏洞扫描
+    │       └── 返回: 安全审计报告
+    │
+    └── 继续 code-review
+```
+
+---
+
+## Reference Navigation
+
+| Situation | Read This |
+|-----------|-----------|
+| OWASP 详细检查 | `references/owasp-top10-checklist.md` |
+| 注入防护 | `references/injection-prevention.md` |
+| 认证安全 | `references/auth-security-patterns.md` |
+| 依赖扫描 | `references/dependency-scanning.md` |