[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-93555f49-e97e-4ad2-8b61-ad631c626cf7":3,"$fSipNncoCkpWup5loygnZg4AOCP_6e3EAgTATuipydI8":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"93555f49-e97e-4ad2-8b61-ad631c626cf7","cc-skill-coding-standards","通用编码标准、最佳实践和模式，适用于TypeScript、JavaScript、React和Node.js开发。","cat_coding_frontend","mod_coding","sickn33,coding","---\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\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,235,1885,"2026-05-16 13:10:12",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"7f7fa805-4d34-4429-90e7-d1072c94f5b7","1.0.0","cc-skill-coding-standards.zip",4677,"uploads\u002Fskills\u002F93555f49-e97e-4ad2-8b61-ad631c626cf7\u002Fcc-skill-coding-standards.zip","5f44674d5714ff52aeeb93ad81861932a102a1ffc660a7f4e4d5577f6af7bd02","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":11888}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]