What problem does it solve? Jac client apps grow messy fast: page files balloon with state and handlers, files get sorted by which machine runs the code instead of what the code is about, and developers reach for hooks or contexts before they are needed. This Skill provides the architectural rules for structuring a multi-component Jac client app so state, files, and shared modules stay organized as the app scales. ## Core Features & Use Cases - Stateful-shell architecture: One page-level component owns all reactive has fields and async handlers, prop-drilling data and Callable callbacks into stateless section components, with handler bodies in the paired .impl.jac annex. - Feature-based file layout: Flat layout for small apps, one folder per feature (client and server code side by side) at 3+ features, with shared/ as a promotion destination rather than a default dump. - Escalation patterns: Clear triggers for when to extract a use<DomainNoun> hook (reused fetch+state logic in 2+ components) versus a createContext/useContext provider (distant components sharing live values). - Use Case: A page file's JSX exceeds 80 lines and several sections share fetching logic — load this Skill to split the page into a shell plus stateless sections, extract a hook, and place files correctly. ## Quick Start Ask the AI to review the growing Jac page component and restructure it into a stateful shell with prop-drilled section components following the jac-cl-organization layout rules.
