首页智能体商店技能商店团队商店博客
开始使用

产品

智能体商店技能商店

社区

XDiscord
↗MossAI Tools↗Dang.ai↗Viesearch↗AIDirs↗Findly.tools↗AI Agents Directory↗Twelve Tools↗Wired Business↗ToolPilot.ai↗AIDirectori.es↗Indie.Deals↗DomainRank↗Aura++
YOLOX - Featured on Startup FameListed on Turbo0Featured on toolfame.comFeatured on saasfame.comFeatured on FoundrList
服务条款|隐私政策

© 2026 YOLOX SYSTEM. 保留所有权利。

首页智能体商店技能商店团队商店博客
开始使用
首页/技能商店/vercel-composition-patterns
技能头像

vercel-composition-patterns

开发者工具

让您的智能体能够应用 React 组合模式(如复合组件和上下文提供者)来构建灵活的 API。

使用场景

  • 当重构具有过多布尔属性的组件以提高可维护性时

  • 当构建需要灵活内部结构的复用组件库时

  • 当使用 React 19 特性(如 use())设计复杂的组件 API 时

使用方式

  1. 1

    识别具有过多布尔配置属性的组件

  2. 2

    回顾复合组件或 render props 的 React 组合规则

  3. 3

    要求智能体将组件重构为组合结构

  4. 4

    验证新 API 是否为使用者提供了必要的灵活性

示例对话

案例
你

你

这个 Button 组件有 15 个用于不同样式的布尔属性。我该如何使用组合模式重构它?

vercel-composition-patterns

Agent

我将把您的 Button 重构为一个复合组件系统。我们将把变体提取到明确的子组件中,并使用共享上下文来管理内部状态。这消除了属性膨胀,同时允许用户组合出他们确切需要的 UI。

FAQ

相关 Skill

查看更多
ui-component-patterns
ui-component-patterns开发者工具

赋予您的代理按照组合和复合组件等现代模式构建可重用 React 组件的能力。

architecture-patterns
architecture-patterns开发者工具

赋予您的智能体实现久经考验的后端架构模式的能力,如整洁架构 (Clean Architecture)、六边形架构 (Hexagonal Architecture) 和领域驱动设计 (DDD)。

async-python-patterns
async-python-patterns开发者工具

赋予您的智能体掌握 Python asyncio 和并发编程模式的能力,以实现高性能、非阻塞的 I/O 操作。

prompt-engineering-patterns
prompt-engineering-patterns开发者工具

使您的代理能够掌握先进的提示词工程技术,从而最大限度地提高大语言模型 (LLM) 的性能和可靠性。

python-testing-patterns
python-testing-patterns开发者工具

使您的代理能够使用 pytest、fixtures 和 Mock 技术实施全面的 Python 测试策略。

产品

智能体商店技能商店

社区

XDiscord
↗MossAI Tools↗Dang.ai↗Viesearch↗AIDirs↗Findly.tools↗AI Agents Directory↗Twelve Tools↗Wired Business↗ToolPilot.ai↗AIDirectori.es↗Indie.Deals↗DomainRank↗Aura++
YOLOX - Featured on Startup FameListed on Turbo0Featured on toolfame.comFeatured on saasfame.comFeatured on FoundrList
服务条款|隐私政策

© 2026 YOLOX SYSTEM. 保留所有权利。