← ClaudeAtlas

meteor-reactlisted

Use when building or debugging React interfaces in Meteor 3: meteor create --react, createRoot, JSX or TSX entry points, Rspack React detection, Fast Refresh, react-meteor-data, useTracker, useSubscribe, useFind, withTracker, Suspense, and Tracker.withComputation. Triggers on isLoading being treated as a boolean, useFind receiving fetch(), stale closure inputs, duplicate tracker side effects, unstable Suspense keys, lost reactivity after await, state reset after refresh, or React tests leaking computations. Use this skill when the user asks about a React skeleton, React-specific rspack.config rules, reactive data hooks, or classic versus Suspense integration. Route general bundler configuration to meteor-modern-build-stack and Meteor 2 upgrades to migrate-to-meteor-3.
meteor/agent-skills · ★ 7 · Web & Frontend · score 74
Install: claude install-skill meteor/agent-skills
# React interfaces for Meteor 3 React owns component rendering and local UI state. Meteor owns startup, Tracker reactivity, Minimongo, subscriptions, methods, and the build handoff. Keep those boundaries visible: components consume authorized client data and invoke methods, while publications and methods remain the server authority. ## Decision flow 1. For a new JavaScript app, run `meteor create --react <name>`; React is also the default skeleton. For TypeScript and TSX, run `meteor create --typescript <name>`. 2. Inspect `package.json`, `.meteor/packages`, `.meteor/versions`, the client entry, and `rspack.config.*`. Skeletons and `react-meteor-data` versions can change independently of this skill. 3. Mount one React root from `Meteor.startup` with `createRoot`. 4. Pick one `react-meteor-data` surface for a component: - Classic hooks for explicit loading UI and synchronous Minimongo reads. - Suspense hooks only when an upstream Suspense fallback and rejection boundary already own the pending and error states. 5. Use `useSubscribe` for readiness, `useFind` for reactive lists with stable document references, and `useTracker` for other Tracker values. 6. Keep React-specific Rspack rules here. Route aliases, loaders, code splitting, cache, output, or migration work to the build skills. 7. Test UI behavior in a browser-backed client suite and always unmount the rendered root so Tracker computations and subscriptions can stop. ## Current scaffol