preact-uilisted

# Preact UI Skill Use this skill when building Preact pages, component systems, or full applications. Prefer the **MVVM (Model–View–ViewModel)** pattern to cleanly separate business logic from rendering. ## Architecture: MVVM in Preact Organize code into three layers: - **Model** — pure TypeScript modules for domain data, validation rules, and API contracts. No Preact imports. - **ViewModel** — custom hooks (`useXxxViewModel`) or module-level signals that hold state, computed values, and commands. Bridges Models to Views. - **View** — functional components that only render and call ViewModel hooks. No business logic inside. Directory layout: ``` src/ models/ # domain types, validation, factories viewmodels/ # useXxxViewModel hooks, signal stores components/ # shared presentational UI atoms/molecules features/ # feature slices (view + viewmodel colocated) routes/ # route-level page components services/ # API clients, storage adapters hooks/ # generic reusable hooks styles/ # global SCSS, tokens, mixins ``` ## Core approach 1. Define the Model first — data shape, validation, and invariants. 2. Build the ViewModel — expose signals, computed values, and actions. 3. Build the View last — render only, bind to the ViewModel. 4. Keep components small and composable. 5. Treat accessibility and responsiveness as design constraints, not afterthoughts. ## Preact fundamentals - Import from `preact` and