vercel-composition-patterns
應用 React 組合模式
使用布林屬性建構 React 元件會導致程式碼難以維護。本技能提供適配 AI 的指南，說明如何使用複合元件、提升狀態和組合內部邏輯，以建立可擴展的元件架構。
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "vercel-composition-patterns". Component has isThread, isEditing, isDMThread, isForwarding boolean props
Resultado esperado:
- Convert to compound components: Composer.Frame, Composer.Header, Composer.Input
- Replace conditionals with composition: <ThreadComposer /> or <EditMessageComposer />
- Lift state into provider components for sibling access
Usando "vercel-composition-patterns". State needs to be accessed by multiple sibling components
Resultado esperado:
- Create a context provider that owns the state
- Expose state and actions through a generic interface
- Components access state via context, not props
Auditoría de seguridad
SeguroDocumentation-only skill containing React composition pattern guidelines. All static scanner findings are false positives: detected 'backtick execution' patterns are markdown code examples in documentation, not actual shell commands. Network URLs are legitimate React.dev documentation links. No executable code present.
Puntuación de calidad
Lo que puedes crear
重構複雜的元件屬性
當元件有許多布林屬性如 isThread、isEditing、isDMThread 時，應用組合模式來消除條件複雜度。
設計新的元件庫
建構可重複使用的元件庫時，使用複合元件模式來建立靈活、可組合且可擴展的 API。
審查元件架構
審查 React 程式碼時，檢查組合模式是否能使維護更容易並支援 AI 輔助重構。
Prueba estos prompts
How should I structure this React component to avoid boolean props? Use the vercel-composition-patterns skill.
I need to share state between sibling components. Following the vercel-composition-patterns skill, what's the recommended approach using context providers?
Review my component API design using the vercel-composition-patterns skill. How can I replace render props with children composition?
Refactor this component file following vercel-composition-patterns: convert boolean props to compound components, lift shared state into providers, and ensure all states are representable.
Mejores prácticas
- 避免使用會增加可能狀態數量的布林屬性；改用組合來消除不可能的狀態。
- 將元件建構為共享上下文的複合元件，每個變體都是明確且獨立的。
- 透過定義具有狀態、操作和元數據的通用介面來將狀態管理與 UI 分離，以實現依賴注入。
Evitar
- 使用布林屬性如 isEnabled、isVisible、isActive 來控制元件行為會產生指數級的狀態組合。
- 透過許多屬性層傳遞狀態，而非使用上下文提供者來讓兄弟元件存取。
- 當使用 children 組合會更簡單且更具可讀性時，卻使用 render props。