---

name: react-discovery description: Research and understand React projects and features. Use when asked to explore a React codebase, check if a feature exists, understand component relationships, or map project structure. Specialized for React/Vite/Next.js projects.

React Discovery - React Project Research & Understanding

Skill chuyên biệt để nghiên cứu, khám phá và hiểu sâu về dự án React. Giúp AI hiểu rõ codebase trước khi đề xuất hoặc thực hiện thay đổi.

Copy┌─────────────────────────────────────────────────────────────────┐
│                 REACT DISCOVERY PIPELINE                        │
├─────────────────────────────────────────────────────────────────┤
│  Detect → Explore → Map → Analyze → Report → Recommend          │
│     ↓        ↓        ↓       ↓         ↓          ↓           │
│ [PROJECT] [SEARCH] [VISUAL] [DEEP]  [SUMMARY] [NEXT STEPS]     │
└─────────────────────────────────────────────────────────────────┘

---

Supported React Stacks

---

Phase 1: Project Detection

Goal: Tự động nhận diện loại React project

Step 1.1: Read package.json

Copy// Detect từ dependencies
{
  "dependencies": {
    "react": "^18.x",      // ✅ React project
    "next": "^14.x",       // → Next.js
    "vite": "^5.x",        // → Vite
  }
}

Step 1.2: Identify UI Libraries

Step 1.3: Identify State Management

Step 1.4: Identify Routing

Detection Output

Copy═══════════════════════════════════════════════════════════
[PROJECT DETECTED]
═══════════════════════════════════════════════════════════

📦 Project: <project-name>
⚛️  Stack: Vite + React + TypeScript
🎨 UI: Tailwind CSS + Shadcn/ui
📊 State: Zustand + React Query
🧭 Router: React Router v6

Key Config Files:
• vite.config.ts
• tailwind.config.js
• tsconfig.json
• components.json

Folder Structure Pattern: Feature-based

Ready to explore features...
═══════════════════════════════════════════════════════════

---

Phase 2: Project Structure Mapping

React Project Structures

Pattern A: Feature-based (FSD-like)

Copysrc/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── api/
│   │   └── types.ts
│   └── products/
│       ├── components/
│       ├── hooks/
│       └── api/
├── shared/
│   ├── ui/
│   ├── hooks/
│   └── utils/
└── app/
    ├── routes/
    └── providers/

Pattern B: Type-based (Traditional)

Copysrc/
├── components/
│   ├── common/
│   └── features/
├── hooks/
├── services/
├── stores/
├── types/
├── utils/
└── pages/

Pattern C: Page-based (Next.js style)

Copysrc/
├── pages/          # or app/
│   ├── index.tsx
│   ├── about/
│   └── products/
├── components/
├── hooks/
├── lib/
└── styles/

Auto-detect Structure Pattern

Copy1. Check if `src/features/` exists → Feature-based
2. Check if `app/` exists → Next.js App Router
3. Check if `pages/` exists → Next.js Pages / Page-based
4. Default → Type-based

---

Phase 3: Feature Exploration

3.1 Search Strategy by Structure

For Feature-based:

CopyFeature "auth" location:
1. src/features/auth/
2. src/modules/auth/
3. src/domains/auth/

For Type-based:

CopyFeature "auth" components:
1. src/pages/auth/          # Pages
2. src/components/auth/     # Components  
3. src/hooks/useAuth*.ts    # Hooks
4. src/services/auth*.ts    # Services
5. src/stores/auth*.ts      # Stores

For Next.js App Router:

CopyFeature "auth" location:
1. app/(auth)/              # Route group
2. app/login/, app/register/
3. components/auth/
4. lib/auth.ts

3.2 Component Discovery Commands

Copy## Find all components of a feature

# By folder
Read: src/pages/<feature>/
Read: src/components/<feature>/

# By naming
glob: src/**/*<Feature>*.tsx
glob: src/**/*<feature>*.tsx

# By imports
Grep: "from.*<feature>" trong src/

3.3 Hook Discovery

Copy## Find hooks related to feature

glob: src/hooks/use<Feature>*.ts
glob: src/**/use<Feature>*.ts
Grep: "function use<Feature>"
Grep: "const use<Feature>"

3.4 API/Service Discovery

Copy## Find API calls

glob: src/services/<feature>*.ts
glob: src/api/<feature>*.ts
Grep: "fetch\|axios\|api" trong <feature> files
Grep: "useMutation\|useQuery" trong <feature> files

3.5 State Discovery

Copy## Find state management

# Zustand
glob: src/stores/*<feature>*.ts
Grep: "create\(" trong stores/

# Redux
glob: src/store/*<feature>*.ts
glob: src/redux/*<feature>*.ts

# React Query
Grep: "useQuery.*<feature>"
Grep: "queryKey.*<feature>"

---

Phase 4: Component Analysis

4.1 Component Anatomy

Copy## Analyzing: <ComponentName>.tsx

### Props Interface
| Prop | Type | Required | Default |
|------|------|----------|---------|
| title | string | ✅ | - |
| onClick | () => void | ❌ | - |

### Hooks Used
| Hook | Purpose |
|------|---------|
| useState | Local state for X |
| useAuth | Get current user |
| useQuery | Fetch data |

### Child Components
- <Button /> from shared/ui
- <Modal /> from shared/ui
- <UserAvatar /> from features/user

### Events/Handlers
| Handler | Triggers | Action |
|---------|----------|--------|
| handleSubmit | form submit | Call API |
| handleClose | click outside | Close modal |

### Renders
| Condition | What renders |
|-----------|--------------|
| loading | Skeleton |
| error | ErrorMessage |
| data | Main content |
| empty | EmptyState |

4.2 Data Flow Analysis

Copyflowchart TD
    A[User Action] --> B[Event Handler]
    B --> C{API Call?}
    C -->|Yes| D[useMutation/fetch]
    C -->|No| E[Local State Update]
    D --> F[Server]
    F --> G[Response]
    G --> H[Cache Update/Refetch]
    H --> I[Re-render]
    E --> I

4.3 State Flow Analysis

Copyflowchart LR
    subgraph Component
        A[Props] --> D[Render]
        B[Local State] --> D
        C[Store State] --> D
    end
    
    subgraph External
        E[Zustand Store]
        F[React Query Cache]
        G[URL Params]
    end
    
    E --> C
    F --> C
    G --> A

---

Phase 5: Feature Completeness Check

CRUD Checklist

Copy## Feature: <FeatureName>

### Operations
| Op | Status | Component | API | Notes |
|----|--------|-----------|-----|-------|
| Create | ✅ | CreateForm.tsx | POST /api/x | With validation |
| Read List | ✅ | List.tsx | GET /api/x | With pagination |
| Read Detail | ✅ | Detail.tsx | GET /api/x/:id | - |
| Update | ⚠️ | EditForm.tsx | PUT /api/x/:id | Missing fields |
| Delete | ❌ | - | - | Not implemented |

### UI States
| State | Status | Component | Notes |
|-------|--------|-----------|-------|
| Loading | ✅ | Skeleton | - |
| Empty | ✅ | EmptyState | - |
| Error | ❌ | - | No error UI |
| Success | ⚠️ | Toast | Basic only |

### UX Features
| Feature | Status | Notes |
|---------|--------|-------|
| Form validation | ✅ | Zod + react-hook-form |
| Optimistic update | ❌ | - |
| Infinite scroll | ❌ | Using pagination |
| Search/Filter | ⚠️ | Search only |
| Sort | ❌ | - |

React-specific Checks

Copy## React Best Practices

### Performance
- [ ] React.memo on heavy components
- [ ] useMemo/useCallback where needed
- [ ] Code splitting with lazy()
- [ ] Image optimization

### Accessibility
- [ ] Semantic HTML
- [ ] ARIA labels
- [ ] Keyboard navigation
- [ ] Focus management

### Error Handling
- [ ] Error boundaries
- [ ] API error states
- [ ] Form validation errors
- [ ] 404 pages

---

Phase 6: Report Template

Copy═══════════════════════════════════════════════════════════
[REACT DISCOVERY REPORT]
═══════════════════════════════════════════════════════════

# Feature: <Feature Name>

## 📊 Quick Summary

| Aspect | Status |
|--------|--------|
| Feature exists | ✅ Yes / ⚠️ Partial / ❌ No |
| Completeness | X% |
| Code quality | Good / Medium / Needs work |

---

## ⚛️ Project Context

**Stack**: Vite + React 18 + TypeScript
**UI**: Tailwind + Shadcn/ui  
**State**: Zustand + React Query
**Pattern**: Feature-based

---

## 📁 Feature Location

src/ ├── pages// │ ├── index.tsx # Entry │ └── components/ │ ├── List.tsx # List view │ ├── Detail.tsx # Detail view │ └── Form.tsx # Create/Edit ├── hooks/ │ └── use.ts # Business logic ├── services/ │ └── .service.ts # API calls └── stores/ └── .store.ts # State

Copy
---

## 🔄 How It Works

### Component Tree
<mermaid graph>

### Data Flow
<mermaid flowchart>

---

## 📋 Feature Inventory

| Function | Status | Location | LOC |
|----------|--------|----------|-----|
| List | ✅ | List.tsx | 120 |
| Create | ✅ | Form.tsx | 80 |
| Update | ⚠️ | Form.tsx | 80 |
| Delete | ❌ | - | - |

---

## 🔍 Key Code

### Main Component
`src/pages/<feature>/index.tsx`
```tsx
export default function FeaturePage() {
  const { data, isLoading } = useFeatureList();
  // ...
}

Main Hook

src/hooks/useFeature.ts

Copyexport function useFeatureList() {
  return useQuery({
    queryKey: ['features'],
    queryFn: featureService.getAll,
  });
}

---

⚠️ Gaps Found

---

🚀 Recommendations

1. Quick wins (< 1h):

   • Add error boundary
   • Add loading skeleton

2. Should do (1-4h):

   • Implement delete
   • Add form validation

3. Nice to have (> 4h):

   • Add unit tests
   • Add E2E tests

═══════════════════════════════════════════════════════════

Copy
---

## Quick Commands

### "Tính năng X có chưa?"

1. glob: src/**/.tsx
2. Grep: "" trong src/
3. → Report: Exists / Partial / Missing

Copy
### "Giải thích component Y"

1. Read: component file
2. Trace: imports & exports
3. Map: props, hooks, children
4. → Report: Anatomy + Flow diagram

Copy
### "Liệt kê tất cả pages"

1. Read: src/pages/ hoặc app/
2. glob: src/pages/**/index.tsx
3. → Report: Page list + routes

Copy
### "Dự án dùng những gì?"

1. Read: package.json
2. Detect: stack, UI, state, router
3. Read: config files
4. → Report: Tech stack summary

Copy
---

## Save Context (Optional)

Sau khi explore, có thể lưu context vào `.amp/project-context.md`:

```markdown
# Project Context

## Stack
- Framework: Vite + React 18
- Language: TypeScript 5.x
- UI: Tailwind CSS + Shadcn/ui
- State: Zustand + React Query
- Router: React Router v6
- Form: React Hook Form + Zod

## Structure
- Pattern: Feature-based
- Pages: src/pages/
- Components: src/components/
- Hooks: src/hooks/
- Services: src/services/
- Stores: src/stores/

## Key Features
- auth: src/pages/auth/
- products: src/pages/products/
- cart: src/pages/cart/

## Conventions
- Component naming: PascalCase
- Hook naming: use<Name>
- Service naming: <name>.service.ts
- Store naming: <name>.store.ts

Last updated: <date>

---

Anti-Patterns