[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6J2J7HPZWMK1C2HDT1H4TC7":3,"skill-same:01M6J2J7HPZWMK1C2HDT1H4TC7":79},{"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":26,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":55,"ownerHtmlUrl":56,"ownerBlogUrl":6,"ownerDescription":57,"updatedAt":58,"install":59,"resources":72},"01M6J2J7HPZWMK1C2HDT1H4TC7","frontend-patterns",null,"Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.","onfire7777\u002Funiversal-ai-skills-library","onfire7777","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F240866566?v=4","01M6HZJCF2QEW8DY7HE1JDKGK2","Jake B","01M6HZJCKK8SEXKN76V9SGKZ12",17,"MIT","https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-patterns\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"patterns","frontend patterns","frontend","Next.js","for","next","frontend development","management","performance optimization","js","Optimization","ui","state","best practices","state management","development","react","performance","2026-11-10 10:12:30",false,"---\nname: frontend-patterns\ndescription: Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.\n---\n\n# Frontend Development Patterns\n\nModern frontend patterns for React, Next.js, and performant user interfaces.\n\n## When to Activate\n\n- Building React components (composition, props, rendering)\n- Managing state (useState, useReducer, Zustand, Context)\n- Implementing data fetching (SWR, React Query, server components)\n- Optimizing performance (memoization, virtualization, code splitting)\n- Working with forms (validation, controlled inputs, Zod schemas)\n- Handling client-side routing and navigation\n- Building accessible, responsive UI patterns\n\n## Privacy and Data Boundaries\n\nFrontend examples should use synthetic or domain-generic data. Do not collect, log, persist, or display credentials, access tokens, SSNs, health data, payment details, private emails, phone numbers, or other sensitive personal data unless the user explicitly requests a scoped implementation with appropriate validation, redaction, and access controls.\n\nAvoid adding analytics, tracking pixels, third-party scripts, or external data sinks without explicit approval. When handling user data, prefer least-privilege APIs, client-side redaction before logging, and server-side validation for every boundary.\n\n## Component Patterns\n\n### Composition Over Inheritance\n\n```typescript\n\u002F\u002F PASS: GOOD: Component composition\ninterface CardProps {\n  children: React.ReactNode\n  variant?: 'default' | 'outlined'\n}\n\nexport function Card({ children, variant = 'default' }: CardProps) {\n  return \u003Cdiv className={`card card-${variant}`}>{children}\u003C\u002Fdiv>\n}\n\nexport function CardHeader({ children }: { children: React.ReactNode }) {\n  return \u003Cdiv className=\"card-header\">{children}\u003C\u002Fdiv>\n}\n\nexport function CardBody({ children }: { children: React.ReactNode }) {\n  return \u003Cdiv className=\"card-body\">{children}\u003C\u002Fdiv>\n}\n\n\u002F\u002F Usage\n\u003CCard>\n  \u003CCardHeader>Title\u003C\u002FCardHeader>\n  \u003CCardBody>Content\u003C\u002FCardBody>\n\u003C\u002FCard>\n```\n\n### Compound Components\n\n```typescript\ninterface TabsContextValue {\n  activeTab: string\n  setActiveTab: (tab: string) => void\n}\n\nconst TabsContext = createContext\u003CTabsContextValue | undefined>(undefined)\n\nexport function Tabs({ children, defaultTab }: {\n  children: React.ReactNode\n  defaultTab: string\n}) {\n  const [activeTab, setActiveTab] = useState(defaultTab)\n\n  return (\n    \u003CTabsContext.Provider value={{ activeTab, setActiveTab }}>\n      {children}\n    \u003C\u002FTabsContext.Provider>\n  )\n}\n\nexport function TabList({ children }: { children: React.ReactNode }) {\n  return \u003Cdiv className=\"tab-list\">{children}\u003C\u002Fdiv>\n}\n\nexport function Tab({ id, children }: { id: string, children: React.ReactNode }) {\n  const context = useContext(TabsContext)\n  if (!context) throw new Error('Tab must be used within Tabs')\n\n  return (\n    \u003Cbutton\n      className={context.activeTab === id ? 'active' : ''}\n      onClick={() => context.setActiveTab(id)}\n    >\n      {children}\n    \u003C\u002Fbutton>\n  )\n}\n\n\u002F\u002F Usage\n\u003CTabs defaultTab=\"overview\">\n  \u003CTabList>\n    \u003CTab id=\"overview\">Overview\u003C\u002FTab>\n    \u003CTab id=\"details\">Details\u003C\u002FTab>\n  \u003C\u002FTabList>\n\u003C\u002FTabs>\n```\n\n### Render Props Pattern\n\n```typescript\ninterface DataLoaderProps\u003CT> {\n  url: string\n  children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode\n}\n\nexport function DataLoader\u003CT>({ url, children }: DataLoaderProps\u003CT>) {\n  const [data, setData] = useState\u003CT | null>(null)\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState\u003CError | null>(null)\n\n  useEffect(() => {\n    fetch(url)\n      .then(res => res.json())\n      .then(setData)\n      .catch(setError)\n      .finally(() => setLoading(false))\n  }, [url])\n\n  return \u003C>{children(data, loading, error)}\u003C\u002F>\n}\n\n\u002F\u002F Usage\n\u003CDataLoader\u003CMarket[]> url=\"\u002Fapi\u002Fmarkets\">\n  {(markets, loading, error) => {\n    if (loading) return \u003CSpinner \u002F>\n    if (error) return \u003CError error={error} \u002F>\n    return \u003CMarketList markets={markets!} \u002F>\n  }}\n\u003C\u002FDataLoader>\n```\n\n## Custom Hooks Patterns\n\n### State Management Hook\n\n```typescript\nexport function useToggle(initialValue = false): [boolean, () => void] {\n  const [value, setValue] = useState(initialValue)\n\n  const toggle = useCallback(() => {\n    setValue(v => !v)\n  }, [])\n\n  return [value, toggle]\n}\n\n\u002F\u002F Usage\nconst [isOpen, toggleOpen] = useToggle()\n```\n\n### Async Data Fetching Hook\n\n```typescript\ninterface UseQueryOptions\u003CT> {\n  onSuccess?: (data: T) => void\n  onError?: (error: Error) => void\n  enabled?: boolean\n}\n\nexport function useQuery\u003CT>(\n  key: string,\n  fetcher: () => Promise\u003CT>,\n  options?: UseQueryOptions\u003CT>\n) {\n  const [data, setData] = useState\u003CT | null>(null)\n  const [error, setError] = useState\u003CError | null>(null)\n  const [loading, setLoading] = useState(false)\n\n  const refetch = useCallback(async () => {\n    setLoading(true)\n    setError(null)\n\n    try {\n      const result = await fetcher()\n      setData(result)\n      options?.onSuccess?.(result)\n    } catch (err) {\n      const error = err as Error\n      setError(error)\n      options?.onError?.(error)\n    } finally {\n      setLoading(false)\n    }\n  }, [fetcher, options])\n\n  useEffect(() => {\n    if (options?.enabled !== false) {\n      refetch()\n    }\n  }, [key, refetch, options?.enabled])\n\n  return { data, error, loading, refetch }\n}\n\n\u002F\u002F Usage\nconst { data: markets, loading, error, refetch } = useQuery(\n  'markets',\n  () => fetch('\u002Fapi\u002Fmarkets').then(r => r.json()),\n  {\n    onSuccess: data => console.log('Fetched', data.length, 'markets'),\n    onError: err => console.error('Failed:', err)\n  }\n)\n```\n\n### Debounce Hook\n\n```typescript\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 [searchQuery, setSearchQuery] = useState('')\nconst debouncedQuery = useDebounce(searchQuery, 500)\n\nuseEffect(() => {\n  if (debouncedQuery) {\n    performSearch(debouncedQuery)\n  }\n}, [debouncedQuery])\n```\n\n## State Management Patterns\n\n### Context + Reducer Pattern\n\n```typescript\ninterface State {\n  markets: Market[]\n  selectedMarket: Market | null\n  loading: boolean\n}\n\ntype Action =\n  | { type: 'SET_MARKETS'; payload: Market[] }\n  | { type: 'SELECT_MARKET'; payload: Market }\n  | { type: 'SET_LOADING'; payload: boolean }\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'SET_MARKETS':\n      return { ...state, markets: action.payload }\n    case 'SELECT_MARKET':\n      return { ...state, selectedMarket: action.payload }\n    case 'SET_LOADING':\n      return { ...state, loading: action.payload }\n    default:\n      return state\n  }\n}\n\nconst MarketContext = createContext\u003C{\n  state: State\n  dispatch: Dispatch\u003CAction>\n} | undefined>(undefined)\n\nexport function MarketProvider({ children }: { children: React.ReactNode }) {\n  const [state, dispatch] = useReducer(reducer, {\n    markets: [],\n    selectedMarket: null,\n    loading: false\n  })\n\n  return (\n    \u003CMarketContext.Provider value={{ state, dispatch }}>\n      {children}\n    \u003C\u002FMarketContext.Provider>\n  )\n}\n\nexport function useMarkets() {\n  const context = useContext(MarketContext)\n  if (!context) throw new Error('useMarkets must be used within MarketProvider')\n  return context\n}\n```\n\n## Performance Optimization\n\n### Memoization\n\n```typescript\n\u002F\u002F PASS: useMemo for expensive computations\nconst sortedMarkets = useMemo(() => {\n  return markets.sort((a, b) => b.volume - a.volume)\n}, [markets])\n\n\u002F\u002F PASS: useCallback for functions passed to children\nconst handleSearch = useCallback((query: string) => {\n  setSearchQuery(query)\n}, [])\n\n\u002F\u002F PASS: React.memo for pure components\nexport const MarketCard = React.memo\u003CMarketCardProps>(({ market }) => {\n  return (\n    \u003Cdiv className=\"market-card\">\n      \u003Ch3>{market.name}\u003C\u002Fh3>\n      \u003Cp>{market.description}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  )\n})\n```\n\n### Code Splitting & Lazy Loading\n\n```typescript\nimport { lazy, Suspense } from 'react'\n\n\u002F\u002F PASS: Lazy load heavy components\nconst HeavyChart = lazy(() => import('.\u002FHeavyChart'))\nconst ThreeJsBackground = lazy(() => import('.\u002FThreeJsBackground'))\n\nexport function Dashboard() {\n  return (\n    \u003Cdiv>\n      \u003CSuspense fallback={\u003CChartSkeleton \u002F>}>\n        \u003CHeavyChart data={data} \u002F>\n      \u003C\u002FSuspense>\n\n      \u003CSuspense fallback={null}>\n        \u003CThreeJsBackground \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Virtualization for Long Lists\n\n```typescript\nimport { useVirtualizer } from '@tanstack\u002Freact-virtual'\n\nexport function VirtualMarketList({ markets }: { markets: Market[] }) {\n  const parentRef = useRef\u003CHTMLDivElement>(null)\n\n  const virtualizer = useVirtualizer({\n    count: markets.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => 100,  \u002F\u002F Estimated row height\n    overscan: 5  \u002F\u002F Extra items to render\n  })\n\n  return (\n    \u003Cdiv ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>\n      \u003Cdiv\n        style={{\n          height: `${virtualizer.getTotalSize()}px`,\n          position: 'relative'\n        }}\n      >\n        {virtualizer.getVirtualItems().map(virtualRow => (\n          \u003Cdiv\n            key={virtualRow.index}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              width: '100%',\n              height: `${virtualRow.size}px`,\n              transform: `translateY(${virtualRow.start}px)`\n            }}\n          >\n            \u003CMarketCard market={markets[virtualRow.index]} \u002F>\n          \u003C\u002Fdiv>\n        ))}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n## Form Handling Patterns\n\n### Controlled Form with Validation\n\n```typescript\ninterface FormData {\n  name: string\n  description: string\n  endDate: string\n}\n\ninterface FormErrors {\n  name?: string\n  description?: string\n  endDate?: string\n}\n\nexport function CreateMarketForm() {\n  const [formData, setFormData] = useState\u003CFormData>({\n    name: '',\n    description: '',\n    endDate: ''\n  })\n\n  const [errors, setErrors] = useState\u003CFormErrors>({})\n\n  const validate = (): boolean => {\n    const newErrors: FormErrors = {}\n\n    if (!formData.name.trim()) {\n      newErrors.name = 'Name is required'\n    } else if (formData.name.length > 200) {\n      newErrors.name = 'Name must be under 200 characters'\n    }\n\n    if (!formData.description.trim()) {\n      newErrors.description = 'Description is required'\n    }\n\n    if (!formData.endDate) {\n      newErrors.endDate = 'End date is required'\n    }\n\n    setErrors(newErrors)\n    return Object.keys(newErrors).length === 0\n  }\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault()\n\n    if (!validate()) return\n\n    try {\n      await createMarket(formData)\n      \u002F\u002F Success handling\n    } catch (error) {\n      \u002F\u002F Error handling\n    }\n  }\n\n  return (\n    \u003Cform onSubmit={handleSubmit}>\n      \u003Cinput\n        value={formData.name}\n        onChange={e => setFormData(prev => ({ ...prev, name: e.target.value }))}\n        placeholder=\"Market name\"\n      \u002F>\n      {errors.name && \u003Cspan className=\"error\">{errors.name}\u003C\u002Fspan>}\n\n      {\u002F* Other fields *\u002F}\n\n      \u003Cbutton type=\"submit\">Create Market\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  )\n}\n```\n\n## Error Boundary Pattern\n\n```typescript\ninterface ErrorBoundaryState {\n  hasError: boolean\n  error: Error | null\n}\n\nexport class ErrorBoundary extends React.Component\u003C\n  { children: React.ReactNode },\n  ErrorBoundaryState\n> {\n  state: ErrorBoundaryState = {\n    hasError: false,\n    error: null\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { hasError: true, error }\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('Error boundary caught:', error, errorInfo)\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return (\n        \u003Cdiv className=\"error-fallback\">\n          \u003Ch2>Something went wrong\u003C\u002Fh2>\n          \u003Cp>{this.state.error?.message}\u003C\u002Fp>\n          \u003Cbutton onClick={() => this.setState({ hasError: false })}>\n            Try again\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      )\n    }\n\n    return this.props.children\n  }\n}\n\n\u002F\u002F Usage\n\u003CErrorBoundary>\n  \u003CApp \u002F>\n\u003C\u002FErrorBoundary>\n```\n\n## Animation Patterns\n\n### Framer Motion Animations\n\n```typescript\nimport { motion, AnimatePresence } from 'framer-motion'\n\n\u002F\u002F PASS: List animations\nexport function AnimatedMarketList({ markets }: { markets: Market[] }) {\n  return (\n    \u003CAnimatePresence>\n      {markets.map(market => (\n        \u003Cmotion.div\n          key={market.id}\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -20 }}\n          transition={{ duration: 0.3 }}\n        >\n          \u003CMarketCard market={market} \u002F>\n        \u003C\u002Fmotion.div>\n      ))}\n    \u003C\u002FAnimatePresence>\n  )\n}\n\n\u002F\u002F PASS: Modal animations\nexport function Modal({ isOpen, onClose, children }: ModalProps) {\n  return (\n    \u003CAnimatePresence>\n      {isOpen && (\n        \u003C>\n          \u003Cmotion.div\n            className=\"modal-overlay\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={onClose}\n          \u002F>\n          \u003Cmotion.div\n            className=\"modal-content\"\n            initial={{ opacity: 0, scale: 0.9, y: 20 }}\n            animate={{ opacity: 1, scale: 1, y: 0 }}\n            exit={{ opacity: 0, scale: 0.9, y: 20 }}\n          >\n            {children}\n          \u003C\u002Fmotion.div>\n        \u003C\u002F>\n      )}\n    \u003C\u002FAnimatePresence>\n  )\n}\n```\n\n## Accessibility Patterns\n\n### Keyboard Navigation\n\n```typescript\nexport function Dropdown({ options, onSelect }: DropdownProps) {\n  const [isOpen, setIsOpen] = useState(false)\n  const [activeIndex, setActiveIndex] = useState(0)\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault()\n        setActiveIndex(i => Math.min(i + 1, options.length - 1))\n        break\n      case 'ArrowUp':\n        e.preventDefault()\n        setActiveIndex(i => Math.max(i - 1, 0))\n        break\n      case 'Enter':\n        e.preventDefault()\n        onSelect(options[activeIndex])\n        setIsOpen(false)\n        break\n      case 'Escape':\n        setIsOpen(false)\n        break\n    }\n  }\n\n  return (\n    \u003Cdiv\n      role=\"combobox\"\n      aria-expanded={isOpen}\n      aria-haspopup=\"listbox\"\n      onKeyDown={handleKeyDown}\n    >\n      {\u002F* Dropdown implementation *\u002F}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Focus Management\n\n```typescript\nexport function Modal({ isOpen, onClose, children }: ModalProps) {\n  const modalRef = useRef\u003CHTMLDivElement>(null)\n  const previousFocusRef = useRef\u003CHTMLElement | null>(null)\n\n  useEffect(() => {\n    if (isOpen) {\n      \u002F\u002F Save currently focused element\n      previousFocusRef.current = document.activeElement as HTMLElement\n\n      \u002F\u002F Focus modal\n      modalRef.current?.focus()\n    } else {\n      \u002F\u002F Restore focus when closing\n      previousFocusRef.current?.focus()\n    }\n  }, [isOpen])\n\n  return isOpen ? (\n    \u003Cdiv\n      ref={modalRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      tabIndex={-1}\n      onKeyDown={e => e.key === 'Escape' && onClose()}\n    >\n      {children}\n    \u003C\u002Fdiv>\n  ) : null\n}\n```\n\n**Remember**: Modern frontend patterns enable maintainable, performant user interfaces. Choose patterns that fit your project complexity.\n","# Frontend Development Patterns\n\nModern frontend patterns for React, Next.js, and performant user interfaces.\n\n## When to Activate\n\n- Building React components (composition, props, rendering)\n- Managing state (useState, useReducer, Zustand, Context)\n- Implementing data fetching (SWR, React Query, server components)\n- Optimizing performance (memoization, virtualization, code splitting)\n- Working with forms (validation, controlled inputs, Zod schemas)\n- Handling client-side routing and navigation\n- Building accessible, responsive UI patterns\n\n## Privacy and Data Boundaries\n\nFrontend examples should use synthetic or domain-generic data. Do not collect, log, persist, or display credentials, access tokens, SSNs, health data, payment details, private emails, phone numbers, or other sensitive personal data unless the user explicitly requests a scoped implementation with appropriate validation, redaction, and access controls.\n\nAvoid adding analytics, tracking pixels, third-party scripts, or external data sinks without explicit approval. When handling user data, prefer least-privilege APIs, client-side redaction before logging, and server-side validation for every boundary.\n\n## Component Patterns\n\n### Composition Over Inheritance\n\n```typescript\n\u002F\u002F PASS: GOOD: Component composition\ninterface CardProps {\n  children: React.ReactNode\n  variant?: 'default' | 'outlined'\n}\n\nexport function Card({ children, variant = 'default' }: CardProps) {\n  return \u003Cdiv className={`card card-${variant}`}>{children}\u003C\u002Fdiv>\n}\n\nexport function CardHeader({ children }: { children: React.ReactNode }) {\n  return \u003Cdiv className=\"card-header\">{children}\u003C\u002Fdiv>\n}\n\nexport function CardBody({ children }: { children: React.ReactNode }) {\n  return \u003Cdiv className=\"card-body\">{children}\u003C\u002Fdiv>\n}\n\n\u002F\u002F Usage\n\u003CCard>\n  \u003CCardHeader>Title\u003C\u002FCardHeader>\n  \u003CCardBody>Content\u003C\u002FCardBody>\n\u003C\u002FCard>\n```\n\n### Compound Components\n\n```typescript\ninterface TabsContextValue {\n  activeTab: string\n  setActiveTab: (tab: string) => void\n}\n\nconst TabsContext = createContext\u003CTabsContextValue | undefined>(undefined)\n\nexport function Tabs({ children, defaultTab }: {\n  children: React.ReactNode\n  defaultTab: string\n}) {\n  const [activeTab, setActiveTab] = useState(defaultTab)\n\n  return (\n    \u003CTabsContext.Provider value={{ activeTab, setActiveTab }}>\n      {children}\n    \u003C\u002FTabsContext.Provider>\n  )\n}\n\nexport function TabList({ children }: { children: React.ReactNode }) {\n  return \u003Cdiv className=\"tab-list\">{children}\u003C\u002Fdiv>\n}\n\nexport function Tab({ id, children }: { id: string, children: React.ReactNode }) {\n  const context = useContext(TabsContext)\n  if (!context) throw new Error('Tab must be used within Tabs')\n\n  return (\n    \u003Cbutton\n      className={context.activeTab === id ? 'active' : ''}\n      onClick={() => context.setActiveTab(id)}\n    >\n      {children}\n    \u003C\u002Fbutton>\n  )\n}\n\n\u002F\u002F Usage\n\u003CTabs defaultTab=\"overview\">\n  \u003CTabList>\n    \u003CTab id=\"overview\">Overview\u003C\u002FTab>\n    \u003CTab id=\"details\">Details\u003C\u002FTab>\n  \u003C\u002FTabList>\n\u003C\u002FTabs>\n```\n\n### Render Props Pattern\n\n```typescript\ninterface DataLoaderProps\u003CT> {\n  url: string\n  children: (data: T | null, loading: boolean, error: Error | null) => React.ReactNode\n}\n\nexport function DataLoader\u003CT>({ url, children }: DataLoaderProps\u003CT>) {\n  const [data, setData] = useState\u003CT | null>(null)\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState\u003CError | null>(null)\n\n  useEffect(() => {\n    fetch(url)\n      .then(res => res.json())\n      .then(setData)\n      .catch(setError)\n      .finally(() => setLoading(false))\n  }, [url])\n\n  return \u003C>{children(data, loading, error)}\u003C\u002F>\n}\n\n\u002F\u002F Usage\n\u003CDataLoader\u003CMarket[]> url=\"\u002Fapi\u002Fmarkets\">\n  {(markets, loading, error) => {\n    if (loading) return \u003CSpinner \u002F>\n    if (error) return \u003CError error={error} \u002F>\n    return \u003CMarketList markets={markets!} \u002F>\n  }}\n\u003C\u002FDataLoader>\n```\n\n## Custom Hooks Patterns\n\n### State Management Hook\n\n```typescript\nexport function useToggle(initialValue = false): [boolean, () => void] {\n  const [value, setValue] = useState(initialValue)\n\n  const toggle = useCallback(() => {\n    setValue(v => !v)\n  }, [])\n\n  return [value, toggle]\n}\n\n\u002F\u002F Usage\nconst [isOpen, toggleOpen] = useToggle()\n```\n\n### Async Data Fetching Hook\n\n```typescript\ninterface UseQueryOptions\u003CT> {\n  onSuccess?: (data: T) => void\n  onError?: (error: Error) => void\n  enabled?: boolean\n}\n\nexport function useQuery\u003CT>(\n  key: string,\n  fetcher: () => Promise\u003CT>,\n  options?: UseQueryOptions\u003CT>\n) {\n  const [data, setData] = useState\u003CT | null>(null)\n  const [error, setError] = useState\u003CError | null>(null)\n  const [loading, setLoading] = useState(false)\n\n  const refetch = useCallback(async () => {\n    setLoading(true)\n    setError(null)\n\n    try {\n      const result = await fetcher()\n      setData(result)\n      options?.onSuccess?.(result)\n    } catch (err) {\n      const error = err as Error\n      setError(error)\n      options?.onError?.(error)\n    } finally {\n      setLoading(false)\n    }\n  }, [fetcher, options])\n\n  useEffect(() => {\n    if (options?.enabled !== false) {\n      refetch()\n    }\n  }, [key, refetch, options?.enabled])\n\n  return { data, error, loading, refetch }\n}\n\n\u002F\u002F Usage\nconst { data: markets, loading, error, refetch } = useQuery(\n  'markets',\n  () => fetch('\u002Fapi\u002Fmarkets').then(r => r.json()),\n  {\n    onSuccess: data => console.log('Fetched', data.length, 'markets'),\n    onError: err => console.error('Failed:', err)\n  }\n)\n```\n\n### Debounce Hook\n\n```typescript\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 [searchQuery, setSearchQuery] = useState('')\nconst debouncedQuery = useDebounce(searchQuery, 500)\n\nuseEffect(() => {\n  if (debouncedQuery) {\n    performSearch(debouncedQuery)\n  }\n}, [debouncedQuery])\n```\n\n## State Management Patterns\n\n### Context + Reducer Pattern\n\n```typescript\ninterface State {\n  markets: Market[]\n  selectedMarket: Market | null\n  loading: boolean\n}\n\ntype Action =\n  | { type: 'SET_MARKETS'; payload: Market[] }\n  | { type: 'SELECT_MARKET'; payload: Market }\n  | { type: 'SET_LOADING'; payload: boolean }\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'SET_MARKETS':\n      return { ...state, markets: action.payload }\n    case 'SELECT_MARKET':\n      return { ...state, selectedMarket: action.payload }\n    case 'SET_LOADING':\n      return { ...state, loading: action.payload }\n    default:\n      return state\n  }\n}\n\nconst MarketContext = createContext\u003C{\n  state: State\n  dispatch: Dispatch\u003CAction>\n} | undefined>(undefined)\n\nexport function MarketProvider({ children }: { children: React.ReactNode }) {\n  const [state, dispatch] = useReducer(reducer, {\n    markets: [],\n    selectedMarket: null,\n    loading: false\n  })\n\n  return (\n    \u003CMarketContext.Provider value={{ state, dispatch }}>\n      {children}\n    \u003C\u002FMarketContext.Provider>\n  )\n}\n\nexport function useMarkets() {\n  const context = useContext(MarketContext)\n  if (!context) throw new Error('useMarkets must be used within MarketProvider')\n  return context\n}\n```\n\n## Performance Optimization\n\n### Memoization\n\n```typescript\n\u002F\u002F PASS: useMemo for expensive computations\nconst sortedMarkets = useMemo(() => {\n  return markets.sort((a, b) => b.volume - a.volume)\n}, [markets])\n\n\u002F\u002F PASS: useCallback for functions passed to children\nconst handleSearch = useCallback((query: string) => {\n  setSearchQuery(query)\n}, [])\n\n\u002F\u002F PASS: React.memo for pure components\nexport const MarketCard = React.memo\u003CMarketCardProps>(({ market }) => {\n  return (\n    \u003Cdiv className=\"market-card\">\n      \u003Ch3>{market.name}\u003C\u002Fh3>\n      \u003Cp>{market.description}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  )\n})\n```\n\n### Code Splitting & Lazy Loading\n\n```typescript\nimport { lazy, Suspense } from 'react'\n\n\u002F\u002F PASS: Lazy load heavy components\nconst HeavyChart = lazy(() => import('.\u002FHeavyChart'))\nconst ThreeJsBackground = lazy(() => import('.\u002FThreeJsBackground'))\n\nexport function Dashboard() {\n  return (\n    \u003Cdiv>\n      \u003CSuspense fallback={\u003CChartSkeleton \u002F>}>\n        \u003CHeavyChart data={data} \u002F>\n      \u003C\u002FSuspense>\n\n      \u003CSuspense fallback={null}>\n        \u003CThreeJsBackground \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Virtualization for Long Lists\n\n```typescript\nimport { useVirtualizer } from '@tanstack\u002Freact-virtual'\n\nexport function VirtualMarketList({ markets }: { markets: Market[] }) {\n  const parentRef = useRef\u003CHTMLDivElement>(null)\n\n  const virtualizer = useVirtualizer({\n    count: markets.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => 100,  \u002F\u002F Estimated row height\n    overscan: 5  \u002F\u002F Extra items to render\n  })\n\n  return (\n    \u003Cdiv ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>\n      \u003Cdiv\n        style={{\n          height: `${virtualizer.getTotalSize()}px`,\n          position: 'relative'\n        }}\n      >\n        {virtualizer.getVirtualItems().map(virtualRow => (\n          \u003Cdiv\n            key={virtualRow.index}\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              width: '100%',\n              height: `${virtualRow.size}px`,\n              transform: `translateY(${virtualRow.start}px)`\n            }}\n          >\n            \u003CMarketCard market={markets[virtualRow.index]} \u002F>\n          \u003C\u002Fdiv>\n        ))}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n## Form Handling Patterns\n\n### Controlled Form with Validation\n\n```typescript\ninterface FormData {\n  name: string\n  description: string\n  endDate: string\n}\n\ninterface FormErrors {\n  name?: string\n  description?: string\n  endDate?: string\n}\n\nexport function CreateMarketForm() {\n  const [formData, setFormData] = useState\u003CFormData>({\n    name: '',\n    description: '',\n    endDate: ''\n  })\n\n  const [errors, setErrors] = useState\u003CFormErrors>({})\n\n  const validate = (): boolean => {\n    const newErrors: FormErrors = {}\n\n    if (!formData.name.trim()) {\n      newErrors.name = 'Name is required'\n    } else if (formData.name.length > 200) {\n      newErrors.name = 'Name must be under 200 characters'\n    }\n\n    if (!formData.description.trim()) {\n      newErrors.description = 'Description is required'\n    }\n\n    if (!formData.endDate) {\n      newErrors.endDate = 'End date is required'\n    }\n\n    setErrors(newErrors)\n    return Object.keys(newErrors).length === 0\n  }\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault()\n\n    if (!validate()) return\n\n    try {\n      await createMarket(formData)\n      \u002F\u002F Success handling\n    } catch (error) {\n      \u002F\u002F Error handling\n    }\n  }\n\n  return (\n    \u003Cform onSubmit={handleSubmit}>\n      \u003Cinput\n        value={formData.name}\n        onChange={e => setFormData(prev => ({ ...prev, name: e.target.value }))}\n        placeholder=\"Market name\"\n      \u002F>\n      {errors.name && \u003Cspan className=\"error\">{errors.name}\u003C\u002Fspan>}\n\n      {\u002F* Other fields *\u002F}\n\n      \u003Cbutton type=\"submit\">Create Market\u003C\u002Fbutton>\n    \u003C\u002Fform>\n  )\n}\n```\n\n## Error Boundary Pattern\n\n```typescript\ninterface ErrorBoundaryState {\n  hasError: boolean\n  error: Error | null\n}\n\nexport class ErrorBoundary extends React.Component\u003C\n  { children: React.ReactNode },\n  ErrorBoundaryState\n> {\n  state: ErrorBoundaryState = {\n    hasError: false,\n    error: null\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { hasError: true, error }\n  }\n\n  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('Error boundary caught:', error, errorInfo)\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return (\n        \u003Cdiv className=\"error-fallback\">\n          \u003Ch2>Something went wrong\u003C\u002Fh2>\n          \u003Cp>{this.state.error?.message}\u003C\u002Fp>\n          \u003Cbutton onClick={() => this.setState({ hasError: false })}>\n            Try again\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      )\n    }\n\n    return this.props.children\n  }\n}\n\n\u002F\u002F Usage\n\u003CErrorBoundary>\n  \u003CApp \u002F>\n\u003C\u002FErrorBoundary>\n```\n\n## Animation Patterns\n\n### Framer Motion Animations\n\n```typescript\nimport { motion, AnimatePresence } from 'framer-motion'\n\n\u002F\u002F PASS: List animations\nexport function AnimatedMarketList({ markets }: { markets: Market[] }) {\n  return (\n    \u003CAnimatePresence>\n      {markets.map(market => (\n        \u003Cmotion.div\n          key={market.id}\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -20 }}\n          transition={{ duration: 0.3 }}\n        >\n          \u003CMarketCard market={market} \u002F>\n        \u003C\u002Fmotion.div>\n      ))}\n    \u003C\u002FAnimatePresence>\n  )\n}\n\n\u002F\u002F PASS: Modal animations\nexport function Modal({ isOpen, onClose, children }: ModalProps) {\n  return (\n    \u003CAnimatePresence>\n      {isOpen && (\n        \u003C>\n          \u003Cmotion.div\n            className=\"modal-overlay\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={onClose}\n          \u002F>\n          \u003Cmotion.div\n            className=\"modal-content\"\n            initial={{ opacity: 0, scale: 0.9, y: 20 }}\n            animate={{ opacity: 1, scale: 1, y: 0 }}\n            exit={{ opacity: 0, scale: 0.9, y: 20 }}\n          >\n            {children}\n          \u003C\u002Fmotion.div>\n        \u003C\u002F>\n      )}\n    \u003C\u002FAnimatePresence>\n  )\n}\n```\n\n## Accessibility Patterns\n\n### Keyboard Navigation\n\n```typescript\nexport function Dropdown({ options, onSelect }: DropdownProps) {\n  const [isOpen, setIsOpen] = useState(false)\n  const [activeIndex, setActiveIndex] = useState(0)\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault()\n        setActiveIndex(i => Math.min(i + 1, options.length - 1))\n        break\n      case 'ArrowUp':\n        e.preventDefault()\n        setActiveIndex(i => Math.max(i - 1, 0))\n        break\n      case 'Enter':\n        e.preventDefault()\n        onSelect(options[activeIndex])\n        setIsOpen(false)\n        break\n      case 'Escape':\n        setIsOpen(false)\n        break\n    }\n  }\n\n  return (\n    \u003Cdiv\n      role=\"combobox\"\n      aria-expanded={isOpen}\n      aria-haspopup=\"listbox\"\n      onKeyDown={handleKeyDown}\n    >\n      {\u002F* Dropdown implementation *\u002F}\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Focus Management\n\n```typescript\nexport function Modal({ isOpen, onClose, children }: ModalProps) {\n  const modalRef = useRef\u003CHTMLDivElement>(null)\n  const previousFocusRef = useRef\u003CHTMLElement | null>(null)\n\n  useEffect(() => {\n    if (isOpen) {\n      \u002F\u002F Save currently focused element\n      previousFocusRef.current = document.activeElement as HTMLElement\n\n      \u002F\u002F Focus modal\n      modalRef.current?.focus()\n    } else {\n      \u002F\u002F Restore focus when closing\n      previousFocusRef.current?.focus()\n    }\n  }, [isOpen])\n\n  return isOpen ? (\n    \u003Cdiv\n      ref={modalRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      tabIndex={-1}\n      onKeyDown={e => e.key === 'Escape' && onClose()}\n    >\n      {children}\n    \u003C\u002Fdiv>\n  ) : null\n}\n```\n\n**Remember**: Modern frontend patterns enable maintainable, performant user interfaces. Choose patterns that fit your project complexity.\n",{"name":5,"description":7},"main","2a76bf42ce5c860adf8d0f3fcf3f6804109ac65b","skills\u002Ffrontend-patterns",0,"https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library","https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library\u002Fwiki","https:\u002F\u002Fgithub.com\u002Fonfire7777","trying to create something actually useful","2026-09-11 13:25:26",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add onfire7777\u002Funiversal-ai-skills-library --skill frontend-patterns",{"tool":65,"command":66},"bunx","bunx skills add onfire7777\u002Funiversal-ai-skills-library --skill frontend-patterns",{"tool":68,"command":69},"pnpm","pnpm dlx skills add onfire7777\u002Funiversal-ai-skills-library --skill frontend-patterns","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-patterns\u002FSKILL.md",true,[73],{"path":74,"resourceType":75,"resourceTypeDesc":76,"sizeBytes":77,"sourceHtmlUrl":78},"agents\u002Fopenai.yaml","REFERENCE","参考文档",262,"https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library\u002Fblob\u002Fmain\u002Fskills\u002Ffrontend-patterns\u002Fagents\u002Fopenai.yaml",[80,107,116,126,147,162],{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":95,"publishedAt":45},"01M6J7MPK8ZE9VQJR4KK6ZMZJQ","zyte-api-automation","Automate Zyte API tasks via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library\u002Fblob\u002Fmain\u002Fskills\u002Fzyte-api-automation\u002FSKILL.md",[86,89,90],{"categoryNo":87,"categoryName":88,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":91,"categoryName":92,"taxonomyType":93,"taxonomyTypeDesc":94},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[96,97,98,31,99,100,101,102,103,104,105,106],"automation","api","zyte api automation","MCP","via","composio","automate","first","Tools","search","tasks",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":114,"publishedAt":45},"01M6J7MK45K2ZZ0EWTP1N6SZ7F","zylvie-automation","Automate Zylvie tasks via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library\u002Fblob\u002Fmain\u002Fskills\u002Fzylvie-automation\u002FSKILL.md",[113],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[96,115,99,106,31,100,101,102,103,104,105],"zylvie automation",{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":123,"publishedAt":45},"01M6J7MGDCVZ3YCXGEAPR5V3MS","zoominfo-automation","Automate Zoominfo tasks via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library\u002Fblob\u002Fmain\u002Fskills\u002Fzoominfo-automation\u002FSKILL.md",[122],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[124,125,96,102,101,104,100,106,31,105,99,103],"zoominfo","zoominfo automation",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":133,"publishedAt":45},"01M6J7MDK48N09B7C6H9TCPY9A","zoom-out","Tell the agent to zoom out and give broader context or a higher-level perspective. Use when you're unfamiliar with a section of code or need to understand how it fits into the bigger picture.","https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library\u002Fblob\u002Fmain\u002Fskills\u002Fzoom-out\u002FSKILL.md",[132],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[134,135,136,137,138,139,140,141,142,143,144,145,146],"zoom out","zoom","perspective","code","re","you","with","understand","it","use","context","how","true",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":154,"publishedAt":45},"01M6J7MAD47Q9A55AK3EXS914H","zoho-mail-automation","Automate Zoho Mail tasks via Rube MCP (Composio): email sending, folders, labels, and mailbox management. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library\u002Fblob\u002Fmain\u002Fskills\u002Fzoho-mail-automation\u002FSKILL.md",[153],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[155,156,157,158,96,159,105,106,99,104,160,31,100,161,101,34,102,103],"mail","zoho mail automation","zoho","zoho mail","email","labels","mailbox",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":172,"publishedAt":45},"01M6J7M76HTWPP8TRWWCDS42NB","zoho-invoice-automation","Automate Zoho Invoice tasks via Rube MCP (Composio): invoices, estimates, expenses, clients, and payment tracking. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002Fonfire7777\u002Funiversal-ai-skills-library\u002Fblob\u002Fmain\u002Fskills\u002Fzoho-invoice-automation\u002FSKILL.md",[168,169],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":170,"categoryName":171,"taxonomyType":93,"taxonomyTypeDesc":94},"01JBSEEDCAT000000000000040","财务",[173,96,157,174,99,100,31,175,176,177,101,178,179,102,103,104,105,106],"invoice","zoho invoice automation","invoices","expenses","clients","payment","tracking"]