mirror of
https://github.com/secondsky/claude-skills.git
synced 2026-09-18 19:54:22 +08:00
secondsky
6d7ec06212
Lockstep version bump (repo convention): package.json, all 142 plugin.json, and all 142 marketplace.json entries -> 3.6.1. - README: accurate per-harness marketplace support table (Claude Code + ZCode native; Codex CLI + Cursor adaptation needed; opencode + Gemini CLI no marketplace); new 'Installing with skills.sh' section with verified npx skills examples and a security-scanning caveat. - Removed dead scripts scripts/install-skill.sh and scripts/install-all.sh (targeted non-existent skills/ dir); updated 30 docs/plugins referencing them to use /plugin install (Claude Code) or npx skills add (cross-harness). - Fixed skill-count inconsistency (139 -> 142 standardized; categories table updated). - Fixed generate-marketplace.sh bug: hardcoded metadata.version=3.5.0 in heredoc reset the marketplace version on every regen; now syncs from plugin entries. - Security-audit findings D-001, D-002, D-016, D-019, D-020 marked resolved (install scripts removed).
112 lines
3.9 KiB
Markdown
112 lines
3.9 KiB
Markdown
# React Composition Patterns
|
|
|
|
**Status**: ✅ Production Ready
|
|
**Version**: 1.0.0 (Vercel source)
|
|
**Last Updated**: 2026-01-28
|
|
|
|
Comprehensive React composition patterns guide from Vercel Engineering, containing 7 rules across 3 categories focused on building scalable, maintainable components through composition.
|
|
|
|
## What This Skill Provides
|
|
|
|
✅ **Component Architecture** (CRITICAL) - 2 rules for structural design
|
|
✅ **State Management** (HIGH) - 3 rules for provider patterns and state lifting
|
|
✅ **Implementation Patterns** (MEDIUM) - 2 rules for composition strategies
|
|
|
|
**Total**: 7 production-tested rules with incorrect vs correct examples
|
|
|
|
## When to Use This Skill
|
|
|
|
Use this skill when:
|
|
- Building component libraries or design systems
|
|
- Refactoring components with excessive boolean props
|
|
- Implementing compound components with shared context
|
|
- Designing flexible, composable component APIs
|
|
- Managing component state with provider patterns
|
|
- Creating explicit component variants instead of prop-driven customization
|
|
|
|
## Core Principles
|
|
|
|
1. **Composition over configuration** — Let consumers compose instead of adding props
|
|
2. **Lift your state** — State in providers, not trapped in components
|
|
3. **Compose your internals** — Subcomponents access context, not props
|
|
4. **Explicit variants** — Create ThreadComposer, EditComposer, not Composer with isThread
|
|
|
|
## Structure
|
|
|
|
- **SKILL.md** - Concise overview with rule categories (~1,500 words)
|
|
- **AGENTS.md** - Full compiled guide with all rules expanded (~8,000 words)
|
|
- **rules/** - 7 individual rule files for granular reference
|
|
- **metadata.json** - Version and attribution metadata
|
|
|
|
## Attribution
|
|
|
|
This skill packages **Vercel's React Composition Patterns guide** for Claude Code.
|
|
|
|
**Original Author**: [@nandorojo](https://github.com/nandorojo) (Vercel Engineering)
|
|
**Source**: https://github.com/vercel-labs/agent-skills/tree/main/skills/composition-patterns
|
|
**Packaging**: Claude Skills Maintainers
|
|
**License**: MIT
|
|
|
|
We are grateful to Vercel for creating and open-sourcing this comprehensive guide.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
# Add the marketplace once (if not already added)
|
|
/plugin marketplace add https://github.com/secondsky/claude-skills
|
|
|
|
# Install this plugin
|
|
/plugin install react-composition-patterns@claude-skills
|
|
```
|
|
|
|
## Usage Examples
|
|
|
|
### Example 1: Avoid Boolean Props
|
|
|
|
**Ask**: "How can I refactor this component that has too many boolean props?"
|
|
|
|
**Claude will**:
|
|
- Reference SKILL.md architecture section
|
|
- Suggest compound component patterns
|
|
- Provide code examples from rules/architecture-avoid-boolean-props.md
|
|
|
|
### Example 2: Implement Provider Pattern
|
|
|
|
**Ask**: "How should I structure state management in my component library?"
|
|
|
|
**Claude will**:
|
|
- Reference state management rules
|
|
- Show provider pattern with context
|
|
- Point to rules/state-lift-state.md and rules/state-context-interface.md
|
|
|
|
### Example 3: Create Component Variants
|
|
|
|
**Ask**: "Should I add an isEditing prop or create separate components?"
|
|
|
|
**Claude will**:
|
|
- Reference explicit variants pattern
|
|
- Explain composition over configuration
|
|
- Show examples from rules/patterns-explicit-variants.md
|
|
|
|
## Progressive Disclosure
|
|
|
|
**SKILL.md** (auto-loaded): Quick reference, rule categories, core principles
|
|
**AGENTS.md** (on request): Full guide with all 7 rules expanded
|
|
**rules/** (on request): Individual rule files for specific topics
|
|
|
|
Ask Claude to "Load AGENTS.md" for the comprehensive guide.
|
|
|
|
## Related Skills
|
|
|
|
- `react-best-practices` - Performance optimization patterns
|
|
- `nextjs` - Next.js framework patterns
|
|
- `zustand-state-management` - State management
|
|
- `react-hook-form-zod` - Form composition patterns
|
|
- `tailwind-v4-shadcn` - UI component styling
|
|
|
|
## Support
|
|
|
|
- **Documentation**: See SKILL.md and AGENTS.md in skills/react-composition-patterns/
|
|
- **Issues**: https://github.com/secondsky/claude-skills/issues
|
|
- **Original Source**: https://github.com/vercel-labs/agent-skills
|