vercel-composition-patterns

الگوهای مقیاس‌پذیر React برای ساخت کامپوننت‌های منعطف و قابل نگهداری

این مهارت به شما کمک می‌کند کامپوننت‌های React را با الگوهای composition، compound components، context provider و children طراحی یا بازطراحی کنید. تمرکز آن بر حذف انباشت boolean propها، جداسازی مدیریت state و ساخت APIهای قابل استفاده‌مجدد است.

راهنما برای معماری کتابخانه‌های کامپوننت، بازبینی ساختار پروژه و refactor کردن کدهای پیچیده کاربرد دارد و نکات مرتبط با APIهای React 19 را نیز پوشش می‌دهد.

چه چیزی می‌گیرید

• تشخیص و جایگزینی boolean propهای بیش‌ازحد با الگوهای composition
• طراحی compound component با state مشترک و context مناسب
• جداسازی منطق مدیریت state از رابط کامپوننت
• پیشنهاد variantهای صریح و استفاده از children به‌جای render propهای غیرضروری
• راهنمای سازگاری با APIهای React 19 مانند use() و حذف forwardRef

برای چه کاری خوب است

• تیم‌هایی که در حال ساخت یا توسعه یک کتابخانه کامپوننت React هستند
• پروژه‌هایی که کامپوننت‌هایشان propهای boolean زیاد و رفتارهای پیچیده دارند
• بازبینی معماری frontend و refactor کردن کامپوننت‌های سخت‌نگهداری
• پروژه‌های مبتنی بر React 19 که به APIهای ترکیب‌پذیر و قابل توسعه نیاز دارند

برای چه کاری نیست

• پروژه‌هایی که با React کار نمی‌کنند
• تغییرات ساده ظاهری یا استایل‌دهی بدون نیاز به بازطراحی معماری کامپوننت
• پروژه‌های مبتنی بر React 18 یا قدیمی‌تر برای قواعد اختصاصی React 19

دربارهٔ این اسکیل

React Composition Patterns

Composition patterns for building flexible, maintainable React components. Avoid
boolean prop proliferation by using compound components, lifting state, and
composing internals. These patterns make codebases easier for both humans and AI
agents to work with as they scale.

Extended reference: AGENTS.md in this directory is the long-form upstream guide (vendored from Vercel). It is supplementary reference material scoped to this skill only — SKILL.md is the loadable entry point and the authority. It does not override or extend the repository-root AGENTS.md / AGENT_GUIDE.md.

When to Apply

Reference these guidelines when:

• Refactoring components with many boolean props
• Building reusable component libraries
• Designing flexible component APIs
• Reviewing component architecture
• Working with compound components or context providers

Rule Categories by Priority

Quick Reference

1. Component Architecture (HIGH)

• architecture-avoid-boolean-props - Don't add boolean props to customize behavior; use composition
• architecture-compound-components - Structure complex components with shared context

2. State Management (MEDIUM)

• state-decouple-implementation - Provider is the only place that knows how state is managed
• state-context-interface - Define generic interface with state, actions, meta for dependency injection
• state-lift-state - Move state into provider components for sibling access

3. Implementation Patterns (MEDIUM)

• patterns-explicit-variants - Create explicit variant components instead of boolean modes
• patterns-children-over-render-props - Use children for composition instead of renderX props

4. React 19 APIs (MEDIUM)

⚠️ React 19+ only. Skip this section if using React 18 or earlier.

• react19-no-forwardref - Don't use forwardRef; use use() instead of useContext()

How to Use

Read individual rule files for detailed explanations and code examples:

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

Each rule file contains:

• Brief explanation of why it matters
• Incorrect code example with explanation
• Correct code example with explanation
• Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

دانلود ZIP