[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71S080PB7GXNHCBTBWMAKAX":3,"skill-same:01M71S080PB7GXNHCBTBWMAKAX":87},{"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":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":60,"repositoryHtmlUrl":61,"repositoryHomepageUrl":62,"ownerHtmlUrl":63,"ownerBlogUrl":64,"ownerDescription":65,"updatedAt":66,"install":67,"resources":80},"01M71S080PB7GXNHCBTBWMAKAX","coding-standards",null,"Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.","kupzed\u002Fcatatz","kupzed","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F162340645?v=4","01M71S01X9HBM7A7AT3E3YS37F","Kupzed","01M71S01Y3YDQ95T5X2PJSATCF",34,"MIT","https:\u002F\u002Fgithub.com\u002Fkupzed\u002Fcatatz\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fcoding-standards\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"coding standards","coding","standards","project coding","frontend","coding conventions","framework-specific","for","naming","readability","project","quality review","patterns","backend","use","quality","code-quality","framework","code","review","2026-11-10 13:02:02",false,"---\nname: coding-standards\ndescription: Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.\n---\n\n# Coding Standards & Best Practices\n\nBaseline coding conventions applicable across projects.\n\nThis skill is the shared floor, not the detailed framework playbook.\n\n- Use `frontend-patterns` for React, state, forms, rendering, and UI architecture.\n- Use `backend-patterns` or `api-design` for repository\u002Fservice layers, endpoint design, validation, and server-specific concerns.\n- Use `rules\u002Fcommon\u002Fcoding-style.md` when you need the shortest reusable rule layer instead of a full skill walkthrough.\n\n## When to Activate\n\n- Starting a new project or module\n- Reviewing code for quality and maintainability\n- Refactoring existing code to follow conventions\n- Enforcing naming, formatting, or structural consistency\n- Setting up linting, formatting, or type-checking rules\n- Onboarding new contributors to coding conventions\n\n## Scope Boundaries\n\nActivate this skill for:\n- descriptive naming\n- immutability defaults\n- readability, KISS, DRY, and YAGNI enforcement\n- error-handling expectations and code-smell review\n\nDo not use this skill as the primary source for:\n- React composition, hooks, or rendering patterns\n- backend architecture, API design, or database layering\n- domain-specific framework guidance when a narrower ECC skill already exists\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 PASS: GOOD: Descriptive names\nconst marketSearchQuery = 'election'\nconst isUserAuthenticated = true\nconst totalRevenue = 1000\n\n\u002F\u002F FAIL: BAD: Unclear names\nconst q = 'election'\nconst flag = true\nconst x = 1000\n```\n\n### Function Naming\n\n```typescript\n\u002F\u002F PASS: GOOD: Verb-noun pattern\nasync function fetchMarketData(marketId: string) { }\nfunction calculateSimilarity(a: number[], b: number[]) { }\nfunction isValidEmail(email: string): boolean { }\n\n\u002F\u002F FAIL: 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 PASS: ALWAYS use spread operator\nconst updatedUser = {\n  ...user,\n  name: 'New Name'\n}\n\nconst updatedArray = [...items, newItem]\n\n\u002F\u002F FAIL: 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 PASS: 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 FAIL: 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 PASS: GOOD: Parallel execution when possible\nconst [users, markets, stats] = await Promise.all([\n  fetchUsers(),\n  fetchMarkets(),\n  fetchStats()\n])\n\n\u002F\u002F FAIL: 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 PASS: 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 FAIL: 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 PASS: 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 FAIL: 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 PASS: 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 PASS: 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 FAIL: 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 PASS: GOOD: Clear conditional rendering\n{isLoading && \u003CSpinner \u002F>}\n{error && \u003CErrorMessage error={error} \u002F>}\n{data && \u003CDataDisplay data={data} \u002F>}\n\n\u002F\u002F FAIL: 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 PASS: 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 PASS: 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 PASS: 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 FAIL: 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 PASS: GOOD: Memoize expensive computations\n\u002F\u002F Copy before sorting - Array.prototype.sort mutates in place\nconst sortedMarkets = useMemo(() => {\n  return [...markets].sort((a, b) => b.volume - a.volume)\n}, [markets])\n\n\u002F\u002F PASS: 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 PASS: 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 PASS: GOOD: Select only needed columns\nconst { data } = await supabase\n  .from('markets')\n  .select('id, name, status')\n  .limit(10)\n\n\u002F\u002F FAIL: 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 PASS: 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 FAIL: 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 FAIL: BAD: Function > 50 lines\nfunction processMarketData() {\n  \u002F\u002F 100 lines of code\n}\n\n\u002F\u002F PASS: 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 FAIL: 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 PASS: 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 FAIL: BAD: Unexplained numbers\nif (retryCount > 3) { }\nsetTimeout(callback, 500)\n\n\u002F\u002F PASS: 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","# Coding Standards & Best Practices\n\nBaseline coding conventions applicable across projects.\n\nThis skill is the shared floor, not the detailed framework playbook.\n\n- Use `frontend-patterns` for React, state, forms, rendering, and UI architecture.\n- Use `backend-patterns` or `api-design` for repository\u002Fservice layers, endpoint design, validation, and server-specific concerns.\n- Use `rules\u002Fcommon\u002Fcoding-style.md` when you need the shortest reusable rule layer instead of a full skill walkthrough.\n\n## When to Activate\n\n- Starting a new project or module\n- Reviewing code for quality and maintainability\n- Refactoring existing code to follow conventions\n- Enforcing naming, formatting, or structural consistency\n- Setting up linting, formatting, or type-checking rules\n- Onboarding new contributors to coding conventions\n\n## Scope Boundaries\n\nActivate this skill for:\n- descriptive naming\n- immutability defaults\n- readability, KISS, DRY, and YAGNI enforcement\n- error-handling expectations and code-smell review\n\nDo not use this skill as the primary source for:\n- React composition, hooks, or rendering patterns\n- backend architecture, API design, or database layering\n- domain-specific framework guidance when a narrower ECC skill already exists\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 PASS: GOOD: Descriptive names\nconst marketSearchQuery = 'election'\nconst isUserAuthenticated = true\nconst totalRevenue = 1000\n\n\u002F\u002F FAIL: BAD: Unclear names\nconst q = 'election'\nconst flag = true\nconst x = 1000\n```\n\n### Function Naming\n\n```typescript\n\u002F\u002F PASS: GOOD: Verb-noun pattern\nasync function fetchMarketData(marketId: string) { }\nfunction calculateSimilarity(a: number[], b: number[]) { }\nfunction isValidEmail(email: string): boolean { }\n\n\u002F\u002F FAIL: 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 PASS: ALWAYS use spread operator\nconst updatedUser = {\n  ...user,\n  name: 'New Name'\n}\n\nconst updatedArray = [...items, newItem]\n\n\u002F\u002F FAIL: 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 PASS: 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 FAIL: 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 PASS: GOOD: Parallel execution when possible\nconst [users, markets, stats] = await Promise.all([\n  fetchUsers(),\n  fetchMarkets(),\n  fetchStats()\n])\n\n\u002F\u002F FAIL: 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 PASS: 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 FAIL: 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 PASS: 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 FAIL: 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 PASS: 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 PASS: 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 FAIL: 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 PASS: GOOD: Clear conditional rendering\n{isLoading && \u003CSpinner \u002F>}\n{error && \u003CErrorMessage error={error} \u002F>}\n{data && \u003CDataDisplay data={data} \u002F>}\n\n\u002F\u002F FAIL: 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 PASS: 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 PASS: 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 PASS: 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 FAIL: 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 PASS: GOOD: Memoize expensive computations\n\u002F\u002F Copy before sorting - Array.prototype.sort mutates in place\nconst sortedMarkets = useMemo(() => {\n  return [...markets].sort((a, b) => b.volume - a.volume)\n}, [markets])\n\n\u002F\u002F PASS: 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 PASS: 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 PASS: GOOD: Select only needed columns\nconst { data } = await supabase\n  .from('markets')\n  .select('id, name, status')\n  .limit(10)\n\n\u002F\u002F FAIL: 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 PASS: 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 FAIL: 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 FAIL: BAD: Function > 50 lines\nfunction processMarketData() {\n  \u002F\u002F 100 lines of code\n}\n\n\u002F\u002F PASS: 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 FAIL: 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 PASS: 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 FAIL: BAD: Unexplained numbers\nif (retryCount > 3) { }\nsetTimeout(callback, 500)\n\n\u002F\u002F PASS: 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",{"name":5,"description":7},"master","2c685f738254579a4ff65716e9057ad3ca3297a1",".agents\u002Fskills\u002Fcoding-standards",6,"https:\u002F\u002Fgithub.com\u002Fkupzed\u002Fcatatz","https:\u002F\u002Fcatatz.kupzed.tech","https:\u002F\u002Fgithub.com\u002Fkupzed","https:\u002F\u002Fkupzed.tech","🌆","2026-10-31 15:31:25",{"source":8,"skillName":5,"commands":68,"prompt":78,"zipAvailable":79},[69,72,75],{"tool":70,"command":71},"npx","npx skills add kupzed\u002Fcatatz --skill coding-standards",{"tool":73,"command":74},"bunx","bunx skills add kupzed\u002Fcatatz --skill coding-standards",{"tool":76,"command":77},"pnpm","pnpm dlx skills add kupzed\u002Fcatatz --skill coding-standards","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fkupzed\u002Fcatatz\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fcoding-standards\u002FSKILL.md",true,[81],{"path":82,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":85,"sourceHtmlUrl":86},"agents\u002Fopenai.yaml","REFERENCE","参考文档",270,"https:\u002F\u002Fgithub.com\u002Fkupzed\u002Fcatatz\u002Fblob\u002Fmaster\u002F.agents\u002Fskills\u002Fcoding-standards\u002Fagents\u002Fopenai.yaml",[88,106,123,140,158,175],{"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":52},"01M71S242VD0GHH7KEK4V9WKAE","verification-loop","Run CatatZ build, type, lint, test, security, and diff verification before completion.","https:\u002F\u002Fgithub.com\u002Fkupzed\u002Fcatatz\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fverification-loop\u002FSKILL.md",[],[95,96,97,98,99,100,101,102,103,104,105],"verification loop","verification","loop","lint","type","test","diff","build","run","verification before completion","security",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":52},"01M71S21V0QQZR8W5HCKFQBNQT","tdd-workflow","Use test-first development for new features, bug fixes, and refactors.","https:\u002F\u002Fgithub.com\u002Fkupzed\u002Fcatatz\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Ftdd-workflow\u002FSKILL.md",[],[113,114,115,116,100,117,118,119,39,120,121,122,46],"workflow","tdd workflow","tdd","test-first","first","development","fixes","features","bug","new",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":52},"01M71S20D9FY212BP9ZG6F83MZ","supabase","Use for CatatZ tasks involving Supabase database, auth, SSR, RLS, storage, migrations, CLI, or client libraries.","https:\u002F\u002Fgithub.com\u002Fkupzed\u002Fcatatz\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fsupabase\u002FSKILL.md",[],[125,130,46,131,132,133,134,135,39,136,137,138,139],"rls","tasks","client","ssr","storage","database","auth","libraries","cli","migrations",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":146,"publishedAt":52},"01M71S1Y9QNVQSK11YC7DVH90Q","supabase-postgres-best-practices","Use for PostgreSQL performance, query, schema, RLS, and database configuration reviews.","https:\u002F\u002Fgithub.com\u002Fkupzed\u002Fcatatz\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fsupabase-postgres-best-practices\u002FSKILL.md",[],[147,148,149,150,125,151,152,153,39,154,155,46,135,156,157,130],"best practices","supabase postgres best practices","postgres","supabase postgres","postgres best practices","postgresql","reviews","performance","schema","configuration","query",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":164,"publishedAt":52},"01M71S1WY8GM1Y8Y86M2D8CJBY","strategic-compact","Use manual context compaction at logical boundaries in long multi-phase tasks.","https:\u002F\u002Fgithub.com\u002Fkupzed\u002Fcatatz\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fstrategic-compact\u002FSKILL.md",[],[165,166,167,168,169,170,171,172,46,131,173,174],"compact","strategic","strategic compact","context","multi","at","manual","long","phase","compaction",{"skillNo":176,"name":177,"nameZh":6,"description":178,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":179,"categories":180,"keywords":181,"publishedAt":52},"01M71S1VMJVRE4W5QG5EVDCXWK","security-review","Use for authentication, input, secrets, endpoints, uploads, and sensitive financial-data changes.","https:\u002F\u002Fgithub.com\u002Fkupzed\u002Fcatatz\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fsecurity-review\u002FSKILL.md",[],[105,51,182,183,184,39,185,186,187,188,46,189],"security review","changes","endpoints","authentication","secrets","data","input","uploads"]