generic-react-feature-developer

Files (1)

• SKILL.md

SKILL.md (first lines)

# React Feature Developer

Guide feature development with React architecture patterns.

**Extends:** [Generic Feature Developer](../generic-feature-developer/SKILL.md) - Read base skill for development workflow, scope assessment, and build vs integrate decisions.

## React Architecture

### Project Structure

```
src/
├── components/
│   ├── ui/          # Reusable primitives (Button, Input)
│   ├── features/    # Feature-specific components
│   └── layout/      # Layout components (Header, Sidebar)
├── hooks/           # Custom hooks (useAuth, useStore)
├── stores/          # Zustand stores
├── services/        # API clients, IndexedDB wrappers
├── types/           # TypeScript interfaces
└── lib/             # Utilities
```

## State Management Patterns

### Zustand Store (Preferred)

```typescript
// stores/useFeatureStore.ts
interface FeatureState {
  items: Item[];
  isLoading: boolean;
  // Actions
  addItem: (item: Item) => void;
  removeItem: (id: string) => void;
}

const useFeatureStore = create<FeatureState>()(
  persist(
    (set) => ({
      items: [],
      isLoading: false,
      addItem: (item) => set((s) => ({ items: [...s.items, item] })),
      removeItem: (id) =>
        set((s) => ({
          items: s.items.filter((i) => i.id !== id),
        })),
    }),
    {
      name: "feature-storage",
      version: 1,
      migrate: (state, version) => {
        // Handle migrations between versions
        return state as FeatureState;
      },
    },
  ),
);
```

### Zustand Selectors (Performance)

```typescript
// Avoid re-renders with selectors
const items = useFeatureStore((state) => state.items);
const addItem = useFeatureStore((state) => state.addItem);

// Shallow compare for objects
import { shallow } from "zustand/shallow";
const { items, isLoading } = useFeatureStore(
  (state) => ({ items: state.items, isLoading: state.isLoading }),
  shallow,
);
```

### Context vs Zustand Decision

| Use Context                    | Use Zustand                |
| ------------------------------ | -------------------------- |
| Theme, locale (rarely changes) | Frequently updated data    |
| Authentication state           | Complex state with actions |
| Provider already exists        | Need persistence           |
| Prop drilling 1-2 levels       | Cross-cutting concern      |

## Server State (React Query)

```typescript
// Server state - React Query
const { data, isLoading, error } = useQuery({
  queryKey: ["items", userId],
  queryFn: () => fetchItems(userId),
  staleTime: 5 * 60 * 1000, // 5 minutes
});

// Mutations
const mutation = useMutation({
  mutationFn: createItem,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ["items"] });
  },
});
```

## IndexedDB Integration

### When to Use

| Scenario                    | Solution                         |
| --------------------------- | -------------------------------- |
| < 5MB total                 | localStorage via Zustand persist |
| > 5MB total                 | IndexedDB                        |
| Binary data (images, files) | IndexedDB                        |
| Simple key-value            | localStorage                     |
| Complex queries             | IndexedDB                        |

### Service Wrapper Pattern

```typescript
// services/indexedDBService.ts

From travisjneuman/.claude, MIT.

More from travisjneuman/.claude