Skip to content
cccskills
FreePublished on GitHub

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.

The English summary is being prepared. Showing the original description.

braindeadpt/VenTu
Works withVercel
See how to install

Files included (13)

  • SKILL.md2.8 KB
  • AGENTS.md22.1 KB
  • README.md2.1 KB
  • rules/_sections.md829 B
  • rules/_template.md329 B
  • rules/architecture-avoid-boolean-props.md2.2 KB
  • rules/architecture-compound-components.md2.5 KB
  • rules/patterns-children-over-render-props.md1.8 KB
  • rules/patterns-explicit-variants.md2.3 KB
  • rules/react19-no-forwardref.md953 B
  • rules/state-context-interface.md4.9 KB
  • rules/state-decouple-implementation.md2.6 KB
  • rules/state-lift-state.md3.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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

PriorityCategoryImpactPrefix
1Component ArchitectureHIGHarchitecture-
2State ManagementMEDIUMstate-
3Implementation PatternsMEDIUMpatterns-
4React 19 APIsMEDIUMreact19-

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

animate

Free

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

The English summary is being prepared. Showing the original description.

braindeadpt/VenTu4Updated Oct 20, 2026

apple-design

Free

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.

The English summary is being prepared. Showing the original description.

braindeadpt/VenTu4Updated Oct 20, 2026

frontend-design

Free

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

The English summary is being prepared. Showing the original description.

braindeadpt/VenTu4Updated Oct 20, 2026

frontend-ui-engineering

Free

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

The English summary is being prepared. Showing the original description.

braindeadpt/VenTu4Updated Oct 20, 2026

improve-animations

Free

Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the animations", "audit the motion", "make this app feel better", or wants a roadmap of animation fixes rather than a review of a single diff.

The English summary is being prepared. Showing the original description.

braindeadpt/VenTu4Updated Oct 20, 2026

ventu-data-pipeline

Free

Rules for the VenTu data layer — scripts/, public/data/, scores, buoys (IH/WMO), Open-Meteo, IPMA, Ecowitt, news, Dawn Patrol. Use whenever touching data scripts, generated JSON, scoring, staleness display, or any data source.

The English summary is being prepared. Showing the original description.

braindeadpt/VenTu4Updated Oct 20, 2026

See all skills by braindeadpt

Report a problem with this skill