agentic-awesome-skills 技能详解：cc-skill-frontend-patterns 前端开发模式实战指南

AI 技能AI 插件【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,445 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/gh_mirrors/an/agentic-awesome-skills点击查看免费下载本篇指南以 AASagentic-awesome-skills仓库中的cc-skill-frontend-patterns技能为核心系统讲解其在 React、Next.js 场景下沉淀的组件组合、自定义 Hooks、状态管理、性能优化、表单处理、错误边界、动画与无障碍八大类前端模式。读完本文你将掌握一套可直接复用的 TypeScript/React 代码范式并能理解该技能在仓库中的元数据定位、触发方式与执行约束从而在自己项目中按需落地。技能定位一个专攻前端开发模式的社区技能cc-skill-frontend-patterns是 AAS 仓库中一个面向社区贡献、风险等级为critical的元技能meta 技能其完整定义位于 SKILL.md仓库plugins/agentic-awesome-skills目录下另有一份相同内容的副本。从 data/catalog.json 中的目录条目可以看到它的完整元信息id / canonical_idcc-skill-frontend-patternsdescriptionFrontend development patterns for React, Next.js, state management, performance optimization, and UI best practicescategorymetariskcriticalsourcecommunitytagscc、skill、frontendtriggerscc、skill、frontend、development、react、next、js、state、performance、optimization、ui在 AAS 的技能体系中技能通过 YAML frontmatter 声明name、description、risk、source、date_added等元数据该技能添加于2026-02-27目录索引catalog.json据此为 Agent 提供技能发现能力。技能主体SKILL.md只保留激活条件、示例与约束而把完整过程与参考材料放在references/detailed-guide.md中——这正是仓库 docs/contributors/skill-anatomy.md 与 docs/contributors/skill-template.md 所描述的Skill Anatomy推荐结构SKILL.md 负责何时用详细指南负责怎么用。何时使用本技能按照 SKILL.md 的定义本技能适用于执行概览中所描述的工作流或动作的任务具体来说开发或重构 React / Next.js 组件库与页面设计跨组件共享的 Hooks 与状态管理层需要对列表、图表等重渲染场景做性能优化编写带校验的表单、弹窗、下拉等交互组件并保证可访问性。使用限制LimitationsSKILL.md 同时明确了三条硬性边界仅在任务与上述范围清晰匹配时使用不要套用到无关领域技能输出不能替代针对具体环境的验证、测试或专家评审当缺少必要输入、权限、安全边界或成功标准时应停下来向用户澄清而不是擅自执行。组件模式组合优于继承详细指南references/detailed-guide.md的第一部分讨论组件设计。核心思想是用组合composition而不是继承inheritance来构建 UI 能力这一理念与 React 官方设计哲学一致也使得组件边界清晰、易于测试和替换。组合式组件Composition Over Inheritance把大组件拆成容器 子部件由调用方自由组装interface CardProps { children: React.ReactNode variant?: default | outlined } export function Card({ children, variant default }: CardProps) { return div className{card card-${variant}}{children}/div } export function CardHeader({ children }: { children: React.ReactNode }) { return div classNamecard-header{children}/div } export function CardBody({ children }: { children: React.ReactNode }) { return div classNamecard-body{children}/div } // Usage Card CardHeaderTitle/CardHeader CardBodyContent/CardBody /Card关键点variant通过 props 提供默认值为default调用方可通过variantoutlined扩展视觉形态children: React.ReactNode让内容完全由调用方控制。这种模式避免了深层次 props 透传和脆弱的类继承链。复合组件Compound Components隐式共享状态当多个子组件需要共享状态如 Tab 的选中项时复合组件通过 Context 实现父组件持有状态、子组件通过 Context 读写的隐式契约interface TabsContextValue { activeTab: string setActiveTab: (tab: string) void } const TabsContext createContextTabsContextValue | undefined(undefined) export function Tabs({ children, defaultTab }: { children: React.ReactNode defaultTab: string }) { const [activeTab, setActiveTab] useState(defaultTab) return ( TabsContext.Provider value{{ activeTab, setActiveTab }} {children} /TabsContext.Provider ) } export function TabList({ children }: { children: React.ReactNode }) { return div classNametab-list{children}/div } export function Tab({ id, children }: { id: string, children: React.ReactNode }) { const context useContext(TabsContext) if (!context) throw new Error(Tab must be used within Tabs) return ( button className{context.activeTab id ? active : } onClick{() context.setActiveTab(id)} {children} /button ) } // Usage Tabs defaultTaboverview TabList Tab idoverviewOverview/Tab Tab iddetailsDetails/Tab /TabList /Tabs这段代码有两个值得学习的防御性细节Context 值声明为TabsContextValue | undefined并在Tab中if (!context) throw new Error(Tab must be used within Tabs)确保子组件误用脱离Tabs渲染时立即报错而非静默失败——这也是后面useMarkets等 Hooks 反复使用的同一模式。Render Props把渲染逻辑交给调用方当组件负责数据获取等行为但希望完全由调用方决定怎么渲染时render props 是最直接的方案interface DataLoaderPropsT { url: string children: (data: T | null, loading: boolean, error: Error | null) React.ReactNode } export function DataLoaderT({ url, children }: DataLoaderPropsT) { const [data, setData] useStateT | null(null) const [loading, setLoading] useState(true) const [error, setError] useStateError | null(null) useEffect(() { fetch(url) .then(res res.json()) .then(setData) .catch(setError) .finally(() setLoading(false)) }, [url]) return {children(data, loading, error)}/ } // Usage DataLoaderMarket[] url/api/markets {(markets, loading, error) { if (loading) return Spinner / if (error) return Error error{error} / return MarketList markets{markets!} / }} /DataLoader注意泛型DataLoaderT类型参数随调用处的泛型实参如Market[]推断children 函数签名携带完整的类型信息调用方在渲染分支里可以安全访问markets。缺点同样明显回调嵌套层级变深后可读性下降指南后文的useQueryHook 正是这一模式在 Hooks 形态下的演进版本。自定义 Hooks 模式复用状态逻辑Hooks 是 React 16.8 复用有状态逻辑而非 UI的标准方式。指南给出了三个高频场景。状态开关 HookuseToggleexport function useToggle(initialValue false): [boolean, () void] { const [value, setValue] useState(initialValue) const toggle useCallback(() { setValue(v !v) }, []) return [value, toggle] } // Usage const [isOpen, toggleOpen] useToggle()useCallback保证toggle引用稳定作为 props 传给子组件时不会引发多余重渲染返回元组数组解构与useState的使用体验保持一致。异步数据获取 HookuseQuery这是渲染 props 的 Hooks 化版本提供了data / error / loading / refetch四元返回和回调选项interface UseQueryOptionsT { onSuccess?: (data: T) void onError?: (error: Error) void enabled?: boolean } export function useQueryT( key: string, fetcher: () PromiseT, options?: UseQueryOptionsT ) { const [data, setData] useStateT | null(null) const [error, setError] useStateError | null(null) const [loading, setLoading] useState(false) const refetch useCallback(async () { setLoading(true) setError(null) try { const result await fetcher() setData(result) options?.onSuccess?.(result) } catch (err) { const error err as Error setError(error) options?.onError?.(error) } finally { setLoading(false) } }, [fetcher, options]) useEffect(() { if (options?.enabled ! false) { refetch() } }, [key, refetch, options?.enabled]) return { data, error, loading, refetch } } // Usage const { data: markets, loading, error, refetch } useQuery( markets, () fetch(/api/markets).then(r r.json()), { onSuccess: data console.log(Fetched, data.length, markets), onError: err console.error(Failed:, err) } )要点拆解key目前作为 effect 的触发依赖[key, refetch, options?.enabled]key 变化即重新拉取这也是后续演进为 TanStack Query 这类缓存库的雏形options?.enabled ! false支持手动触发场景如等待用户点击后再请求err as Error的类型断言处理了catch捕获值类型不确定的问题。防抖 HookuseDebounce搜索输入框是高发场景——每次击键都发请求会打爆后端防抖可以把请求推迟到用户停止输入之后export function useDebounceT(value: T, delay: number): T { const [debouncedValue, setDebouncedValue] useStateT(value) useEffect(() { const handler setTimeout(() { setDebouncedValue(value) }, delay) return () clearTimeout(handler) }, [value, delay]) return debouncedValue } // Usage const [searchQuery, setSearchQuery] useState() const debouncedQuery useDebounce(searchQuery, 500) useEffect(() { if (debouncedQuery) { performSearch(debouncedQuery) } }, [debouncedQuery])原理value或delay变化时effect 先清理上一个定时器再新建只有停止变化超过delay此处 500ms后debouncedValue才会更新搜索请求随之后移。状态管理模式Context Reducer对中等规模的领域状态如市场列表 当前选中项 加载态指南推荐Context useReducerReducer 集中管理状态转换Context 负责向下分发再通过自定义 Hook 收口使用方 APIinterface State { markets: Market[] selectedMarket: Market | null loading: boolean } type Action | { type: SET_MARKETS; payload: Market[] } | { type: SELECT_MARKET; payload: Market } | { type: SET_LOADING; payload: boolean } function reducer(state: State, action: Action): State { switch (action.type) { case SET_MARKETS: return { ...state, markets: action.payload } case SELECT_MARKET: return { ...state, selectedMarket: action.payload } case SET_LOADING: return { ...state, loading: action.payload } default: return state } } const MarketContext createContext{ state: State dispatch: DispatchAction } | undefined(undefined) export function MarketProvider({ children }: { children: React.ReactNode }) { const [state, dispatch] useReducer(reducer, { markets: [], selectedMarket: null, loading: false }) return ( MarketContext.Provider value{{ state, dispatch }} {children} /MarketContext.Provider ) } export function useMarkets() { const context useContext(MarketContext) if (!context) throw new Error(useMarkets must be used within MarketProvider) return context }值得注意的实践Action 使用可辨识联合discriminated union每个 action 都有字面量typereducer 的switch能获得穷尽性检查不可变更新每个 case 都基于...state展开后覆盖目标字段避免原地修改Provider 边界错误显式化useMarkets在 Provider 缺失时抛错与复合组件Tab的防御策略一致状态分层useReducer适合跨组件共享的领域状态局部 UI 状态如开关、输入框值仍应使用useState避免过度设计。性能优化记忆化、代码分割与虚拟化指南的性能章节针对大数据列表 重组件场景给出三层手段。MemoizationuseMemo / useCallback / React.memo// ✅ useMemo for expensive computations const sortedMarkets useMemo(() { return markets.sort((a, b) b.volume - a.volume) }, [markets]) // ✅ useCallback for functions passed to children const handleSearch useCallback((query: string) { setSearchQuery(query) }, []) // ✅ React.memo for pure components export const MarketCard React.memoMarketCardProps(({ market }) { return ( div classNamemarket-card h3{market.name}/h3 p{market.description}/p /div ) })三者分工明确useMemo缓存昂贵计算结果排序、过滤、格式化useCallback稳定函数引用以配合子组件浅比较React.memo让纯展示组件在 props 未变时跳过重渲染。三者必须配套使用才有效果——单独memo而父组件每次渲染都传新函数引用浅比较依然失败。代码分割与懒加载lazy Suspenseimport { lazy, Suspense } from react // ✅ Lazy load heavy components const HeavyChart lazy(() import(./HeavyChart)) const ThreeJsBackground lazy(() import(./ThreeJsBackground)) export function Dashboard() { return ( div Suspense fallback{ChartSkeleton /} HeavyChart data{data} / /Suspense Suspense fallback{null} ThreeJsBackground / /Suspense /div ) }lazy(() import(...))把组件对应的 chunk 从主包中切出首次渲染时才按需加载Suspense提供加载期间的占位 UI。对图表、Three.js 背景等重型组件这是降低首屏体积最直接的手段。fallback{null}适用于加载完成前不显示任何内容也可接受的装饰性组件。长列表虚拟化tanstack/react-virtualimport { useVirtualizer } from tanstack/react-virtual export function VirtualMarketList({ markets }: { markets: Market[] }) { const parentRef useRefHTMLDivElement(null) const virtualizer useVirtualizer({ count: markets.length, getScrollElement: () parentRef.current, estimateSize: () 100, // Estimated row height overscan: 5 // Extra items to render }) return ( div ref{parentRef} style{{ height: 600px, overflow: auto }} div style{{ height: ${virtualizer.getTotalSize()}px, position: relative }} {virtualizer.getVirtualItems().map(virtualRow ( div key{virtualRow.index} style{{ position: absolute, top: 0, left: 0, width: 100%, height: ${virtualRow.size}px, transform: translateY(${virtualRow.start}px) }} MarketCard market{markets[virtualRow.index]} / /div ))} /div /div ) }虚拟化的本质外层滚动容器高度固定600px内层撑起总高度getTotalSize()但只绝对定位渲染视口附近的条目配合overscan: 5提前渲染前后各 5 项作为缓冲从而把 DOM 节点数从万级降到几十级。参数estimateSize是估算的行高100pxgetVirtualItems()返回带index / size / start的虚拟行元数据。表单处理模式受控组件 校验指南给出的表单方案不依赖第三方库用受控组件 校验函数即可覆盖大多数中轻量场景interface FormData { name: string description: string endDate: string } interface FormErrors { name?: string description?: string endDate?: string } export function CreateMarketForm() { const [formData, setFormData] useStateFormData({ name: , description: , endDate: }) const [errors, setErrors] useStateFormErrors({}) const validate (): boolean { const newErrors: FormErrors {} if (!formData.name.trim()) { newErrors.name Name is required } else if (formData.name.length 200) { newErrors.name Name must be under 200 characters } if (!formData.description.trim()) { newErrors.description Description is required } if (!formData.endDate) { newErrors.endDate End date is required } setErrors(newErrors) return Object.keys(newErrors).length 0 } const handleSubmit async (e: React.FormEvent) { e.preventDefault() if (!validate()) return try { await createMarket(formData) // Success handling } catch (error) { // Error handling } } return ( form onSubmit{handleSubmit} input value{formData.name} onChange{e setFormData(prev ({ ...prev, name: e.target.value }))} placeholderMarket name / {errors.name span classNameerror{errors.name}/span} {/* Other fields */} button typesubmitCreate Market/button /form ) }要点受控组件value与onChange双向绑定表单状态唯一来源是 React state集中校验validate()收集所有字段错误到一个FormErrors对象Object.keys(newErrors).length 0决定是否放行提交内联错误提示错误通过errors.name span classNameerror就近渲染在对应字段旁规则示例必填校验!formData.name.trim()与长度上限 200组合体现先必填后规则的校验顺序。当表单规模变大时可将校验抽象为 schema如 zod / yup但本模式为无额外依赖的起点。错误边界模式兜住渲染期异常React 中 render 阶段抛出的错误会整树卸载需要用类组件错误边界兜底。指南提供了完整实现interface ErrorBoundaryState { hasError: boolean error: Error | null } export class ErrorBoundary extends React.Component { children: React.ReactNode }, ErrorBoundaryState { state: ErrorBoundaryState { hasError: false, error: null } static getDerivedStateFromError(error: Error): ErrorBoundaryState { return { hasError: true, error } } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { console.error(Error boundary caught:, error, errorInfo) } render() { if (this.state.hasError) { return ( div classNameerror-fallback h2Something went wrong/h2 p{this.state.error?.message}/p button onClick{() this.setState({ hasError: false })} Try again /button /div ) } return this.props.children } } // Usage ErrorBoundary App / /ErrorBoundary实现要点错误边界必须是类组件Hooks 尚无等价能力并实现static getDerivedStateFromError以在渲染前同步更新 statecomponentDidCatch负责副作用打日志、上报监控类属性state声明初始值避免构造函数样板Try again 按钮通过setState({ hasError: false })重置边界实现错误后的恢复尝试边界应放置在粒度合适的位置如页面级、路由级而非仅仅包住整个 App这样单模块崩溃不至于拖垮全站。动画模式Framer Motion 的进入/退出动效指南使用framer-motion处理列表与弹窗的入场、出场动画核心是motion组件 AnimatePresence后者负责监听子树卸载以播放 exit 动画import { motion, AnimatePresence } from framer-motion // ✅ List animations export function AnimatedMarketList({ markets }: { markets: Market[] }) { return ( AnimatePresence {markets.map(market ( motion.div key{market.id} initial{{ opacity: 0, y: 20 }} animate{{ opacity: 1, y: 0 }} exit{{ opacity: 0, y: -20 }} transition{{ duration: 0.3 }} MarketCard market{market} / /motion.div ))} /AnimatePresence ) } // ✅ Modal animations export function Modal({ isOpen, onClose, children }: ModalProps) { return ( AnimatePresence {isOpen ( motion.div classNamemodal-overlay initial{{ opacity: 0 }} animate{{ opacity: 1 }} exit{{ opacity: 0 }} onClick{onClose} / motion.div classNamemodal-content initial{{ opacity: 0, scale: 0.9, y: 20 }} animate{{ opacity: 1, scale: 1, y: 0 }} exit{{ opacity: 0, scale: 0.9, y: 20 }} {children} /motion.div / )} /AnimatePresence ) }要点列表动画initial定义初始态透明 下移 20pxanimate定义最终态exit定义移除态transition.duration: 0.3控制时长每个子项必须有稳定的key供AnimatePresence追踪弹窗动画isOpen (...)条件渲染配合AnimatePresence实现开合两向动画遮罩淡入淡出、内容缩放位移动画分层呈现动画参数位移、透明度、时长应统一收敛为设计令牌避免各处硬编码。无障碍模式键盘导航与焦点管理指南最后给出两个关键的 a11y 模式保证交互组件对键盘与读屏器可用。键盘导航combobox 下拉export function Dropdown({ options, onSelect }: DropdownProps) { const [isOpen, setIsOpen] useState(false) const [activeIndex, setActiveIndex] useState(0) const handleKeyDown (e: React.KeyboardEvent) { switch (e.key) { case ArrowDown: e.preventDefault() setActiveIndex(i Math.min(i 1, options.length - 1)) break case ArrowUp: e.preventDefault() setActiveIndex(i Math.max(i - 1, 0)) break case Enter: e.preventDefault() onSelect(options[activeIndex]) setIsOpen(false) break case Escape: setIsOpen(false) break } } return ( div rolecombobox aria-expanded{isOpen} aria-haspopuplistbox onKeyDown{handleKeyDown} {/* Dropdown implementation */} /div ) }rolecomboboxaria-expandedaria-haspopuplistbox告知读屏器这是一个展开的下拉组合框ArrowDown/ArrowUp用Math.min/Math.max夹取索引边界防止越界Enter选择当前高亮项Escape关闭均调用e.preventDefault()避免浏览器默认行为如表单回车提交。焦点管理弹窗的焦点保存与恢复export function Modal({ isOpen, onClose, children }: ModalProps) { const modalRef useRefHTMLDivElement(null) const previousFocusRef useRefHTMLElement | null(null) useEffect(() { if (isOpen) { // Save currently focused element previousFocusRef.current document.activeElement as HTMLElement // Focus modal modalRef.current?.focus() } else { // Restore focus when closing previousFocusRef.current?.focus() } }, [isOpen]) return isOpen ? ( div ref{modalRef} roledialog aria-modaltrue tabIndex{-1} onKeyDown{e e.key Escape onClose()} {children} /div ) : null }打开时保存document.activeElement到previousFocusRef并把焦点移入弹窗容器tabIndex{-1}使 div 可聚焦但不进入 Tab 序关闭时把焦点还给触发元素避免焦点丢失导致键盘用户迷路roledialogaria-modaltrue声明模态语义Escape关闭是弹窗的通用快捷键约定。总结与选型建议cc-skill-frontend-patterns技能覆盖了 React/Next.js 前端开发中最常遇到的八类模式。概括其核心选型思路组件层优先组合与复合组件render props 适合行为固定、渲染多变的场景逻辑层优先自定义 HooksuseToggle/useQuery/useDebounce把状态逻辑收敛为可测试的单元状态层局部 UI 状态用useState跨组件领域状态用 Context Reducer规模再大再引入专门的状态库性能层useMemo/useCallback/React.memo三件套处理重计算与引用稳定性lazy Suspense切包虚拟化扛长列表健壮性层表单走受控 集中校验渲染异常用错误边界兜底体验层Framer Motion 负责动效键盘导航与焦点管理保证无障碍底线。详细指南末尾的提醒同样适用于读者现代前端模式的目标是构建可维护、高性能的用户界面——选择与项目复杂度相匹配的模式。 这份技能文档在仓库中的完整代码与结构可在 references/detailed-guide.md 中继续查阅其目录条目与元数据见 data/catalog.json。按技能自身的约束落地到具体环境时仍需结合实际项目进行验证、测试与评审。赞分享AI 技能AI 插件【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,445 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/gh_mirrors/an/agentic-awesome-skills点击查看免费下载相关推荐Agentic Awesome Skills 前端模式实战指南从组件组合到性能优化的 React 开发范式Agentic Awesome Skills 前端模式实战指南从组件组合到性能优化的 React 开发范式 本文以 AASAgentic Awesome SAI 技能AI 插件Agentic Awesome Skills 中的 antigravity-skill-orchestrator基于记忆的智能技能编排 Meta-Skill 实战指南Agentic Awesome Skills 中的 antigravity skill orchestrator基于记忆的智能技能编排 Meta SkillAI 技能AI 插件Agentic Awesome Skills 的 Frontend Patterns 规则模板为 AGENTS.md 生成前端组件、状态管理与信任边界规则Agentic Awesome Skills 的 Frontend Patterns 规则模板为 AGENTS.md 生成前端组件、状态管理与信任边界规则 导AI 技能AI 插件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考