preact

name	preact
description	Build, modify, or review Preact v10 UI code. Use when working with Preact components, JSX, Vite setup, TypeScript config, hooks from preact/hooks, @preact/signals state, forms and controlled inputs, refs, context providers/consumers, routing, testing, SSR, debugging, preact/compat, or Preact ecosystem library choices.

Preact

Workflow

Inspect the local project before coding:

• Check package.json, build tooling, TypeScript/JSX config, and existing import style.
• Prefer native Preact imports from preact, preact/hooks, and @preact/signals.
• Use preact/compat only when the project intentionally consumes React ecosystem libraries.
• Prefer function components with hooks. Keep class components only where the surrounding code is class-oriented.
• Use official Preact docs and active Preact-org packages as stronger evidence than broad ecosystem lists.

Load References

Read only the reference needed for the task:

• references/core-patterns.md: components, hooks, signals, forms, refs, context, and event naming.
• references/setup-typescript.md: Vite, @preact/preset-vite, JSX transforms, TypeScript, and compat aliases.
• references/ecosystem-decisions.md: routing, state, forms, UI packages, Awesome Preact triage, and when to avoid third-party packages.
• references/testing-ssr-debugging.md: @testing-library/preact, preact-render-to-string, preact/debug, and browser verification.

Always Apply

• Keep component names uppercase in JSX.
• Prefer class over className unless the codebase uses preact/compat conventions.
• Use onInput for text input updates; use native DOM event names.
• Add stable key props for mapped children, including keyed fragments in loops.
• Use refs for imperative DOM work and stable mutable values, not for render-driving state.
• For signals, assign to .value; replace arrays and objects instead of mutating them in place.
• Run the project's formatter, typecheck, and tests when available. For UI changes, inspect the affected screen in a browser when practical.