Enforce MVVM structure and signal-driven state management in Preact components.
npx skills add https://github.com/prachwal/preact-ui --skill preact-ui
Please help me install this Agent Skill. Skill: preact-ui Source: https://github.com/prachwal/preact-ui/tree/main Command: npx skills add https://github.com/prachwal/preact-ui --skill preact-ui
Building Preact pages and component systems can become chaotic without consistent layering, signal management, accessibility guardrails, and testing guidance, so this skill provides a single reference for MVVM structuring, signal usage, routing, forms, SCSS, and test practices.
Use the preact-ui guidance to structure a new MVVM-aligned Preact page, wiring models, viewmodels, signals, and views before writing any rendering logic.
High-intent search queries and answers about installing and using this skill.
Structure Preact components with MVVM by keeping Model modules pure, exposing signals, computed values, and actions through ViewModels, and restricting Views to rendering logic only. This decouples business logic from DOM concerns and ensures fine-grained signal-driven state updates.
The best way to manage state in Preact is using a signal-first approach. Utilize signals, computed values, effects, and batching for both module-level stores and component-local hooks to achieve fine-grained updates and predictable side effects.
Set up routing and accessibility in a Preact app by using preact-iso or preact-router for navigation and adhering to documented accessibility checkpoints. This ensures marketing pages, dashboards, and interactive tools remain navigable and compliant.
Yes, this MVVM Preact guidance covers SCSS conventions and form validation. It provides workflow guidance for styling integration and form validation alongside routing, accessibility checkpoints, and testing strategies for asynchronous flows.
Separate ViewModels from Views in Preact to keep business logic decoupled from DOM rendering concerns. ViewModels expose signals, computed values, and actions, while Views remain rendering-only, ensuring predictable side effects and easier testing.
Yes, you can use preact-iso and preact-router with signal-driven state management. The guidance prescribes signals, computed values, and batching for module-level stores and component-local hooks when compiling Preact applications with these routing tools.
prachwal-archiveImplement MVVM structure for Preact pages and components.
ngx-signal-formsCreate type-safe reactive Angular forms with Signal Forms API.
otographyAutomates schema-based form state and validation across React, Vue, Solid, Preact, Svelte, and Qwik.
Axel-DaMageProvide expert guidance on React 19 development, including components, state, and performance.
