pm7y-component-patterns

What this skill does

# 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 |
|---------|---------|
| PascalCase files | `UserProfile.tsx` |
| kebab-case files | `user-profile.tsx` |
| Index exports | `components/Button/index.tsx` |
| Suffixed files | `UserProfile.component.tsx` |

### Step 3: Analyze Component Patterns

Search for component definition patterns:

**Functional components:**
```
Pattern: (export const|export default function|const) \w+ = \(|: (React\.)?FC
```

**Class components:**
```
Pattern: class \w+ extends (React\.)?(Component|PureComponent)
```

**Component patterns to identify:**

| Pattern | Indicator |
|---------|-----------|
| Arrow function | `const Component = () =>` |
| Function declaration | `function Component()` |
| Typed FC | `const Component: FC<Props>` or `React.FC<Props>` |
| forwardRef | `forwardRef<Ref, Props>` |
| memo | `React.memo(Component)` |

### Step 4: Analyze Props and TypeScript Patterns

Search for prop type definitions:

**Interface patterns:**
```
Pattern: interface \w+Props
Pattern: type \w+Props =
```

Identify TypeScript conventions:

| Convention | Example |
|------------|---------|
| Props interface | `interface ButtonProps { ... }` |
| Props type | `type ButtonProps = { ... }` |
| Inline props | `({ label, onClick }: { label: string; onClick: () => void })` |
| Generic props | `interface ListProps<T> { items: T[] }` |

**Common prop patterns:**
- Children handling: `children: React.ReactNode` vs `children: ReactNode`
- Event handlers: `onClick`, `onSubmit`, `onChange` naming
- Render props: `render*` or `*Renderer` props
- Ref forwarding: `forwardRef` usage

### Step 5: Analyze State Management

**Local state:**
```
Pattern: useState<
Pattern: useReducer<
```

**Context usage:**
```
Pattern: createContext
Pattern: useContext
Pattern: \.Provider
```

**External state libraries:**

| Library | Indicators |
|---------|------------|
| Redux | `useSelector`, `useDispatch`, `connect` |
| Redux Toolkit | `createSlice`, `configureStore` |
| Zustand | `create()`, `useStore` |
| Jotai | `atom(`, `useAtom` |
| Recoil | `atom({`, `useRecoilState` |
| MobX | `observer(`, `makeObservable` |
| TanStack Query | `useQuery`, `useMutation`, `QueryClient` |

### Step 6: Analyze Hooks Patterns

Search for custom hooks:

```
Pattern: (export )?(const|function) use[A-Z]
```

Identify hook patterns:
- Location: `hooks/` directory vs colocated
- Naming: `use[Feature]` convention
- Return type: tuple, object, or single value

**Common hook patterns:**
- Data fetching hooks: `useFetch*`, `useGet*`, `useLoad*`
- Form hooks: `useForm`, `useField`, `useValidation`
- UI state hooks: `useToggle`, `useModal`, `useDisclosure`
- Side effect hooks: `useDebounce`, `useInterval`, `useEventListener`

### Step 7: Analyze Import/Export Patterns

**Import organization:**
```
# Check first 20-30 lines of component files for patterns
```

Identify ordering conventions:
1. React imports
2. Third-party imports
3. Internal imports (absolute paths)
4. Relative imports
5. Type imports
6. Style imports

**Export patterns:**
- Default exports: `export default Component`
- Named exports: `export { Component }`
- Barrel exports: `index.ts` files

### Step 8: Analyze Composition Patterns

**Children patterns:**
```
Pattern: {children}
Pattern: React\.Children
Pattern: cloneElement
```

**Render prop patterns:**
```
Pattern: render[A-Z]\w*=
```

**Compound components:**
```
Pattern: \w+\.\w+ =
Example: Menu.Item, Dialog.Title
```

---

## Output Format

After completing discovery, produce a summary in this format:

```markdown
## Use These Patterns

### File Structure

**Component organization:**
- Location: `src/components/[Category]/[Component]/`
- Files per component: `Component.tsx`, `Component.styles.ts`, `index.ts`

**Naming conventions:**
- Files: PascalCase (`UserProfile.tsx`)
- Components: PascalCase (`UserProfile`)
- Props interfaces: `[Component]Props`
- Hooks: `use[Feature]`

### Component Definition

**Preferred pattern:**
```tsx
interface ComponentProps {
  // props
}

export const Component = ({ prop1, prop2 }: ComponentProps) => {
  return (...)
}
```

**Common patterns used:**
- [ ] Arrow functions with explicit return
- [ ] Arrow functions with implicit return
- [ ] Function declarations
- [ ] React.FC type annotation
- [ ] forwardRef for ref forwarding
- [ ] memo for optimization

### Props Patterns

**TypeScript conventions:**
- Props defined as: `interface [Component]Props`
- Optional props: `prop?: type`
- Children type: `React.ReactNode`
- Event handlers: `on[Event]: () => void`

**Common prop patterns:**
- Destructuring in function signature
- Default values via destructuring: `{ prop = defaultValue }`
- Spread props for flexibility: `...rest`

### State Management

**Local state:**
- `useState` for simple state
- `useReducer` for complex state

**Global state:**
- [Library name] for [use case]
- Context for [use case]

### Hooks

**Custom hooks location:** `src/hooks/` or colocated

**Existing hooks:**
| Hook | Purpose |
|------|---------|
| `useAuth` | Authentication state |
| `useFetch` | Data fetching |
| [list discovered hooks] |

### Import Organization

```tsx
// 1. React
import { useState, useEffect } from 'react'

// 2. Third-party
import { motion } from 'framer-motion'

// 3. Internal (absolute)
import { Button } from '@/components/Button'

// 4. Relative
import { useLocalHook } from './hooks'

// 5. Types
import type { ComponentProps } from './types'

// 6. Styles
import styles from './Component.module.css'
```

### Export Patterns

**Preferred export style:** [named/default]

**Barrel exports:** [yes/no, pattern if yes]
```
```

---

## Discovery Checklist

Before producing the summary:

- [ ] Found all component files (excluding tests, stories, node_modules)
- [ ] Identified file structure pattern (flat, nested, feature-based)
- [ ] Identified file naming convention
- [ ] Identified component definition pattern (arrow, function, FC)
- [ ] Found TypeScript props patterns (interface, type, inline)
- [ ] Identified state management approach (local, con