Individual skill

component-patterns

React/Next.js component design pattern library. Provides Compound/Render Props/HOC/Custom Hooks patterns, state management strategies (Zustand/React Query/Context), and folder structure conventions as a frontend-dev extension skill. Use for requests like 'component patterns', 'React patterns', 'state management', 'folder structure', 'Custom Hook', 'component separation', and other frontend architecture design tasks. However, actual code implementation or backend logic is outside this skill's scope.

en/16-fullstack-webapp/.claude/skills/component-patterns/skill.md

Read pinned source

Source commit 8e8d35c6a19166614d1af1df85512266d51121ae

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Not checked yet
Last checked: Nov 3, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 1,323
Repository last updated: Mar 22, 2026
License: Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

engineering Derived category
design Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

skill.mdcore · 6,299 bytes

Read excerpt


# Component Patterns — React/Next.js Component Design Patterns

A reference for component patterns, state management strategies, and project structure that the frontend-dev agent uses during frontend development.

## Target Agent

`frontend-dev` — Applies this skill's patterns directly to component design and state management.

## Component Design Patterns

### 1. Compound Components
A pattern where parent and child share implicit state.

**Suited for**: Tab, Accordion, Dropdown, Select, and other composite UI