# Src Hooks Skill

> Persistent, portable, and performance-sensitive React state lifecycles.

- Skill: `kevin-liu-01/src-hooks-skill` (Agent Skill, multi-file: 32 files)
- Install (CLI): `npx skillmds@latest add kevin-liu-01/src-hooks-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kevin-liu-01/src-hooks-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kevin-liu-01 (https://skillmd.com/u/kevin-liu-01)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kevin-liu-01/src-hooks-skill

---


# glyphfield / src/hooks

## Purpose

Own reusable React state lifecycles for local persistence, portable canvases,
autosave, responsive behavior, and performance-sensitive subscriptions.

## Mental model & key files

- `usePersistentState.ts` and Studio draft hooks provide origin-local state.
- `usePortableCanvas.ts` serializes and hydrates CanvasDocument state.
- `useCanvasDocumentAutosave.ts` persists exact source snapshots.
- `usePortableCanvasWorkspace.ts` composes portability and autosave for editors.
- Tests use fake IndexedDB/localStorage and React harnesses to check timing.

## Patterns to follow / invariants

- Initialize safely during SSR and read browser storage only in the client.
- Scope keys by project, tool, and field; migrations must preserve old projects.
- Debounce/coalesce persistence outside high-frequency pointer updates.
- Autosave only a fully prepared current document, never a stale render snapshot.
- Clean up observers, animation frames, media listeners, and object URLs.
- Return stable callbacks/objects where downstream render cost is significant.

## Common tasks → first action

- Add persisted state → define a versioned key and migration/fallback behavior.
- Add CanvasDocument support → use `usePortableCanvasWorkspace`, then test exact
  source persistence, hydration, and changes that occur while serialization settles.
- Fix jank → profile update frequency and move storage/serialization off the pointer
  hot path before memoizing blindly.

## Gotchas

localStorage is synchronous and can jank drag/slider updates. IndexedDB callbacks can
arrive after newer edits; guard revision/source freshness. Strict Mode can run setup
twice. Storage may be unavailable, full, or malformed—degrade without erasing a
newer valid record.