[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KMPRQ2MTAD1AV71BYB10FN":3,"skill-same:01M6KMPRQ2MTAD1AV71BYB10FN":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":55,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M6KMPRQ2MTAD1AV71BYB10FN","speckit-drift",null,"Analyze drift between specs and implementation. Compares requirements against code to find divergence.","AI-native-Systems-Research\u002Fai-native-storage-certus","AI-native-Systems-Research","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F270755458?v=4","01M6KKQWSJX0D4X33E0KKSR4WM","AI-native Systems Research","01M6KKQWXTKR6MYVQMPKVJ5WD5",3,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FAI-native-Systems-Research\u002Fai-native-storage-certus\u002Fblob\u002Funstable\u002Fcomponents\u002Fdispatch-map\u002F.claude\u002Fskills\u002Fspeckit-drift\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"speckit drift","speckit","drift","structure","true","kit","with","spec-kit","requirements","commands","project","directory","find","analyze","specify","code","sync","project structure","github","spec","2026-11-10 10:12:30",false,"---\nname: cc-skill-coding-standards\ndescription: \"Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# Coding Standards & Best Practices\n\nUniversal coding standards applicable across all projects.\n\n## Code Quality Principles\n\n### 1. Readability First\n- Code is read more than written\n- Clear variable and function names\n- Self-documenting code preferred over comments\n- Consistent formatting\n\n### 2. KISS (Keep It Simple, Stupid)\n- Simplest solution that works\n- Avoid over-engineering\n- No premature optimization\n- Easy to understand > clever code\n\n### 3. DRY (Don't Repeat Yourself)\n- Extract common logic into functions\n- Create reusable components\n- Share utilities across modules\n- Avoid copy-paste programming\n\n### 4. YAGNI (You Aren't Gonna Need It)\n- Don't build features before they're needed\n- Avoid speculative generality\n- Add complexity only when required\n- Start simple, refactor when needed\n\n## TypeScript\u002FJavaScript Standards\n\n### Variable Naming\n\n```typescript\n\u002F\u002F ✅ GOOD: Descriptive names\nconst marketSearchQuery = 'election'\nconst isUserAuthenticated = true\nconst totalRevenue = 1000\n\n\u002F\u002F ❌ BAD: Unclear names\nconst q = 'election'\nconst flag = true\nconst x = 1000\n```\n\n### Function Naming\n\n```typescript\n\u002F\u002F ✅ GOOD: Verb-noun pattern\nasync function fetchMarketData(marketId: string) { }\nfunction calculateSimilarity(a: number[], b: number[]) { }\nfunction isValidEmail(email: string): boolean { }\n\n\u002F\u002F ❌ BAD: Unclear or noun-only\nasync function market(id: string) { }\nfunction similarity(a, b) { }\nfunction email(e) { }\n```\n\n### Immutability Pattern (CRITICAL)\n\n```typescript\n\u002F\u002F ✅ ALWAYS use spread operator\nconst updatedUser = {\n  ...user,\n  name: 'New Name'\n}\n\nconst updatedArray = [...items, newItem]\n\n\u002F\u002F ❌ NEVER mutate directly\nuser.name = 'New Name'  \u002F\u002F BAD\nitems.push(newItem)     \u002F\u002F BAD\n```\n\n### Error Handling\n\n```typescript\n\u002F\u002F ✅ GOOD: Comprehensive error handling\nasync function fetchData(url: string) {\n  try {\n    const response = await fetch(url)\n\n    if (!response.ok) {\n      throw new Error(`HTTP ${response.status}: ${response.statusText}`)\n    }\n\n    return await response.json()\n  } catch (error) {\n    console.error('Fetch failed:', error)\n    throw new Error('Failed to fetch data')\n  }\n}\n\n\u002F\u002F ❌ BAD: No error handling\nasync function fetchData(url) {\n  const response = await fetch(url)\n  return response.json()\n}\n```\n\n### Async\u002FAwait Best Practices\n\n```typescript\n\u002F\u002F ✅ GOOD: Parallel execution when possible\nconst [users, markets, stats] = await Promise.all([\n  fetchUsers(),\n  fetchMarkets(),\n  fetchStats()\n])\n\n\u002F\u002F ❌ BAD: Sequential when unnecessary\nconst users = await fetchUsers()\nconst markets = await fetchMarkets()\nconst stats = await fetchStats()\n```\n\n### Type Safety\n\n```typescript\n\u002F\u002F ✅ GOOD: Proper types\ninterface Market {\n  id: string\n  name: string\n  status: 'active' | 'resolved' | 'closed'\n  created_at: Date\n}\n\nfunction getMarket(id: string): Promise\u003CMarket> {\n  \u002F\u002F Implementation\n}\n\n\u002F\u002F ❌ BAD: Using 'any'\nfunction getMarket(id: any): Promise\u003Cany> {\n  \u002F\u002F Implementation\n}\n```\n\n## React Best Practices\n\n### Component Structure\n\n```typescript\n\u002F\u002F ✅ GOOD: Functional component with types\ninterface ButtonProps {\n  children: React.ReactNode\n  onClick: () => void\n  disabled?: boolean\n  variant?: 'primary' | 'secondary'\n}\n\nexport function Button({\n  children,\n  onClick,\n  disabled = false,\n  variant = 'primary'\n}: ButtonProps) {\n  return (\n    \u003Cbutton\n      onClick={onClick}\n      disabled={disabled}\n      className={`btn btn-${variant}`}\n    >\n      {children}\n    \u003C\u002Fbutton>\n  )\n}\n\n\u002F\u002F ❌ BAD: No types, unclear structure\nexport function Button(props) {\n  return \u003Cbutton onClick={props.onClick}>{props.children}\u003C\u002Fbutton>\n}\n```\n\n### Custom Hooks\n\n```typescript\n\u002F\u002F ✅ GOOD: Reusable custom hook\nexport function useDebounce\u003CT>(value: T, delay: number): T {\n  const [debouncedValue, setDebouncedValue] = useState\u003CT>(value)\n\n  useEffect(() => {\n    const handler = setTimeout(() => {\n      setDebouncedValue(value)\n    }, delay)\n\n    return () => clearTimeout(handler)\n  }, [value, delay])\n\n  return debouncedValue\n}\n\n\u002F\u002F Usage\nconst debouncedQuery = useDebounce(searchQuery, 500)\n```\n\n### State Management\n\n```typescript\n\u002F\u002F ✅ GOOD: Proper state updates\nconst [count, setCount] = useState(0)\n\n\u002F\u002F Functional update for state based on previous state\nsetCount(prev => prev + 1)\n\n\u002F\u002F ❌ BAD: Direct state reference\nsetCount(count + 1)  \u002F\u002F Can be stale in async scenarios\n```\n\n### Conditional Rendering\n\n```typescript\n\u002F\u002F ✅ GOOD: Clear conditional rendering\n{isLoading && \u003CSpinner \u002F>}\n{error && \u003CErrorMessage error={error} \u002F>}\n{data && \u003CDataDisplay data={data} \u002F>}\n\n\u002F\u002F ❌ BAD: Ternary hell\n{isLoading ? \u003CSpinner \u002F> : error ? \u003CErrorMessage error={error} \u002F> : data ? \u003CDataDisplay data={data} \u002F> : null}\n```\n\n## API Design Standards\n\n### REST API Conventions\n\n```\nGET    \u002Fapi\u002Fmarkets              # List all markets\nGET    \u002Fapi\u002Fmarkets\u002F:id          # Get specific market\nPOST   \u002Fapi\u002Fmarkets              # Create new market\nPUT    \u002Fapi\u002Fmarkets\u002F:id          # Update market (full)\nPATCH  \u002Fapi\u002Fmarkets\u002F:id          # Update market (partial)\nDELETE \u002Fapi\u002Fmarkets\u002F:id          # Delete market\n\n# Query parameters for filtering\nGET \u002Fapi\u002Fmarkets?status=active&limit=10&offset=0\n```\n\n### Response Format\n\n```typescript\n\u002F\u002F ✅ GOOD: Consistent response structure\ninterface ApiResponse\u003CT> {\n  success: boolean\n  data?: T\n  error?: string\n  meta?: {\n    total: number\n    page: number\n    limit: number\n  }\n}\n\n\u002F\u002F Success response\nreturn NextResponse.json({\n  success: true,\n  data: markets,\n  meta: { total: 100, page: 1, limit: 10 }\n})\n\n\u002F\u002F Error response\nreturn NextResponse.json({\n  success: false,\n  error: 'Invalid request'\n}, { status: 400 })\n```\n\n### Input Validation\n\n```typescript\nimport { z } from 'zod'\n\n\u002F\u002F ✅ GOOD: Schema validation\nconst CreateMarketSchema = z.object({\n  name: z.string().min(1).max(200),\n  description: z.string().min(1).max(2000),\n  endDate: z.string().datetime(),\n  categories: z.array(z.string()).min(1)\n})\n\nexport async function POST(request: Request) {\n  const body = await request.json()\n\n  try {\n    const validated = CreateMarketSchema.parse(body)\n    \u002F\u002F Proceed with validated data\n  } catch (error) {\n    if (error instanceof z.ZodError) {\n      return NextResponse.json({\n        success: false,\n        error: 'Validation failed',\n        details: error.errors\n      }, { status: 400 })\n    }\n  }\n}\n```\n\n## File Organization\n\n### Project Structure\n\n```\nsrc\u002F\n├── app\u002F                    # Next.js App Router\n│   ├── api\u002F               # API routes\n│   ├── markets\u002F           # Market pages\n│   └── (auth)\u002F           # Auth pages (route groups)\n├── components\u002F            # React components\n│   ├── ui\u002F               # Generic UI components\n│   ├── forms\u002F            # Form components\n│   └── layouts\u002F          # Layout components\n├── hooks\u002F                # Custom React hooks\n├── lib\u002F                  # Utilities and configs\n│   ├── api\u002F             # API clients\n│   ├── utils\u002F           # Helper functions\n│   └── constants\u002F       # Constants\n├── types\u002F                # TypeScript types\n└── styles\u002F              # Global styles\n```\n\n### File Naming\n\n```\ncomponents\u002FButton.tsx          # PascalCase for components\nhooks\u002FuseAuth.ts              # camelCase with 'use' prefix\nlib\u002FformatDate.ts             # camelCase for utilities\ntypes\u002Fmarket.types.ts         # camelCase with .types suffix\n```\n\n## Comments & Documentation\n\n### When to Comment\n\n```typescript\n\u002F\u002F ✅ GOOD: Explain WHY, not WHAT\n\u002F\u002F Use exponential backoff to avoid overwhelming the API during outages\nconst delay = Math.min(1000 * Math.pow(2, retryCount), 30000)\n\n\u002F\u002F Deliberately using mutation here for performance with large arrays\nitems.push(newItem)\n\n\u002F\u002F ❌ BAD: Stating the obvious\n\u002F\u002F Increment counter by 1\ncount++\n\n\u002F\u002F Set name to user's name\nname = user.name\n```\n\n### JSDoc for Public APIs\n\n```typescript\n\u002F**\n * Searches markets using semantic similarity.\n *\n * @param query - Natural language search query\n * @param limit - Maximum number of results (default: 10)\n * @returns Array of markets sorted by similarity score\n * @throws {Error} If OpenAI API fails or Redis unavailable\n *\n * @example\n * ```typescript\n * const results = await searchMarkets('election', 5)\n * console.log(results[0].name) \u002F\u002F \"Trump vs Biden\"\n * ```\n *\u002F\nexport async function searchMarkets(\n  query: string,\n  limit: number = 10\n): Promise\u003CMarket[]> {\n  \u002F\u002F Implementation\n}\n```\n\n## Performance Best Practices\n\n### Memoization\n\n```typescript\nimport { useMemo, useCallback } from 'react'\n\n\u002F\u002F ✅ GOOD: Memoize expensive computations\nconst sortedMarkets = useMemo(() => {\n  return markets.sort((a, b) => b.volume - a.volume)\n}, [markets])\n\n\u002F\u002F ✅ GOOD: Memoize callbacks\nconst handleSearch = useCallback((query: string) => {\n  setSearchQuery(query)\n}, [])\n```\n\n### Lazy Loading\n\n```typescript\nimport { lazy, Suspense } from 'react'\n\n\u002F\u002F ✅ GOOD: Lazy load heavy components\nconst HeavyChart = lazy(() => import('.\u002FHeavyChart'))\n\nexport function Dashboard() {\n  return (\n    \u003CSuspense fallback={\u003CSpinner \u002F>}>\n      \u003CHeavyChart \u002F>\n    \u003C\u002FSuspense>\n  )\n}\n```\n\n### Database Queries\n\n```typescript\n\u002F\u002F ✅ GOOD: Select only needed columns\nconst { data } = await supabase\n  .from('markets')\n  .select('id, name, status')\n  .limit(10)\n\n\u002F\u002F ❌ BAD: Select everything\nconst { data } = await supabase\n  .from('markets')\n  .select('*')\n```\n\n## Testing Standards\n\n### Test Structure (AAA Pattern)\n\n```typescript\ntest('calculates similarity correctly', () => {\n  \u002F\u002F Arrange\n  const vector1 = [1, 0, 0]\n  const vector2 = [0, 1, 0]\n\n  \u002F\u002F Act\n  const similarity = calculateCosineSimilarity(vector1, vector2)\n\n  \u002F\u002F Assert\n  expect(similarity).toBe(0)\n})\n```\n\n### Test Naming\n\n```typescript\n\u002F\u002F ✅ GOOD: Descriptive test names\ntest('returns empty array when no markets match query', () => { })\ntest('throws error when OpenAI API key is missing', () => { })\ntest('falls back to substring search when Redis unavailable', () => { })\n\n\u002F\u002F ❌ BAD: Vague test names\ntest('works', () => { })\ntest('test search', () => { })\n```\n\n## Code Smell Detection\n\nWatch for these anti-patterns:\n\n### 1. Long Functions\n```typescript\n\u002F\u002F ❌ BAD: Function > 50 lines\nfunction processMarketData() {\n  \u002F\u002F 100 lines of code\n}\n\n\u002F\u002F ✅ GOOD: Split into smaller functions\nfunction processMarketData() {\n  const validated = validateData()\n  const transformed = transformData(validated)\n  return saveData(transformed)\n}\n```\n\n### 2. Deep Nesting\n```typescript\n\u002F\u002F ❌ BAD: 5+ levels of nesting\nif (user) {\n  if (user.isAdmin) {\n    if (market) {\n      if (market.isActive) {\n        if (hasPermission) {\n          \u002F\u002F Do something\n        }\n      }\n    }\n  }\n}\n\n\u002F\u002F ✅ GOOD: Early returns\nif (!user) return\nif (!user.isAdmin) return\nif (!market) return\nif (!market.isActive) return\nif (!hasPermission) return\n\n\u002F\u002F Do something\n```\n\n### 3. Magic Numbers\n```typescript\n\u002F\u002F ❌ BAD: Unexplained numbers\nif (retryCount > 3) { }\nsetTimeout(callback, 500)\n\n\u002F\u002F ✅ GOOD: Named constants\nconst MAX_RETRIES = 3\nconst DEBOUNCE_DELAY_MS = 500\n\nif (retryCount > MAX_RETRIES) { }\nsetTimeout(callback, DEBOUNCE_DELAY_MS)\n```\n\n**Remember**: Code quality is not negotiable. Clear, maintainable code enables rapid development and confident refactoring.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n","# Coding Standards & Best Practices\n\nUniversal coding standards applicable across all projects.\n\n## Code Quality Principles\n\n### 1. Readability First\n- Code is read more than written\n- Clear variable and function names\n- Self-documenting code preferred over comments\n- Consistent formatting\n\n### 2. KISS (Keep It Simple, Stupid)\n- Simplest solution that works\n- Avoid over-engineering\n- No premature optimization\n- Easy to understand > clever code\n\n### 3. DRY (Don't Repeat Yourself)\n- Extract common logic into functions\n- Create reusable components\n- Share utilities across modules\n- Avoid copy-paste programming\n\n### 4. YAGNI (You Aren't Gonna Need It)\n- Don't build features before they're needed\n- Avoid speculative generality\n- Add complexity only when required\n- Start simple, refactor when needed\n\n## TypeScript\u002FJavaScript Standards\n\n### Variable Naming\n\n```typescript\n\u002F\u002F ✅ GOOD: Descriptive names\nconst marketSearchQuery = 'election'\nconst isUserAuthenticated = true\nconst totalRevenue = 1000\n\n\u002F\u002F ❌ BAD: Unclear names\nconst q = 'election'\nconst flag = true\nconst x = 1000\n```\n\n### Function Naming\n\n```typescript\n\u002F\u002F ✅ GOOD: Verb-noun pattern\nasync function fetchMarketData(marketId: string) { }\nfunction calculateSimilarity(a: number[], b: number[]) { }\nfunction isValidEmail(email: string): boolean { }\n\n\u002F\u002F ❌ BAD: Unclear or noun-only\nasync function market(id: string) { }\nfunction similarity(a, b) { }\nfunction email(e) { }\n```\n\n### Immutability Pattern (CRITICAL)\n\n```typescript\n\u002F\u002F ✅ ALWAYS use spread operator\nconst updatedUser = {\n  ...user,\n  name: 'New Name'\n}\n\nconst updatedArray = [...items, newItem]\n\n\u002F\u002F ❌ NEVER mutate directly\nuser.name = 'New Name'  \u002F\u002F BAD\nitems.push(newItem)     \u002F\u002F BAD\n```\n\n### Error Handling\n\n```typescript\n\u002F\u002F ✅ GOOD: Comprehensive error handling\nasync function fetchData(url: string) {\n  try {\n    const response = await fetch(url)\n\n    if (!response.ok) {\n      throw new Error(`HTTP ${response.status}: ${response.statusText}`)\n    }\n\n    return await response.json()\n  } catch (error) {\n    console.error('Fetch failed:', error)\n    throw new Error('Failed to fetch data')\n  }\n}\n\n\u002F\u002F ❌ BAD: No error handling\nasync function fetchData(url) {\n  const response = await fetch(url)\n  return response.json()\n}\n```\n\n### Async\u002FAwait Best Practices\n\n```typescript\n\u002F\u002F ✅ GOOD: Parallel execution when possible\nconst [users, markets, stats] = await Promise.all([\n  fetchUsers(),\n  fetchMarkets(),\n  fetchStats()\n])\n\n\u002F\u002F ❌ BAD: Sequential when unnecessary\nconst users = await fetchUsers()\nconst markets = await fetchMarkets()\nconst stats = await fetchStats()\n```\n\n### Type Safety\n\n```typescript\n\u002F\u002F ✅ GOOD: Proper types\ninterface Market {\n  id: string\n  name: string\n  status: 'active' | 'resolved' | 'closed'\n  created_at: Date\n}\n\nfunction getMarket(id: string): Promise\u003CMarket> {\n  \u002F\u002F Implementation\n}\n\n\u002F\u002F ❌ BAD: Using 'any'\nfunction getMarket(id: any): Promise\u003Cany> {\n  \u002F\u002F Implementation\n}\n```\n\n## React Best Practices\n\n### Component Structure\n\n```typescript\n\u002F\u002F ✅ GOOD: Functional component with types\ninterface ButtonProps {\n  children: React.ReactNode\n  onClick: () => void\n  disabled?: boolean\n  variant?: 'primary' | 'secondary'\n}\n\nexport function Button({\n  children,\n  onClick,\n  disabled = false,\n  variant = 'primary'\n}: ButtonProps) {\n  return (\n    \u003Cbutton\n      onClick={onClick}\n      disabled={disabled}\n      className={`btn btn-${variant}`}\n    >\n      {children}\n    \u003C\u002Fbutton>\n  )\n}\n\n\u002F\u002F ❌ BAD: No types, unclear structure\nexport function Button(props) {\n  return \u003Cbutton onClick={props.onClick}>{props.children}\u003C\u002Fbutton>\n}\n```\n\n### Custom Hooks\n\n```typescript\n\u002F\u002F ✅ GOOD: Reusable custom hook\nexport function useDebounce\u003CT>(value: T, delay: number): T {\n  const [debouncedValue, setDebouncedValue] = useState\u003CT>(value)\n\n  useEffect(() => {\n    const handler = setTimeout(() => {\n      setDebouncedValue(value)\n    }, delay)\n\n    return () => clearTimeout(handler)\n  }, [value, delay])\n\n  return debouncedValue\n}\n\n\u002F\u002F Usage\nconst debouncedQuery = useDebounce(searchQuery, 500)\n```\n\n### State Management\n\n```typescript\n\u002F\u002F ✅ GOOD: Proper state updates\nconst [count, setCount] = useState(0)\n\n\u002F\u002F Functional update for state based on previous state\nsetCount(prev => prev + 1)\n\n\u002F\u002F ❌ BAD: Direct state reference\nsetCount(count + 1)  \u002F\u002F Can be stale in async scenarios\n```\n\n### Conditional Rendering\n\n```typescript\n\u002F\u002F ✅ GOOD: Clear conditional rendering\n{isLoading && \u003CSpinner \u002F>}\n{error && \u003CErrorMessage error={error} \u002F>}\n{data && \u003CDataDisplay data={data} \u002F>}\n\n\u002F\u002F ❌ BAD: Ternary hell\n{isLoading ? \u003CSpinner \u002F> : error ? \u003CErrorMessage error={error} \u002F> : data ? \u003CDataDisplay data={data} \u002F> : null}\n```\n\n## API Design Standards\n\n### REST API Conventions\n\n```\nGET    \u002Fapi\u002Fmarkets              # List all markets\nGET    \u002Fapi\u002Fmarkets\u002F:id          # Get specific market\nPOST   \u002Fapi\u002Fmarkets              # Create new market\nPUT    \u002Fapi\u002Fmarkets\u002F:id          # Update market (full)\nPATCH  \u002Fapi\u002Fmarkets\u002F:id          # Update market (partial)\nDELETE \u002Fapi\u002Fmarkets\u002F:id          # Delete market\n\n# Query parameters for filtering\nGET \u002Fapi\u002Fmarkets?status=active&limit=10&offset=0\n```\n\n### Response Format\n\n```typescript\n\u002F\u002F ✅ GOOD: Consistent response structure\ninterface ApiResponse\u003CT> {\n  success: boolean\n  data?: T\n  error?: string\n  meta?: {\n    total: number\n    page: number\n    limit: number\n  }\n}\n\n\u002F\u002F Success response\nreturn NextResponse.json({\n  success: true,\n  data: markets,\n  meta: { total: 100, page: 1, limit: 10 }\n})\n\n\u002F\u002F Error response\nreturn NextResponse.json({\n  success: false,\n  error: 'Invalid request'\n}, { status: 400 })\n```\n\n### Input Validation\n\n```typescript\nimport { z } from 'zod'\n\n\u002F\u002F ✅ GOOD: Schema validation\nconst CreateMarketSchema = z.object({\n  name: z.string().min(1).max(200),\n  description: z.string().min(1).max(2000),\n  endDate: z.string().datetime(),\n  categories: z.array(z.string()).min(1)\n})\n\nexport async function POST(request: Request) {\n  const body = await request.json()\n\n  try {\n    const validated = CreateMarketSchema.parse(body)\n    \u002F\u002F Proceed with validated data\n  } catch (error) {\n    if (error instanceof z.ZodError) {\n      return NextResponse.json({\n        success: false,\n        error: 'Validation failed',\n        details: error.errors\n      }, { status: 400 })\n    }\n  }\n}\n```\n\n## File Organization\n\n### Project Structure\n\n```\nsrc\u002F\n├── app\u002F                    # Next.js App Router\n│   ├── api\u002F               # API routes\n│   ├── markets\u002F           # Market pages\n│   └── (auth)\u002F           # Auth pages (route groups)\n├── components\u002F            # React components\n│   ├── ui\u002F               # Generic UI components\n│   ├── forms\u002F            # Form components\n│   └── layouts\u002F          # Layout components\n├── hooks\u002F                # Custom React hooks\n├── lib\u002F                  # Utilities and configs\n│   ├── api\u002F             # API clients\n│   ├── utils\u002F           # Helper functions\n│   └── constants\u002F       # Constants\n├── types\u002F                # TypeScript types\n└── styles\u002F              # Global styles\n```\n\n### File Naming\n\n```\ncomponents\u002FButton.tsx          # PascalCase for components\nhooks\u002FuseAuth.ts              # camelCase with 'use' prefix\nlib\u002FformatDate.ts             # camelCase for utilities\ntypes\u002Fmarket.types.ts         # camelCase with .types suffix\n```\n\n## Comments & Documentation\n\n### When to Comment\n\n```typescript\n\u002F\u002F ✅ GOOD: Explain WHY, not WHAT\n\u002F\u002F Use exponential backoff to avoid overwhelming the API during outages\nconst delay = Math.min(1000 * Math.pow(2, retryCount), 30000)\n\n\u002F\u002F Deliberately using mutation here for performance with large arrays\nitems.push(newItem)\n\n\u002F\u002F ❌ BAD: Stating the obvious\n\u002F\u002F Increment counter by 1\ncount++\n\n\u002F\u002F Set name to user's name\nname = user.name\n```\n\n### JSDoc for Public APIs\n\n```typescript\n\u002F**\n * Searches markets using semantic similarity.\n *\n * @param query - Natural language search query\n * @param limit - Maximum number of results (default: 10)\n * @returns Array of markets sorted by similarity score\n * @throws {Error} If OpenAI API fails or Redis unavailable\n *\n * @example\n * ```typescript\n * const results = await searchMarkets('election', 5)\n * console.log(results[0].name) \u002F\u002F \"Trump vs Biden\"\n * ```\n *\u002F\nexport async function searchMarkets(\n  query: string,\n  limit: number = 10\n): Promise\u003CMarket[]> {\n  \u002F\u002F Implementation\n}\n```\n\n## Performance Best Practices\n\n### Memoization\n\n```typescript\nimport { useMemo, useCallback } from 'react'\n\n\u002F\u002F ✅ GOOD: Memoize expensive computations\nconst sortedMarkets = useMemo(() => {\n  return markets.sort((a, b) => b.volume - a.volume)\n}, [markets])\n\n\u002F\u002F ✅ GOOD: Memoize callbacks\nconst handleSearch = useCallback((query: string) => {\n  setSearchQuery(query)\n}, [])\n```\n\n### Lazy Loading\n\n```typescript\nimport { lazy, Suspense } from 'react'\n\n\u002F\u002F ✅ GOOD: Lazy load heavy components\nconst HeavyChart = lazy(() => import('.\u002FHeavyChart'))\n\nexport function Dashboard() {\n  return (\n    \u003CSuspense fallback={\u003CSpinner \u002F>}>\n      \u003CHeavyChart \u002F>\n    \u003C\u002FSuspense>\n  )\n}\n```\n\n### Database Queries\n\n```typescript\n\u002F\u002F ✅ GOOD: Select only needed columns\nconst { data } = await supabase\n  .from('markets')\n  .select('id, name, status')\n  .limit(10)\n\n\u002F\u002F ❌ BAD: Select everything\nconst { data } = await supabase\n  .from('markets')\n  .select('*')\n```\n\n## Testing Standards\n\n### Test Structure (AAA Pattern)\n\n```typescript\ntest('calculates similarity correctly', () => {\n  \u002F\u002F Arrange\n  const vector1 = [1, 0, 0]\n  const vector2 = [0, 1, 0]\n\n  \u002F\u002F Act\n  const similarity = calculateCosineSimilarity(vector1, vector2)\n\n  \u002F\u002F Assert\n  expect(similarity).toBe(0)\n})\n```\n\n### Test Naming\n\n```typescript\n\u002F\u002F ✅ GOOD: Descriptive test names\ntest('returns empty array when no markets match query', () => { })\ntest('throws error when OpenAI API key is missing', () => { })\ntest('falls back to substring search when Redis unavailable', () => { })\n\n\u002F\u002F ❌ BAD: Vague test names\ntest('works', () => { })\ntest('test search', () => { })\n```\n\n## Code Smell Detection\n\nWatch for these anti-patterns:\n\n### 1. Long Functions\n```typescript\n\u002F\u002F ❌ BAD: Function > 50 lines\nfunction processMarketData() {\n  \u002F\u002F 100 lines of code\n}\n\n\u002F\u002F ✅ GOOD: Split into smaller functions\nfunction processMarketData() {\n  const validated = validateData()\n  const transformed = transformData(validated)\n  return saveData(transformed)\n}\n```\n\n### 2. Deep Nesting\n```typescript\n\u002F\u002F ❌ BAD: 5+ levels of nesting\nif (user) {\n  if (user.isAdmin) {\n    if (market) {\n      if (market.isActive) {\n        if (hasPermission) {\n          \u002F\u002F Do something\n        }\n      }\n    }\n  }\n}\n\n\u002F\u002F ✅ GOOD: Early returns\nif (!user) return\nif (!user.isAdmin) return\nif (!market) return\nif (!market.isActive) return\nif (!hasPermission) return\n\n\u002F\u002F Do something\n```\n\n### 3. Magic Numbers\n```typescript\n\u002F\u002F ❌ BAD: Unexplained numbers\nif (retryCount > 3) { }\nsetTimeout(callback, 500)\n\n\u002F\u002F ✅ GOOD: Named constants\nconst MAX_RETRIES = 3\nconst DEBOUNCE_DELAY_MS = 500\n\nif (retryCount > MAX_RETRIES) { }\nsetTimeout(callback, DEBOUNCE_DELAY_MS)\n```\n\n**Remember**: Code quality is not negotiable. Clear, maintainable code enables rapid development and confident refactoring.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n",{"name":44,"risk":45,"source":46,"date_added":47,"description":48},"cc-skill-coding-standards","unknown","community","2026-02-27","Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.","main","aae5fa43a57641df274d23f55d90e394333c4050","components\u002Fdispatch-map\u002F.claude\u002Fskills\u002Fspeckit-drift",4,"https:\u002F\u002Fgithub.com\u002FAI-native-Systems-Research\u002Fai-native-storage-certus","https:\u002F\u002Fgithub.com\u002FAI-native-Systems-Research","https:\u002F\u002Fai-native-systems-research.github.io\u002Fai-native-systems-research\u002F","2026-11-10 09:17:37",{"source":8,"skillName":44,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add AI-native-Systems-Research\u002Fai-native-storage-certus --skill cc-skill-coding-standards",{"tool":63,"command":64},"bunx","bunx skills add AI-native-Systems-Research\u002Fai-native-storage-certus --skill cc-skill-coding-standards",{"tool":66,"command":67},"pnpm","pnpm dlx skills add AI-native-Systems-Research\u002Fai-native-storage-certus --skill cc-skill-coding-standards","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FAI-native-Systems-Research\u002Fai-native-storage-certus\u002Fblob\u002Funstable\u002Fcomponents\u002Fdispatch-map\u002F.claude\u002Fskills\u002Fspeckit-drift\u002FSKILL.md",true,[],[72,88,104,115,130,142],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":78,"publishedAt":39},"01M6KP29TWSNGADF3AJ47BR7TY","tools-spin-sync","Synchronize Spin\u002FPromela models with current source code and re-verify","https:\u002F\u002Fgithub.com\u002FAI-native-Systems-Research\u002Fai-native-storage-certus\u002Fblob\u002Funstable\u002Fcomponents\u002Fzyre\u002F.claude\u002Fskills\u002Ftools-spin-sync\u002FSKILL.md",[],[79,80,35,34,81,82,83,84,25,85,86,87],"tools spin sync","Tools","verify","model","models","name","re","source","source code",{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":39},"01M6KP277TDY3ZAJEBP5P6MDT8","tools-spin-model","Create a new Spin\u002FPromela formal verification model for a system property","https:\u002F\u002Fgithub.com\u002FAI-native-Systems-Research\u002Fai-native-storage-certus\u002Fblob\u002Funstable\u002Fcomponents\u002Fzyre\u002F.claude\u002Fskills\u002Ftools-spin-model\u002FSKILL.md",[],[95,82,80,96,97,98,99,100,101,102,103],"tools spin model","system","formal verification","number","for","prove","new","create","verification",{"skillNo":105,"name":106,"nameZh":6,"description":107,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":110,"publishedAt":39},"01M6KP250W406CEDSF02BRXT9D","tools-creusot-install","Install the Creusot Rust verification tool","https:\u002F\u002Fgithub.com\u002FAI-native-Systems-Research\u002Fai-native-storage-certus\u002Fblob\u002Funstable\u002Fcomponents\u002Fzyre\u002F.claude\u002Fskills\u002Ftools-creusot-install\u002FSKILL.md",[],[111,112,80,113,103,114],"tools creusot install","install","rust","tool",{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":39},"01M6KP22H28FQ1X0V7VJHEFWXD","tools-creusot-init","Prepare an existing Cargo project to use Creusot formal verification","https:\u002F\u002Fgithub.com\u002FAI-native-Systems-Research\u002Fai-native-storage-certus\u002Fblob\u002Funstable\u002Fcomponents\u002Fzyre\u002F.claude\u002Fskills\u002Ftools-creusot-init\u002FSKILL.md",[],[122,80,123,29,30,124,125,103,126,97,127,128,129],"tools creusot init","init","components","prepare","use","cargo","manager","Existing",{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":134,"categories":135,"keywords":136,"publishedAt":39},"01M6KP1V506J9YM8DKKVDG1NRE","tools-creusot-coq-install","Add Coq 8.20 as an additional prover to an existing Creusot installation, for verification conditions that SMT solvers cannot discharge","https:\u002F\u002Fgithub.com\u002FAI-native-Systems-Research\u002Fai-native-storage-certus\u002Fblob\u002Funstable\u002Fcomponents\u002Fzyre\u002F.claude\u002Fskills\u002Ftools-creusot-coq-install\u002FSKILL.md",[],[137,138,112,80,99,129,139,140,103,141],"tools creusot coq install","Coq","as","installation","add",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":148,"publishedAt":39},"01M6KP1PQJF3H765TYZAZ7P3EF","tools-creusot-annotate-interfaces","Formally verify a component's properties with Creusot and annotate its interface definitions","https:\u002F\u002Fgithub.com\u002FAI-native-Systems-Research\u002Fai-native-storage-certus\u002Fblob\u002Funstable\u002Fcomponents\u002Fzyre\u002F.claude\u002Fskills\u002Ftools-creusot-annotate-interfaces\u002FSKILL.md",[],[80,149,150,25,84,151,81,152,153],"tools creusot annotate interfaces","annotate","properties","component","interface"]