[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7APCEJSECBDX0VF6G7BNPFW":3,"skill-same:01M7APCEJSECBDX0VF6G7BNPFW":49},{"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":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":26,"commitSha":27,"skillDirectory":28,"forksCount":29,"repositoryHtmlUrl":30,"repositoryHomepageUrl":6,"ownerHtmlUrl":31,"ownerBlogUrl":32,"ownerDescription":33,"updatedAt":34,"install":35,"resources":48},"01M7APCEJSECBDX0VF6G7BNPFW","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. Use when reviewing code quality or naming with no framework-specific skill that applies.","Cyrilthetecchieee\u002Fcyril-code-","Cyrilthetecchieee","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F219787998?v=4","01M7AF0MMMKRAA0H61XMJPV92H","Julian Cyril D ","01M7AF0MQ10AVG6QJQ1C2BC0F5",2,"MIT","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fskills\u002Fcoding-standards\u002FSKILL.md",[],[],"2026-11-15 14:19:17",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. Use when reviewing code quality or naming with no framework-specific skill that applies.\nmetadata:\n  origin: ECC\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.issues\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.issues\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,"metadata":24,"description":7},{"origin":25},"ECC","main","57e7aa6b6e03bce1a7d7862ba9c2ec312f7f19b5","src\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fskills\u002Fcoding-standards",0,"https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee","https:\u002F\u002Fwithcyril.me\u002F","Hi, I’m Julian Cyril D, a Computer Science and Business Systems student at PSNACET.\r\nI’m passionate about full-stack development, UI\u002FUX design, and building sma","2026-11-04 23:28:50",{"source":8,"skillName":5,"commands":36,"prompt":46,"zipAvailable":47},[37,40,43],{"tool":38,"command":39},"npx","npx skills add Cyrilthetecchieee\u002Fcyril-code- --skill coding-standards",{"tool":41,"command":42},"bunx","bunx skills add Cyrilthetecchieee\u002Fcyril-code- --skill coding-standards",{"tool":44,"command":45},"pnpm","pnpm dlx skills add Cyrilthetecchieee\u002Fcyril-code- --skill coding-standards","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fskills\u002Fcoding-standards\u002FSKILL.md",true,[],[50,59,66,74,81,88],{"skillNo":51,"name":52,"nameZh":6,"description":53,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":54,"licenseFileUrl":55,"sourceHtmlUrl":56,"categories":57,"keywords":58,"publishedAt":19},"01M7AQV6CYX8RMC78420V9WZ62","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fwebapp-testing\u002FSKILL.md",[],[],{"skillNo":60,"name":61,"nameZh":6,"description":62,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":65,"publishedAt":19},"01M7AQV2895N3S1MEX6K76G6G2","youtube-downloader","Download YouTube videos with customizable quality and format options. Use this skill when the user asks to download, save, or grab YouTube videos. Supports various quality settings (best, 1080p, 720p, 480p, 360p), multiple formats (mp4, webm, mkv), and audio-only downloads as MP3.","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fvideo-downloader\u002FSKILL.md",[],[],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":54,"licenseFileUrl":70,"sourceHtmlUrl":71,"categories":72,"keywords":73,"publishedAt":19},"01M7AQTRNX62DNKVZ5GXEHRBKB","theme-factory","Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors\u002Ffonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftheme-factory\u002FSKILL.md",[],[],{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":80,"publishedAt":19},"01M7AQTNNVHAAN9H6DA8T6ZVE0","template-skill","Replace with description of the skill and when Claude should use it.","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftemplate-skill\u002FSKILL.md",[],[],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":19},"01M7AQTJ3MQ6AKX152MEX2MYCC","tailored-resume-generator","Analyzes job descriptions and generates tailored resumes that highlight relevant experience, skills, and achievements to maximize interview chances","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Ftailored-resume-generator\u002FSKILL.md",[],[],{"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":54,"licenseFileUrl":92,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":19},"01M7AQTD7D5MYET2YWG7HG9WM3","slack-gif-creator","Toolkit for creating animated GIFs optimized for Slack, with validators for size constraints and composable animation primitives. This skill applies when users request animated GIFs or emoji animations for Slack from descriptions like \"make me a GIF for Slack of X doing Y\".","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FCyrilthetecchieee\u002Fcyril-code-\u002Fblob\u002Fmain\u002Fsrc\u002Fcyril_code\u002Fassets\u002F.skills_repo\u002Fslack-gif-creator\u002FSKILL.md",[],[]]