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.

5 stars

byagoudbg

View on GitHub Installation ↓

Best use case

vercel-composition-patterns is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using vercel-composition-patterns should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/vercel-composition-patterns/SKILL.md --create-dirs "https://raw.githubusercontent.com/agoudbg/Cosmosh/main/.agents/skills/vercel-composition-patterns/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/vercel-composition-patterns/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How vercel-composition-patterns Compares

Feature / Agent	vercel-composition-patterns	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 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.

## 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

| Priority | Category                | Impact | Prefix          |
| -------- | ----------------------- | ------ | --------------- |
| 1        | Component Architecture  | HIGH   | `architecture-` |
| 2        | State Management        | MEDIUM | `state-`        |
| 3        | Implementation Patterns | MEDIUM | `patterns-`     |
| 4        | React 19 APIs           | MEDIUM | `react19-`      |

## 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`

Related Skills

vercel-react-native-skills

from agoudbg/Cosmosh

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-react-best-practices

from agoudbg/Cosmosh

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.

cosmosh-ui-patterns

from agoudbg/Cosmosh

Cosmosh renderer UI design and interaction workflow for implementing, refactoring, or reviewing React/Tailwind/Radix UI work in the Cosmosh Electron app. Use when touching packages/renderer UI, pages, layout, tabs, SSH terminal interactions, SFTP/browser-like workflows, settings surfaces, visual tokens, CSS/Tailwind classes, Radix wrappers, localization, or UI/UX documentation for Cosmosh.

web-design-guidelines

from agoudbg/Cosmosh

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

google-review-conflict-resolution

from agoudbg/Cosmosh

Resolve reviewer-author disagreement using Google-style code review conflict workflow. Use when review comments stall, standards are disputed, or escalation is needed. Produces evidence-based consensus steps, escalation path, and documented final decision.

google-code-reviewer

from agoudbg/Cosmosh

Run a Google-style code review workflow for pull requests and changelists. Use when reviewing design, correctness, tests, readability, comments, documentation, review speed, and comment severity (Required/Nit/Optional/FYI). Includes decision branches for large CLs, major design problems, and LGTM with comments.

google-cl-author

from agoudbg/Cosmosh

Prepare and iterate changelists/pull requests using Google-style author practices. Use when writing clear CL descriptions, splitting large changes, bundling tests, handling reviewer comments, and keeping dependent CLs build-safe.

detecting-mimikatz-execution-patterns

from killvxk/cybersecurity-skills-zh

通过命令行模式、LSASS 访问签名、二进制指标和已知模块的内存检测，检测 Mimikatz 的执行。

detecting-beaconing-patterns-with-zeek

from killvxk/cybersecurity-skills-zh

对 Zeek conn.log 连接间隔进行统计分析，检测 C2 信标（Beaconing）模式。使用 ZAT 库将 Zeek 日志加载到 Pandas DataFrame，计算到达时间间隔标准差，标记具有低抖动（Low Jitter）的周期性连接。适用于在网络数据中狩猎命令与控制（C2）回调行为。

detecting-anomalous-authentication-patterns

from killvxk/cybersecurity-skills-zh

使用用户和实体行为分析（UEBA）分析、统计基线和机器学习模型检测异常认证模式，识别不可能旅行、撞库攻击、暴力破解、密码喷洒和账户被攻陷行为，覆盖所有认证日志来源。适用于认证异常检测、登录行为分析、UEBA 实施或可疑登录调查等相关请求。

analyzing-cloud-storage-access-patterns

from killvxk/cybersecurity-skills-zh

通过分析 CloudTrail Data Events、GCS 审计日志和 Azure Storage Analytics，检测 AWS S3、GCS 和 Azure Blob Storage 中的异常访问模式。识别非工作时间的批量下载、来自新 IP 地址的访问、异常 API 调用（GetObject 峰值）以及使用统计基线和时间序列异常检测的潜在数据外泄行为。

swiftui-patterns

from j7-dev/everything-github-copilot

SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS/macOS UI best practices.