Refactoring Guide

Campsite Rule patterns for incremental tech debt reduction.

Quick Reference

Campsite Rule: Leave code a little better than you found it. Priority by risk:

Low-risk (auto-apply): Default exports, magic strings, inline styles
Medium-risk (cautiously): Type improvements, useEffect patterns, UI modernization
High-risk (ask first): GraphQL co-location, hook extraction, file splitting

Guiding Principle

"Leave the code a little better than you found it."—Baden-Powell's Campsite Rule

Pragmatic over perfect:

Only refactor when direct replacement exists
Deprecation signals refactoring opportunity
Leave as-is when no replacement exists
Small improvements compound over time

Priority Matrix

Priority	Pattern	Risk	Auto-apply?
1	Default → Named exports	LOW	Yes
2	Magic strings → Enums	LOW	Yes
3	Inline styles → Box props	LOW	Yes
4	`any` → Proper types	MEDIUM	Yes
5	useEffect anti-patterns	MEDIUM	Cautiously
6	UI modernization	MEDIUM	Yes (when replacement exists)
7	GraphQL co-location	MEDIUM	Ask first
8	Extract hooks	HIGH	Ask first
9	Split large files	HIGH	Ask first

Low-Risk Patterns

Default → Named Exports

Benefits: Better tree-shaking, consistent naming, easier refactoring

Magic Strings → Enums

Benefits: Type safety, exhaustiveness checking, autocomplete

Inline Styles → Box Props

Benefits: Design token consistency, no inline styles

Medium-Risk Patterns

any → Proper Types

useEffect Anti-patterns

UI Modernization

Only refactor when @prepared/ui-* replacement exists:

High-Risk Patterns

GraphQL Co-location

Move centralized GraphQL operations to component directories:

Ask first - moves files, affects imports

Extract Hooks

Ask first - creates new files, significant refactor

Split Large Files

Files >500 lines should be split:

Ask first - creates multiple files, affects imports

Decision Flowchart

Example: Applying Campsite Rule

Task: Add loading state to IncidentCard.tsx File contains:

Default export ❌
Inline styles ❌
MUI Button ❌
MUI Autocomplete ⚠️

Apply Campsite Rule:

✅ Convert default export → named export (low-risk)
✅ Replace inline styles → FlexBox props (low-risk)
✅ Replace MUI Button → @prepared911/ui Button (replacement exists)
⏸️ Leave MUI Autocomplete as-is (no @prepared replacement)
✅ Add loading state (primary task)

Result: File is incrementally better without perfect refactor.

Tech Debt Quantification

Current tech debt in dispatch app:

590 files with default exports
368 magic strings across 225 files
301 inline styles across 173 files
149 useEffect with empty deps across 109 files
30+ files over 500 lines
800 MUI imports across 472 files
636 legacy UI imports across 574 files

Goal: Reduce incrementally through Campsite Rule.

Component Patterns - Component organization
TypeScript Patterns - Type safety
UI Components - @prepared/ui-* packages

Reference Files

For more detailed technical guidance, see these reference files:

react-best-practices SKILL.md
patterns/*.md - 9 pattern files

Code quality / JavaScript Patterns

Architecture / File Organization