rdfitted/pretext-check

Pretext Dependency & Tech Debt Monitor

Check if @chenglou/pretext is installed, compare to latest version, and scan for DOM measurement patterns that Pretext could replace.

Arguments (via args string)

• --install: Install or update @chenglou/pretext if not present or outdated
• --scan-only: Skip version check, only scan for DOM measurement tech debt

Workflow

Step 1: Detect Project Type

1. Check for package.json (Node/JS project)
2. If no package.json found, report "No JS/TS project detected" and skip to Step 3 (scan-only)

Step 2: Dependency Status

# Check if pretext is installed
grep -s "pretext" package.json

# Check installed version
npm ls @chenglou/pretext 2>/dev/null || echo "NOT INSTALLED"

# Check latest available version
npm view @chenglou/pretext version 2>/dev/null || echo "REGISTRY UNREACHABLE"

# Check for changelog/breaking changes if update available
npm view @chenglou/pretext --json 2>/dev/null

If --install flag and not installed or outdated:

npm install @chenglou/pretext

Step 3: DOM Measurement Tech Debt Scan

Scan the codebase for patterns that Pretext could replace. These are reflow-triggering DOM measurement calls used on text elements:

High-confidence patterns (directly replaceable by Pretext):

- getBoundingClientRect() — on text containers
- offsetHeight / offsetWidth — on text elements  
- scrollHeight / scrollWidth — for text overflow detection
- clientHeight / clientWidth — on text containers
- getComputedStyle() — for font/line-height reads
- ResizeObserver callbacks — that measure text height
- measureText() — canvas measureText without Pretext

Medium-confidence patterns (may benefit from Pretext):

- useLayoutEffect — with height/width reads inside
- requestAnimationFrame — with measurement inside
- MutationObserver — watching text size changes
- "layout shift" / "CLS" — comments indicating awareness of the problem

Search using Grep across JS/TS/JSX/TSX files:

Grep: getBoundingClientRect  glob: "*.{js,ts,jsx,tsx}"
Grep: offsetHeight|offsetWidth  glob: "*.{js,ts,jsx,tsx}"
Grep: scrollHeight|scrollWidth  glob: "*.{js,ts,jsx,tsx}"
Grep: clientHeight|clientWidth  glob: "*.{js,ts,jsx,tsx}"
Grep: getComputedStyle  glob: "*.{js,ts,jsx,tsx}"
Grep: measureText  glob: "*.{js,ts,jsx,tsx}"
Grep: useLayoutEffect  glob: "*.{js,ts,jsx,tsx}"

For each match, read surrounding context (5 lines) to determine if it's text-measurement related vs. general layout.

Step 4: Dependency Chain Analysis

If @chenglou/pretext is installed, check:

# Check dependency tree depth
npm ls @chenglou/pretext --all 2>/dev/null

# Check for peer dependency conflicts
npm ls --json 2>/dev/null | grep -A5 "pretext"

# Check bundle size impact
npm pack --dry-run @chenglou/pretext 2>/dev/null

Step 5: Report

Output a structured report:

## Pretext Dependency Status

| Item | Status |
|------|--------|
| Installed | YES / NO |
| Current Version | x.y.z / N/A |
| Latest Version | x.y.z |
| Update Available | YES / NO |
| Breaking Changes | WARNING / None |

## DOM Measurement Tech Debt

### High Priority (Direct Pretext Replacements)
- `file:line` — `getBoundingClientRect()` on text container — **Replaceable**
- ...

### Medium Priority (Potential Pretext Benefits)  
- `file:line` — `useLayoutEffect` with height read — **Review needed**
- ...

### Summary
- **X** high-priority patterns found (directly replaceable)
- **Y** medium-priority patterns found (review needed)
- **Estimated lift**: LOW / MEDIUM / HIGH

## Recommendations
- [ ] Install/update @chenglou/pretext
- [ ] Replace X direct measurement patterns
- [ ] Review Y potential patterns
- [ ] Run /perf-audit after changes to measure impact

Integration Notes

This skill is called automatically by:

• /build — when frontend code is being implemented (Phase 0.6 check)
• /kickoff — during Phase 3 doc generation for frontend projects
• /scope — during Phase 2 scouting for frontend-impacting scopes
• /create-issue — when issue involves text layout or measurement
• /plan — when planning frontend features
• /perf-audit — as part of the full performance audit

When called from another command, return a condensed summary (not full report) for inclusion in that command's output.