Component Library Packaging

Quick Guide: This is the package boundary for UI code — everything that changes when styled, client-interactive React components stop being app files and become something another project installs. Five contracts have to be explicit: how styles reach the consumer, what cascade layer they land in, whether "use client" survives your build, what you demand of the consumer's React, and how many entries you expose. Every one of them fails silently in your own repo and loudly in someone else's.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST list every stylesheet in sideEffects — "sideEffects": false on a package that ships CSS deletes the CSS from the consumer's production build)

(You MUST put "use client" on leaf client modules only, and VERIFY it is still the first line of the matching dist/ files — bundlers drop module-level directives unless the output is one file per module)

(You MUST declare react and react-dom as peerDependencies with a range covering every major you support — react in dependencies gives the consumer two Reacts)

(You MUST publish library CSS inside a named cascade layer — unlayered library styles beat the consumer's unlayered app styles only by specificity, which starts a war you cannot win)