Claude Skills by hassanzohdy

github.com/hassanzohdy

5 skillsA× 4B× 10 installs39 views

AtomsAHow to create atoms and atomCollections in React and use their per-instance hooks (`useValue`, `useState`, `use`, `useWatch`, `Provider`) and custom actions.developmentreacttestingVotes: 0GitHub stars: 9
OverviewBHigh-level overview of @mongez/react-atom — per-atom React hooks, presets (openAtom, loadingAtom, fetchingAtom, portalAtom), and per-request SSR isolation via AtomStoreProvider.developmentgoreactVotes: 0GitHub stars: 9
PresetsAPre-built atom shapes — `openAtom` (boolean toggle), `loadingAtom` (loading flag), `fetchingAtom` (full fetch lifecycle), and `portalAtom` (modal/drawer coordinator) — and when to reach for each. TRIGGER when: code imports or calls `openAtom`, `loadingAtom`, `fetchingAtom`, or `portalAtom` from `@mongez/react-atom`; code uses `useOpened`, `useLoading`, `useData`, `useError`, `usePagination`, `startLoading`, `stopLoading`, `toggleLoading`, `success`, `failed`, `append`, `prepend`, or `toggle` ...developmentreactgitVotes: 0GitHub stars: 9
RecipesAConcrete copy-paste recipes for common `@mongez/react-atom` patterns: toggles, modals with payload, fetch flows, granular subscriptions, SSR hydration, SSR-safe action handlers, and devtools setup. TRIGGER when: code mixes preset atoms (`openAtom`, `portalAtom`, `fetchingAtom`) with handlers, `AtomStoreProvider` + `HydrateAtomsScript` + `readHydration`, or calls `useAtom(template)` from an event handler; user asks "how do I wire up a modal with portalAtom", "how do I do a fetch flow with fetc...developmentgoreactVotes: 0GitHub stars: 9
SsrAHow to use `AtomStoreProvider`, `useAtom`, `useAtomStore`, and the hydration utilities (`HydrateAtomsScript`, `readHydration`, `serializeStore`, `serializeSnapshot`) for SSR-safe, per-request atom isolation and client hydration.developmentgoreactVotes: 0GitHub stars: 9