DDG-PCT Copilot Assistant

Expert assistant for the DDG-PCT mission-control web app—a Vite + React 19 + MapLibre/Deck.gl visualization for a Burney Falls→Castle Crags PCT section hike.

What This Skill Does

Provides contextual guidance for developing, maintaining, and extending the DDG-PCT project. Understands the architecture, data pipeline, component patterns, and content editing workflows specific to this trail mapping application.

Instructions

1. Understand the Architecture

Before making changes:

1. `Original-DDG-PCT-PDF.txt` + `PCT-prep-guide.md` → canonical narrative (edit these first)

2. Garmin GPX files + `scripts/` → `src/hike_data.json` (48k lines, generated—never hand-edit coordinates)

3. `src/data/planContent.js` + `resourcesIndex.js` → UI copy, gear, permits, checklists

4. `App.jsx` orchestrates loading → `TrailMap`, `Sidebar`, `ElevationProfile` render

2. Use Correct Commands

From repo root or `pct-hike-viz/`:

```bash

Development server

npm run dev:viz # binds 0.0.0.0:4173 for remote preview

cd pct-hike-viz && npm run dev # localhost:5173

Build + lint

npm run build:viz

cd pct-hike-viz && npm run lint

Data pipeline

npm run fetch:pct # USFS ArcGIS → public/data/pct_route.geojson

python scripts/snap_camps_to_route.py # snaps camp coords onto route

```

**Important:** After modifying `hike_data.json`, bump `VITE_HIKE_DATA_VERSION` in `.env` for cache invalidation.

3. Follow Component Patterns

When adding or modifying components:

4. Edit Content Correctly

| Content Type | File | Notes |

|---|---|---|

| UI copy (schedules, risks, permits) | `src/data/planContent.js` | Sync with `PCT-prep-guide.md` |

| External links + gear citations | `src/data/resourcesIndex.js` | Items reference `sourceIds` from here |

| Route coordinates | `src/hike_data.json` | Use snapper script only—never hand-edit |

| Cell coverage zones | `src/data/connectivityData.js` | 9 checkpoints with carrier ratings |

5. Understand Map Conventions

6. Navigate the File Structure

```

pct-hike-viz/src/

├── App.jsx # Data loader + layout orchestration

├── hike_data.json # Generated geo (DO NOT hand-edit coords)

├── components/

│ ├── TrailMap.jsx # react-map-gl + Deck.gl

│ ├── Sidebar.jsx # 6-tab mission control

│ ├── GearPlanner.jsx # RPG-style loadout (uses resourcesIndex)

│ └── ElevationProfile.jsx # d3-scale chart with map hover sync

├── data/

│ ├── planContent.js # All narrative content

│ ├── resourcesIndex.js # Citation lookup

│ └── connectivityData.js # Cell/satellite zones

└── services/

└── liveSatelliteService.js # Apple satellite polling

```

7. Be Aware of Sharp Edges

Constraints

Examples

**Example 1: Adding a new water source**

```javascript

// In hike_data.json (regenerate via script, or extend waterSources array)

"waterSources": [

// ... existing sources

{

"lat": 41.12345,

"lon": -122.67890,

"name": "Squaw Valley Creek",

"reliability": "reliable",

"treatment": "filter"

}

]

```

**Example 2: Adding UI content**

```javascript

// In src/data/planContent.js

export const permitInfo = {

// ... existing content

newSection: {

title: "Wilderness Permit",

details: "Castle Crags requires day-use permits...",

deadline: "2025-05-15"

}

};

```

**Example 3: Adding a transport icon**

```javascript

// In TrailMap.jsx or relevant component

function getTransportIcon(type) {

const icons = {

shuttle: '🚐',

hitch: '👍',

parking: '🅿️',

trailhead: '🥾',

newType: '🚁' // Add new type here

};

return icons[type] || '📍';

}

```

---

**Generated with Claude Code for KillerSkills**