React 元件組合模式

來源狀態

可用來源

資源類型

Skill

與類似 Skill 有什麼不同？

• React 效能最佳實務

  React Best Practices 著重 React 效能與實作模式；Composition Patterns 著重元件 API、組合與責任分界。

來源描述的能力

這些是來源描述的可能操作，不代表 2lus 已授予權限或已測試。

尚未列出能力，請審查原始來源。

這個 Skill 是什麼？

處理元件 API 與狀態所有權，與偏向量測效能的 React Best Practices 不同。

可以做什麼？何時適合使用？

• 元件累積很多布林 props。
• 多個子元件需要共享狀態。
• 建立需要多種排列方式的元件庫。

如何使用

1. 列出現有 props、變體與必須保留的行為。
2. 找出 state 與 action 的所有者，規劃組合介面。
3. 逐步遷移呼叫端並檢查互動、鍵盤操作與回歸。

使用前你需要準備

• 元件與呼叫端程式
• React 版本與效能證據

你可以替換：

[component]、[React version]

環境與相依需求

• 元件與呼叫端原始碼，並確認 React 版本。

使用範例與 Prompt

以下是 2lus 撰寫的示範需求；請替換為你有權處理的檔案與專案，不代表已執行或保證結果。

入門

以 Composition Patterns 檢查 Dialog 元件的布林 props，提出兩個更清楚的組合使用範例，先不改碼。

實務

設計 Tabs 的 Root、List、Trigger 與 Panel 分工，說明狀態擁有者並保留鍵盤操作。

進階

把多變體表單逐步遷移為組合元件，列出相容層、呼叫端修改順序與回退方式。

實用提醒

• 先示範兩個真實使用端，再決定抽象是否值得。

限制與注意事項

• React 19 專屬建議不適用舊版本；增加 Context 也可能帶來額外複雜度。

安全注意事項

• 先審查來源與相依工具，只處理獲准的資料；密鑰、個資與登入狀態不得放入提示或公開輸出。

使用與設定

這是官方 repository 的技能集合安裝入口，請在互動選單確認所需 Skill 與 Agent；不代表全平台已驗證。

npx skills add vercel-labs/agent-skills

支援平台

未確認特定 Agent 相容性

來源與授權

來源查核日期（非安全認證）: 2026-09-29

MIT

相關 Skills

• React 效能最佳實務
• Web Design Guidelines 介面檢查

Source status

Active source

Resource type

Skill

How is this different from similar skills?

• React Best Practices

  React Best Practices emphasizes React performance and implementation; Composition Patterns focuses on component APIs, composition and responsibility boundaries.

Documented capabilities

These are operations described upstream, not permissions granted or tested by 2lus.

Capabilities not declared here; review the original source.

What is this skill?

Focus on component APIs and ownership, distinct from performance measurement and optimization.

Use cases and when to use it

• Boolean props proliferate.
• Sibling components need shared state.
• A component library needs flexible arrangements.

How to use it

1. Inventory props, variants and behavior to preserve.
2. Assign ownership of state and actions and design composition.
3. Migrate callers incrementally while reviewing interaction and keyboard behavior.

What you need

• Components and call sites
• React version and performance evidence

You can replace:

[component], [React version]

Environment and dependencies

• Components, call sites and the target React version.

Usage and prompt examples

These example requests were written by 2lus. Substitute files and projects you may use; examples are not executed results or guarantees.

Beginner

Review the boolean props in Dialog using Composition Patterns. Propose two clearer usage examples without editing code.

Practical

Design Tabs Root, List, Trigger and Panel boundaries. Identify the state owner and preserve keyboard behavior.

Advanced

Plan an incremental migration of a multi-variant form to composition, including a compatibility layer, caller order and rollback.

Tips

• Try the design at two real call sites before adding abstractions.

Limitations

• React 19-specific guidance does not apply to older versions; Context may add complexity.

Security notes

• Review sources/dependencies and process only authorized data; keep credentials, personal data and session state out of prompts and public outputs.

Usage and setup

This is the repository-level installer. Review the selected skills and agent in its prompts; it is not a cross-agent verification claim.

npx skills add vercel-labs/agent-skills

Supported agents

Specific agent compatibility unknown

Sources and license

Source check date (not a safety certification): 2026-09-29

MIT

Related skills

• React Best Practices
• Web Design Guidelines