[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6KPYXVGRD2N9RQ0YHSWN83P":3,"skill-same:01M6KPYXVGRD2N9RQ0YHSWN83P":88},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":13,"repositoryHtmlUrl":57,"repositoryHomepageUrl":6,"ownerHtmlUrl":58,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":59,"install":60,"resources":73},"01M6KPYXVGRD2N9RQ0YHSWN83P","evaluating-code-models",null,"Evaluates code generation models across HumanEval, MBPP, MultiPL-E, and 15+ benchmarks with pass@k metrics. Use when benchmarking code models, comparing coding abilities, testing multi-language support, or measuring code generation quality. Industry standard from BigCode Project used by HuggingFace leaderboards.","endman100\u002Fskill-router-nexus","endman100","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F31997019?v=4","01M6KPDX17BYDWW4RRB0TNGGMX","01M6KPDX64Y2QBEWVFG5W5PWPF",0,"MIT","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FAI-Evaluation-and-Benchmarking\u002Fbigcode-evaluation-harness\u002Fbigcode-evaluation-harness\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"code","evaluating code models","models","Code Models","BigCode","when","multipl","Accelerate","project","across","coding","Transformers","testing","Pass@k","MultiPL-E","MBPP","HumanEval","Code Generation","Evaluation","benchmarking","support","2026-11-10 10:12:30",false,"---\nname: cc-skill-frontend-patterns\ndescription: \"Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# Frontend Development Patterns\n\nModern frontend patterns for React, Next.js, and performant user interfaces.\n\n## Component Patterns\n\n### Composition Over Inheritance\n\n```typescript\n\u002F\u002F ✅ 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 ✅ useMemo for expensive computations\nconst sortedMarkets = useMemo(() => {\n  return markets.sort((a, b) => b.volume - a.volume)\n}, [markets])\n\n\u002F\u002F ✅ useCallback for functions passed to children\nconst handleSearch = useCallback((query: string) => {\n  setSearchQuery(query)\n}, [])\n\n\u002F\u002F ✅ 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 ✅ 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 ✅ 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 ✅ 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\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n","# Frontend Development Patterns\n\nModern frontend patterns for React, Next.js, and performant user interfaces.\n\n## Component Patterns\n\n### Composition Over Inheritance\n\n```typescript\n\u002F\u002F ✅ 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 ✅ useMemo for expensive computations\nconst sortedMarkets = useMemo(() => {\n  return markets.sort((a, b) => b.volume - a.volume)\n}, [markets])\n\n\u002F\u002F ✅ useCallback for functions passed to children\nconst handleSearch = useCallback((query: string) => {\n  setSearchQuery(query)\n}, [])\n\n\u002F\u002F ✅ 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 ✅ 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 ✅ 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 ✅ 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\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n",{"name":49,"risk":50,"source":51,"date_added":52,"description":53},"cc-skill-frontend-patterns","unknown","community","2026-02-27","Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.","main","aae5fa43a57641df274d23f55d90e394333c4050","AI-Evaluation-and-Benchmarking\u002Fbigcode-evaluation-harness\u002Fbigcode-evaluation-harness","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus","https:\u002F\u002Fgithub.com\u002Fendman100","2026-11-09 17:00:01",{"source":8,"skillName":49,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add endman100\u002Fskill-router-nexus --skill cc-skill-frontend-patterns",{"tool":66,"command":67},"bunx","bunx skills add endman100\u002Fskill-router-nexus --skill cc-skill-frontend-patterns",{"tool":69,"command":70},"pnpm","pnpm dlx skills add endman100\u002Fskill-router-nexus --skill cc-skill-frontend-patterns","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FAI-Evaluation-and-Benchmarking\u002Fbigcode-evaluation-harness\u002Fbigcode-evaluation-harness\u002FSKILL.md",true,[74,80,84],{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Fbenchmarks.md","REFERENCE","参考文档",9168,"https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FAI-Evaluation-and-Benchmarking\u002Fbigcode-evaluation-harness\u002Fbigcode-evaluation-harness\u002Freferences\u002Fbenchmarks.md",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"references\u002Fcustom-tasks.md",10378,"https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FAI-Evaluation-and-Benchmarking\u002Fbigcode-evaluation-harness\u002Fbigcode-evaluation-harness\u002Freferences\u002Fcustom-tasks.md",{"path":85,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":86,"sourceHtmlUrl":87},"references\u002Fissues.md",8085,"https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FAI-Evaluation-and-Benchmarking\u002Fbigcode-evaluation-harness\u002Fbigcode-evaluation-harness\u002Freferences\u002Fissues.md",[89,111,149,171,180,204],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":93,"sourceHtmlUrl":94,"categories":95,"keywords":99,"publishedAt":44},"01M6MPCT5BXVER8HQZTW3QE9AS","create-master","基于佛教经典文献，生成特定高僧大德的 AI 教学角色","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FMetaphysics-and-Spirituality\u002FMaster-skill\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FMetaphysics-and-Spirituality\u002FMaster-skill\u002FSKILL.md",[96],{"categoryNo":97,"categoryName":98,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000039","教师与教育",[100,101,102,103,104,105,106,107,108,109,110],"create master","master","create","生成","true","webfetch","edit","write","read","grep","Bash",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":115,"sourceHtmlUrl":116,"categories":117,"keywords":129,"publishedAt":44},"01M6M43AKE95Y64E1JRXEF5QQ3","writing-dna-skill","从至少 20 篇完整文章中蒸馏可复用的写作 DNA，分析语言、文章结构、选题逻辑、素材策略、认知框架和视觉风格，并生成 Writing-DNA.md；按该 DNA 写作时会读取全部蒸馏产物和 5 篇相关原文。用于中英文作者、账号、品牌或出版物的风格分析与一致性写作。 Distill reusable Writing DNA from at least 20 complete articles for Chinese or English authors, publications, brands, and accounts; use for language, structure, topic logic, source strategy, cognitive-frame, and visual-style analysis.","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fwriting-dna-skill\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fwriting-dna-skill\u002FSKILL.md",[118,123,126],{"categoryNo":119,"categoryName":120,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000018","写作与文案","SCENARIO","使用场景",{"categoryNo":124,"categoryName":125,"taxonomyType":121,"taxonomyTypeDesc":122},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":127,"categoryName":128,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000036","内容创作者",[130,131,132,133,134,135,136,137,138,139,140,141,142,103,143,144,145,146,147,148],"writing dna skill","DNA","writing","strategy","english","logic","visual","structure","chinese","reusable","use","style","distill","analysis","frame","source","for","at","complete",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":153,"sourceHtmlUrl":154,"categories":155,"keywords":158,"publishedAt":44},"01M6M428TTCGQ4ME3KY99VN037","stop-slop","Remove AI writing patterns from prose. Use when drafting, editing, or reviewing text to eliminate predictable AI tells.","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fstop-slop\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fstop-slop\u002FSKILL.md",[156,157],{"categoryNo":119,"categoryName":120,"taxonomyType":121,"taxonomyTypeDesc":122},{"categoryNo":127,"categoryName":128,"taxonomyType":20,"taxonomyTypeDesc":21},[159,160,161,162,28,163,164,165,166,140,167,168,169,146,170,132],"slop","stop slop","stop","drafting","drafts","https","patterns","prose","remove","editing","text","content",{"skillNo":172,"name":173,"nameZh":6,"description":174,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":175,"sourceHtmlUrl":176,"categories":177,"keywords":178,"publishedAt":44},"01M6M41X0B7EBX42TK435DMGGR","shuorenhua","检查和清理中英文文本里的 AI 套路，适用于“去 AI 味”“说人话”“自然一点”“别像模板”“先标问题”这类改写和审稿需求；按场景控制力度，同时保留事实、术语、语域和责任主体。","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fshuorenhua\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fshuorenhua\u002FSKILL.md",[],[173,179],"文本",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":184,"sourceHtmlUrl":185,"categories":186,"keywords":187,"publishedAt":44},"01M6M3ZD12WBEW5KXKDM4N6DFG","naming","Name products, SaaS, brands, open source projects, bots, and apps. Use when the user needs to name something, find a brand name, or pick a product name. Metaphor-driven process that produces memorable, meaningful names and avoids AI slop.","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fnaming-main\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fnaming-main\u002FSKILL.md",[],[182,188,189,190,191,192,140,193,108,145,194,195,196,197,110,198,199,200,201,28,202,203,159],"repo","websearch","product name","apps","bots","view","brand","pick","gh","projects","open","saas","open source","product","describe","ai slop",{"skillNo":205,"name":206,"nameZh":6,"description":207,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":208,"sourceHtmlUrl":209,"categories":210,"keywords":212,"publishedAt":44},"01M6M3YVXAFAAWJ7F6JMPFREYE","humanizer-zh","去除文本中的 AI 生成痕迹。适用于编辑或审阅文本，使其听起来更自然、更像人类书写。\n基于维基百科的\"AI 写作特征\"综合指南。检测并修复以下模式：夸大的象征意义、\n宣传性语言、以 -ing 结尾的肤浅分析、模糊的归因、破折号过度使用、三段式法则、\nAI 词汇、否定式排比、过多的连接性短语。","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fhumanizer-zh\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fendman100\u002Fskill-router-nexus\u002Fblob\u002Fmain\u002FWriting-and-Content\u002Fhumanizer-zh\u002FSKILL.md",[211],{"categoryNo":119,"categoryName":120,"taxonomyType":121,"taxonomyTypeDesc":122},[213,214,215,108,107,106,132,103,179,216,159,161],"humanizer","zh","humanizer zh","翻译"]