CCM
/Skills
SkillsMCPMarketplacesDigestToolsAdvertise

This week in Claude

Every Monday: Claude Code, Agent SDK, MCP, and the Anthropic platform moves worth your time.

Skills by Category
Frontend DevelopmentBackend & APIsTesting & QASecurityDevOps & CI/CDGit & Pull RequestsDocumentationCode Review & QualityAI & Agent BuildingSkill Development
MCP Servers by Category
Sales & MarketingWeb & Browser AutomationDatabasesAI & LLM ToolsCloud & InfrastructureCommunication & MessagingDeveloper ToolsDesign & CreativeDocuments & KnowledgeSearch & Web Crawling
Marketplaces by Category
AI Agents & OrchestrationLLM IntegrationDevelopment ToolsFrontend & UIBackend & APIsDatabasesTesting & Code QualityDevOps & CloudSecurity & ComplianceGit & Version Control

Claude Code Marketplaces

Discover Claude Code plugins, extensions, and tools. Automatically updated directory of Anthropic Claude AI marketplaces with development tools, productivity plugins, and integrations.

Resources

  • Browse Skills
  • Browse MCP Servers
  • Browse Marketplaces
  • Skill index
  • MCP index
  • Marketplace index
  • Plugins Reference

Community

  • About
  • Tools
  • Feedback
  • Privacy Policy
  • Advertise

Built for the Claude Code community with Claude Code by mertbuilds.com

Independent project, not affiliated with Anthropic
secondsky avatar

React Composition Patterns

secondsky/claude-skills
406 installs204 stars
Summary

This codifies the composition patterns that prevent your component APIs from turning into boolean prop soup. It guides you toward compound components, context providers, and explicit variants instead of cramming everything into a single component with fifteen true/false flags. The rules are prioritized by impact and organized around architecture, state management, and implementation patterns. Most valuable when you're building a component library or refactoring something that's already accumulated too many conditional branches. From Vercel, which makes sense given they deal with this at scale in their UI libraries.

Install to Claude Code

npx -y skills add secondsky/claude-skills --skill react-composition-patterns --agent claude-code

Installs into .claude/skills of the current project.

CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
inference shell
inference shell
create and run specialised agents in minutes
build now →
CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
inference shell
inference shell
create and run specialised agents in minutes
build now →
Files
SKILL.md

Select a file.

Featured
CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
inference shell
inference shell
create and run specialised agents in minutes
build now →
Categories
Frontend DevelopmentCode Review & Quality
First SeenJun 3, 2026
View on GitHub

More from secondsky/claude-skills

All 146 skills →
  • Api Rate Limiting404
  • Design System Creation398
  • Progressive Web App394
  • Architecture Patterns393
  • Better Auth392
  • Api Security Hardening389
  • Mobile App Testing389
  • Access Control Rbac384
  • Payment Gateway Integration382
  • React Native Skills381
  • Technical Specification381
  • Ml Model Training380
  • Api Contract Testing378
  • Api Reference Documentation376
  • Tanstack Router376
  • Systematic Debugging370
  • Frontend Design369
  • Test Quality Analysis367
  • Csrf Protection364
  • Interaction Design364
  • Sequential Thinking362
  • Api Design Principles361
  • Api Error Handling357
  • Internationalization I18n357

Recommended

More Frontend Development →
gocallum avatar
clerk-nextjs-skills

gocallum/nextjs16-agent-skills

Clerk authentication for Next.js 16 (App Router only) with proxy.ts setup, migration from middleware.ts, environment configuration, and MCP server integration.
397
22
davila7 avatar
vercel-react-best-practices

davila7/claude-code-templates

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.
382
30.2k
manutej avatar
nextjs-development

manutej/luxor-claude-marketplace

Comprehensive Next.js development skill covering App Router, Server Components, data fetching, routing patterns, API routes, middleware, and full-stack Next.js applications
374
61
questfortech-investments avatar
react-vite-expert

questfortech-investments/claude-code-skills

Complete React + Vite expertise for building optimized, scalable applications. Covers project architecture, folder structure, component patterns, performance optimization, TypeScript best practices, testing, and build configuration. Use when building React apps with Vite, organizing projects, optimizing performance, or implementing best practices. Includes code generators, bundle analyzer, and production-ready templates.
369
5
manutej avatar
react-development

manutej/luxor-claude-marketplace

Comprehensive React development with hooks, components, state management, context, effects, and performance optimization based on official React documentation
367
61
capawesome-team avatar
capacitor-react

capawesome-team/skills

Guides the agent through Capacitor app development with React — project structure, hooks for native features, state management patterns, using Capacitor plugins in React components, and React-specific best practices. Do not use for Ionic Framework with React (use ionic-react), migrating or upgrading Capacitor apps or plugins, or non-React frameworks.
366
37