Agent skill · software engineering · aiskillstore
coding-standards
React 19 and TypeScript coding standards for Portfolio Buddy 2. Use when: writing new components, reviewing code, refactoring, or ensuring consistency. Contains component patterns, TypeScript rules, and best practices.
Why this skill is useful
Provides specific React 19 and TypeScript coding standards that ensure consistency and best practices not commonly found in generic resources.
What it needs
About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Coding Standards - Portfolio Buddy 2 React 19 Patterns Component Structure Hooks Rules 1. Only at top level - No hooks in conditionals or loops 2. Custom hooks start with use - useMetrics, usePortfolio, useSorting 3. Dependencies array complete - All deps in useEffect/useMemo/useCallback 4. Cleanup on unmount - Return cleanup function from useEffect State Management Portfolio Buddy 2 uses PLAIN REACT HOOKS ONLY: Local UI state → useState Derived state → useMemo Stable callbacks → useCallback DOM/value refs → useRef NO global state libraries: ❌ No TanStack Query ❌ No Zustand ❌ No Redux ❌ No Jotai Pattern: Props down, custom hooks for shared logic TypeScript Standards No any Types Current Violations (Tech Debt): usePortfolio.ts: 11 instances (trade/metrics types) useMetrics.ts: 4 instances (sort comparisons) dataUtils.ts: 1 instance (Metrics interface) Total: 15 violations to fix (originally 16) Strict Null Checks Type Inference When Obvious Component Size Limits Max 200 Lines Per Component When component exceeds 200 lines: 1. Extract sub-components 2. Move logic to custom hooks 3. Extract utilities to utils/ Current Violations ⚠️ MUST REFACTOR: PortfolioSection.tsx: 591 lines (295% of limit) Extract EquityChartSection Extract PortfolioStats Extract ContractControls Keep only orchestration logic Should refactor: App.tsx: 351 lines (175% of limit) Extract sections into components MetricsTable.tsx: 242 lines (121% of limit) Improved from 350 lines, still over limit Refactoring Example File Organization Actual Directory Structure Note: No ui/ or charts/ subdirectories - components are flat in components/ Naming Conventions Components: PascalCase - MetricsTable.tsx, CorrelationHeatmap.tsx Hooks: camelCase with use prefix - useMetrics.ts, useSorting.ts Utils: camelCase - calculateMetrics(), parseCSV() Types/Interfaces: PascalCase - interface Metric, type Trade Error Handling Always Handle Errors Use Try-Catch for Parsing Error Boundaries Current Status: No error boundaries …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/coding-standards