pm7y-component-patterns

# React Component Pattern Discovery Skill

Discovers existing React component patterns in a codebase to ensure new components follow established conventions.

---

## Overview

This skill scans a codebase to build a comprehensive inventory of:

- **File structure** - How components are organized and named
- **Component patterns** - Functional vs class, hooks usage, composition patterns
- **State management** - Local state, context, Redux, Zustand, etc.
- **Prop patterns** - TypeScript interfaces, default props, destructuring
- **Naming conventions** - Files, components, props, handlers, types

**Output:** A "Use These Patterns" summary that provides actionable guidance for writing new components.

**When to use:**

- Before writing a new React component
- Before creating a feature with multiple components
- When onboarding to an unfamiliar React codebase
- Before reviewing component code to understand expectations

---

## Discovery Process

### Step 1: Find All Component Files

Locate React component files in the project:

```
# Search patterns
**/components/**/*.tsx
**/components/**/*.jsx
**/*.component.tsx
**/pages/**/*.tsx
**/views/**/*.tsx
**/features/**/*.tsx

# Exclude patterns
node_modules/
dist/
build/
.next/
coverage/
**/*.test.tsx
**/*.spec.tsx
**/*.stories.tsx
```

Record the file structure - note organizational patterns like:
- Feature-based: `features/[Feature]/components/`
- Flat: `components/[Component].tsx`
- Nested: `components/[Component]/[Component].tsx`
- Atomic design: `atoms/`, `molecules/`, `organisms/`

### Step 2: Analyze File Structure Patterns

For each component directory, identify:

**Colocated files:**
- `Component.tsx` - Main component
- `Component.styles.ts` or `Component.scss` - Styles
- `Component.test.tsx` - Tests
- `Component.types.ts` - TypeScript types
- `index.ts` - Barrel export
- `hooks/` - Component-specific hooks
- `utils/` - Component-specific utilities

**Naming patterns:**
| Pattern | Example |
|---------|---------|
| P