← ClaudeAtlas

preactlisted

Preact 10 patterns with React-compat and Module Federation singleton setup. Trigger: When writing Preact components, hooks, types, or configuring Preact in Rsbuild/Rslib/Rstest.
Hyperxq/modular-frontend-architecture · ★ 1 · Web & Frontend · score 62
Install: claude install-skill Hyperxq/modular-frontend-architecture
## Context7 — Live Docs Before implementing, fetch current docs via Context7 MCP to avoid stale APIs: 1. `resolve-library-id` → `"preact"` 2. `get-library-docs` with resolved ID + your specific topic --- ## When to Use - Writing Preact functional components or custom hooks - Importing hooks, types, or JSX utilities - Configuring Rsbuild / Rslib / Rstest for Preact - Setting up Module Federation shared config - Using `forwardRef` or any compat bridge - Reviewing or fixing JSX transform issues ## Architecture Rules (READ BEFORE WRITING ANY COMPONENT) This project has a strict separation between `shell` (smart) and `ui-components` (dumb). ### `ui-components` — display only - **NEVER** import or create Zustand stores - **NEVER** add business logic, auth, routing, or A/B testing - **MAY** consume React Context — but the Provider ALWAYS lives in `shell` - Receives ALL data and callbacks via **props** or **context from shell** - All dependencies are `peerDependencies` — the component output bundles NOTHING ### `shell` — smart layer - Owns Zustand stores, Context providers, auth, routing, business logic - Reads from Zustand, passes data DOWN to `ui-components` via props or context - Never lets `ui-components` reach back up for data ### State decision tree ``` Need global app state? → Zustand store in shell, passed as prop to component Need to share across subtree? → Context provider in shell, useContext in component Need local UI state? → useState / use