Official程式設計與開發github.com

vercel-composition-patterns

React 組合模式,適合在重構元件時使用,能避免布林屬性泛濫並提升可擴展性。

vercel-composition-patterns 是什麼?

這個技能檔案(Vercel Composition Patterns)提供了一系列 React 組合模式的指南,專為打造靈活且易於維護的元件而設計。其主要目的是幫助開發者與 AI 代理避免因過多布林屬性導致程式碼膨脹,轉而採用複合元件、狀態提升與內部組合等模式。技能涵蓋四大優先級類別:元件架構(高優先,如避免布林屬性、使用複合元件)、狀態管理(中優先,如解耦實作、定義通用介面)、實作模式(中優先,如使用明確變體元件、偏好 children 而非 render props),以及 React 19 API(中優先,如停止使用 forwardRef,改用 use() 取代 useContext())。該技能支援多種平台(如 Claude Code、Cursor、Codex),並提供詳細規則檔案與程式碼範例,幫助團隊在擴展程式碼庫時保持一致性。開發者可以參考規則檔案(例如 rules/architecture-avoid-boolean-props.md)或完整編譯文件(AGENTS.md)來深入理解每個模式的正確實作方式。

相容平台~Claude Code~Codex CLI~Cursor
Part ofReact
npx skills add https://github.com/vercel-labs/agent-skills/tree/main/skills/composition-patterns

Installed? Explore more 程式設計與開發 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

React 組合模式

用於建構靈活、可維護 React 元件的組合模式。避免布林屬性泛濫,改用複合元件、狀態提升與內部組合。這些模式有助於讓人類與 AI 代理在擴展程式碼庫時更輕鬆地協作。

何時套用

請在以下情況參考這些指南:

  • 重構含有大量布林屬性的元件
  • 建構可重複使用的元件庫
  • 設計靈活的元件 API
  • 審查元件架構
  • 處理複合元件或 Context 提供者

依優先級分類的規則

優先級類別影響前綴
1元件架構高architecture-
2狀態管理中state-
3實作模式中patterns-
4React 19 API中react19-

快速參考

1. 元件架構(高優先級)

  • architecture-avoid-boolean-props - 不要使用布林屬性來自訂行為,改用組合
  • architecture-compound-components - 透過共享 Context 建構複雜元件

2. 狀態管理(中優先級)

  • state-decouple-implementation - Provider 是唯一知道狀態如何管理的地方
  • state-context-interface - 使用 state、actions、meta 定義通用介面以支援依賴注入
  • state-lift-state - 將狀態移至 provider 元件中,以便兄弟元件存取

3. 實作模式(中優先級)

  • patterns-explicit-variants - 建立明確的變體元件,取代布林模式
  • patterns-children-over-render-props - 使用 children 進行組合,而非 renderX props

4. React 19 API(中優先級)

**⚠️ 僅限 React 19+。**若使用 React 18 或更早版本,請跳過此區。

  • react19-no-forwardref - 不要使用 forwardRef;改用 use() 取代 useContext()

如何使用

請閱讀個別規則檔案以取得詳細說明與程式碼範例:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

每個規則檔案包含:

  • 為何重要的簡短說明
  • 錯誤的程式碼範例與解釋
  • 正確的程式碼範例與解釋
  • 額外的背景資訊與參考資料

完整編譯文件

如需包含所有規則展開的完整指南,請參閱:AGENTS.md

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

deploy-to-vercel

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment".

vercel-cli-with-tokens

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g.

vercel-labs/vercel-composition-patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

vercel-labs/vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

vercel-labs/vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

vercel-labs/vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

vercel-optimize

Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

vercel-react-native-skills

React Native and Expo best practices for building performant mobile apps. Use

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to

writing-guidelines

Review docs/prose for Writing Guidelines compliance. Use when asked to

相關技能